<?xml version="1.0" encoding="UTF-8"?>
<rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/"
    xmlns:atom="http://www.w3.org/2005/Atom" xmlns:media="http://search.yahoo.com/mrss/" version="2.0">
    <channel>
        
        <title>
            <![CDATA[ Mark Mahoney - freeCodeCamp.org ]]>
        </title>
        <description>
            <![CDATA[ Browse thousands of programming tutorials written by experts. Learn Web Development, Data Science, DevOps, Security, and get developer career advice. ]]>
        </description>
        <link>https://www.freecodecamp.org/news/</link>
        <image>
            <url>https://cdn.freecodecamp.org/universal/favicons/favicon.png</url>
            <title>
                <![CDATA[ Mark Mahoney - freeCodeCamp.org ]]>
            </title>
            <link>https://www.freecodecamp.org/news/</link>
        </image>
        <generator>Eleventy</generator>
        <lastBuildDate>Sun, 24 May 2026 22:23:52 +0000</lastBuildDate>
        <atom:link href="https://www.freecodecamp.org/news/author/markm208/rss.xml" rel="self" type="application/rss+xml" />
        <ttl>60</ttl>
        
            <item>
                <title>
                    <![CDATA[ Storyteller: A Medium For Guiding Others Through Code ]]>
                </title>
                <description>
                    <![CDATA[ As a computer science instructor, I have long wished that there was a better way to guide others through my code. When I was first learning to program, I was a big fan of traditional programming books ]]>
                </description>
                <link>https://www.freecodecamp.org/news/storyteller-a-medium-for-guiding-others-through-code/</link>
                <guid isPermaLink="false">69a23fd4d4053a09f35c3d3e</guid>
                
                    <category>
                        <![CDATA[ software development ]]>
                    </category>
                
                    <category>
                        <![CDATA[ coding ]]>
                    </category>
                
                    <category>
                        <![CDATA[ General Programming ]]>
                    </category>
                
                    <category>
                        <![CDATA[ code playbacks ]]>
                    </category>
                
                <dc:creator>
                    <![CDATA[ Mark Mahoney ]]>
                </dc:creator>
                <pubDate>Sat, 28 Feb 2026 01:07:32 +0000</pubDate>
                <media:content url="https://cdn.hashnode.com/uploads/covers/5fc16e412cae9c5b190b6cdd/902c2299-ea98-4136-8ee8-36668f0c08ee.png" medium="image" />
                <content:encoded>
                    <![CDATA[ <p>As a computer science instructor, I have long wished that there was a better way to guide others through my code. When I was first learning to program, I was a big fan of traditional programming books. I have shelves and shelves of 800+ page books covering different programming languages and technologies.</p>
<p>I have known for a while now that most learners today don't share my love of big thick books, and to be honest, I rarely read those books in their entirety. Those big books often had a lot more exposition about the code than was probably needed. As a book buyer I wanted to make sure that I was getting my money's worth so the thicker they were, the better. It is much more common these days for learners to consume blog based tutorials and videos.</p>
<p>If you're learning to code right now, you've probably experienced the frustration of these formats too. I want to share something I've been working on that might help.</p>
<h2 id="heading-blogs-and-videos"><strong>Blogs and Videos</strong></h2>
<p>Blog-style tutorials mix code and the explanation of it in a top-to-bottom fashion. Scrolling through these web-based explanations feels familiar and one can copy and paste with ease. However, linking the explanation of the code and the code itself has always been less than ideal. Often I find myself jumping around the blog post wishing I could see the entire code example while working through the explanation. Instead, I am only able to see small parts of the code and it is challenging to see how those parts relate to other parts.</p>
<p>Video tutorials are very popular these days. They solve some of the problems associated with blog-style tutorials. Videos are great because you get two streams of information: the author's audible narrative and the code being written. A viewer can focus on the two streams simultaneously. However, videos have some problems too.</p>
<h3 id="heading-viewing-videos"><strong>Viewing Videos</strong></h3>
<p>From the perspective of the viewer, videos are hard to search through and are not useful as a copy and paste source or a code reference. More importantly, though, they discourage the viewer from taking their time and reflecting on the material. Often, when I am viewing a video tutorial I don't pause and let concepts sink in before the video moves on. Yes, I could be more disciplined and pause and rewind more often but usually I don't.</p>
<h3 id="heading-making-videos"><strong>Making videos</strong></h3>
<p>From the perspective of the video creator, it is clear that not all code being developed is interesting to watch. Some of it is not really worth showing the viewer. Not all video creators can keep the narrative interesting the whole time.</p>
<p>I know I struggle with the 'performance' aspect of making videos (you won't find me coding on Twitch anytime soon). Many times after I am done making a video, as I review it, I wish I had mentioned something that I forgot. It is hard to go back and edit the video without scrapping it and starting over.</p>
<h2 id="heading-storyteller"><strong>Storyteller</strong></h2>
<p>I have created a new medium to guide viewers through code examples. It combines the best of books, blog posts, and videos. This new medium allows a developer to write code using a top-notch editor (Visual Studio Code) and then replay the development of that code in the browser.</p>
<p>The author can add comments at important points in the evolution of the code. The comments can include text, hand drawn pictures, screenshots, and audio and video recordings. This allows the author to add visualizations that we have in our heads but don't make it into the code itself. The tool is called <a href="https://github.com/markm208/storyteller">Storyteller</a>.</p>
<img src="https://cloudmate-test.s3.us-east-1.amazonaws.com/uploads/covers/67df75cfc82238bba0f330b3/82dcb5c8-999f-432f-bd60-adcb3d8b9889.png" alt="82dcb5c8-999f-432f-bd60-adcb3d8b9889" style="display:block;margin:0 auto" width="600" height="400" loading="lazy">

<p>Here are a few examples of a 'playback':</p>
<ul>
<li><p><a href="https://playbackpress.com/books/pybook/chapter/2/10">Enlarging a Picture (Python)</a></p>
</li>
<li><p><a href="https://playbackpress.com/books/cppbook/chapter/8/8">Dynamic Variables and Pointers (C++)</a></p>
</li>
</ul>
<p>These work best on a big screen. If you are viewing a playback on a small screen you can view it in 'blog' mode (there is button in the top right to switch from 'code' mode to 'blog' mode).</p>
<p>I have created groups of these guided code walk-throughs to help me teach different topics to my students. These are all free and hosted on a website I created called <a href="https://playbackpress.com/books">Playback Press</a>. Here are some of the 'books' I have created so far:</p>
<ul>
<li><p><a href="https://playbackpress.com/books/cppbook/">An Animated Introduction to Programming in C++</a></p>
</li>
<li><p><a href="https://playbackpress.com/books/pybook/">An Animated Introduction to Programming with Python</a></p>
</li>
<li><p><a href="https://playbackpress.com/books/webdevbook/">An Introduction to Web Development from Back to Front</a></p>
</li>
<li><p><a href="https://playbackpress.com/books/cljbook/">An Animated Introduction to Clojure</a></p>
</li>
<li><p><a href="https://playbackpress.com/books/exbook/">An Animated Introduction to Elixir</a></p>
</li>
<li><p><a href="https://playbackpress.com/books/sqlbook/">Database Design and SQL for Beginners</a></p>
</li>
<li><p><a href="https://playbackpress.com/books/flutterbook/">Mobile App Development with Dart and Flutter</a></p>
</li>
<li><p><a href="https://playbackpress.com/books/patternsbook/">OO Design Patterns with Java</a></p>
</li>
</ul>
<p>I usually assign these as readings in my classes instead of using expensive textbooks. It is a lot easier for me to write several programs than it is to find a perfect textbook.</p>
<p>I also use them for in-class demos instead of writing code live. This makes code demos flow much faster and smoother. If I make an interesting mistake while preparing the code I can still highlight it with a comment. If I make an uninteresting or embarrassing mistake I can just ignore it and the students won't focus on it.</p>
<h3 id="heading-the-advantages-of-code-playbacks"><strong>The Advantages of Code Playbacks:</strong></h3>
<ul>
<li><p>The primary focus is on the code. It is always visible and easy to search and navigate.</p>
</li>
<li><p>Since the code is so accessible, the explanation of it tends to be short and concise.</p>
</li>
<li><p>The narrative can include whiteboard style drawings, screenshots, or videos of running code in addition to a text explanation.</p>
</li>
<li><p>As an author, I can review the code several times and add/edit comments each time I go through it. I don't have to give a perfect performance like I do with a video.</p>
</li>
<li><p>Comment points highlight when the author wants the viewer to take a moment to really think about the code and reflect on it. The playback only moves forward when the viewer is ready.</p>
</li>
<li><p>The code mentioned in a comment can be highlighted so the viewer knows exactly where they should be looking.</p>
</li>
<li><p>The code can be downloaded at any point in the playback. Then a viewer can run it, change it, and add to it.</p>
</li>
<li><p>The tool is a language independent editor plug-in and can be used to describe programs in any language.</p>
</li>
<li><p>Viewers only need a web browser to go through a playback.</p>
</li>
</ul>
<p>Recently, I've been exploring how to make playbacks even more useful for learners.</p>
<h2 id="heading-ai-as-an-infinitely-patient-tutor"><strong>AI as an Infinitely Patient Tutor</strong></h2>
<p>I have extended code playbacks to include an AI tutor. One thing I've learned in my years of teaching is that students often hesitate to ask questions. They worry about looking foolish, or they don't want to slow down the class, or they simply can't articulate what's confusing them.</p>
<p>What if every student had access to a patient tutor who never got frustrated with repeated questions and could explain concepts in multiple ways until something clicked?</p>
<p>I've integrated AI directly into the playback experience. As students work through a playback, they can ask questions about anything they're seeing. This might be a specific line of code, a concept I mentioned in a comment, or how something connects to material from earlier in the playback. The AI has full context. It can see the code, it understands where the student is in the playback, and it can provide explanations tailored to that exact moment. The AI is right there <em>with</em> the student, looking at the same code, understanding the same context.</p>
<div class="embed-wrapper"><iframe width="560" height="315" src="https://www.youtube.com/embed/WAPql5KZFR4?si=jFnCqidSTtfaZA4e" frameborder="0" allowfullscreen="" title="Embedded content" loading="lazy"></iframe></div>

<p>The AI can also generate self-grading multiple choice questions based on the code and comments in a playback. These low-stakes quizzes make the learning experience more engaging and help learners check their understanding as they go.</p>
<p>Let me be clear: the AI doesn't replace me as an instructor. I still create the playbacks. I still decide what concepts to cover, what order to present them, and what examples best illustrate the ideas. The AI is an extension of my teaching, not a replacement for it.</p>
<p>Note: The AI features are available to registered users on <a href="https://playbackpress.com/books">Playback Press</a>. Registration is free but logging in is required to access the AI tutor. If you want to see what this feels like, try one of the playbacks linked above and ask the AI a question about what you're seeing.</p>
<h2 id="heading-conclusion"><strong>Conclusion</strong></h2>
<p>My goal has always been to help people learn to code. Books gave us depth but demanded commitment. Blogs gave us accessibility but fragmented the code. Videos gave us narrative but took away control. Playbacks keep the code front and center while letting learners move at their own pace and reflect when they need to. Adding AI doesn't change that philosophy, it just means there's always someone available to answer questions. Together, they get closer to the experience of having an expert sit beside you and walk you through a program. That's what I've been trying to build, and I think we're getting there.</p>
 ]]>
                </content:encoded>
            </item>
        
            <item>
                <title>
                    <![CDATA[ Mobile App Development with Dart and Flutter ]]>
                </title>
                <description>
                    <![CDATA[ Mobile app development lets you build applications that run on multiple platforms. Flutter is Google's UI toolkit for building applications for mobile, web, and desktop from a single codebase. Flutter apps are written in Dart, a statically typed, obj... ]]>
                </description>
                <link>https://www.freecodecamp.org/news/mobile-app-development-with-dart-and-flutter/</link>
                <guid isPermaLink="false">6902ba897614003427892ef9</guid>
                
                    <category>
                        <![CDATA[ Dart ]]>
                    </category>
                
                    <category>
                        <![CDATA[ Flutter ]]>
                    </category>
                
                    <category>
                        <![CDATA[ Mobile Development ]]>
                    </category>
                
                <dc:creator>
                    <![CDATA[ Mark Mahoney ]]>
                </dc:creator>
                <pubDate>Thu, 30 Oct 2025 01:08:25 +0000</pubDate>
                <media:content url="https://cdn.hashnode.com/res/hashnode/image/upload/v1761786494585/5f335412-1621-4d5c-9861-29390381797c.png" medium="image" />
                <content:encoded>
                    <![CDATA[ <p>Mobile app development lets you build applications that run on multiple platforms. Flutter is Google's UI toolkit for building applications for mobile, web, and desktop from a single codebase. Flutter apps are written in Dart, a statically typed, object-oriented language.</p>
<p>Modern mobile development requires understanding widgets, state management, navigation, and data storage. The ecosystem includes thousands of free packages that give you access to device sensors, cloud services, and more.</p>
<p>This tutorial covers Dart fundamentals, Flutter basics, and some data storage options. There are 20 programs that walk you through building mobile apps from scratch. It’s built around a group of annotated <em>code playbacks</em>.</p>
<p>Each playback shows how I built a program step-by-step. They include a built-in AI tutor if you have any questions that I didn't cover. For a quick demo of how code playbacks work, watch this short video:</p>
<div class="embed-wrapper">
        <iframe width="560" height="315" src="https://www.youtube.com/embed/uYbHqCNjVDM" style="aspect-ratio: 16 / 9; width: 100%; height: auto;" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen="" loading="lazy"></iframe></div>
<p> </p>
<p>You can access the free tutorial here: <a target="_blank" href="https://playbackpress.com/books/flutterbook">https://playbackpress.com/books/flutterbook</a></p>
<p><strong>Prerequisites</strong>: This is not a general introduction to programming, so you’ll need some basic programming knowledge to follow along. If you understand variables, loops, functions, and classes in any language, you should be fine. If you need an introduction to programming, check out my other tutorials in <a target="_blank" href="https://playbackpress.com/books/cppbook">C++</a> or <a target="_blank" href="https://playbackpress.com/books/pybook">Python</a> on <a target="_blank" href="https://playbackpress.com/books">Playback Press</a>.</p>
<h2 id="heading-table-of-contents"><strong>Table of Contents</strong></h2>
<h3 id="heading-1-dart"><strong>1. Dart</strong></h3>
<ul>
<li><p><a target="_blank" href="https://playbackpress.com/books/flutterbook/chapter/1/1">1.1 Hello World!!! and Flutter/Dart Install Instructions</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/flutterbook/chapter/1/2">1.2 Simple Types in Dart</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/flutterbook/chapter/1/3">1.3 Lists (Array Based Containers)</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/flutterbook/chapter/1/4">1.4 Maps and Sets</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/flutterbook/chapter/1/5">1.5 Altering the Flow of Control</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/flutterbook/chapter/1/6">1.6 Closures</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/flutterbook/chapter/1/7">1.7 Asynchronous Code in Dart</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/flutterbook/chapter/1/8">1.8 Classes in Dart</a></p>
</li>
</ul>
<h3 id="heading-2-flutter"><strong>2. Flutter</strong></h3>
<ul>
<li><p><a target="_blank" href="https://playbackpress.com/books/flutterbook/chapter/2/1">2.1 Flutter Hello World</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/flutterbook/chapter/2/2">2.2 flutter create demo_app</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/flutterbook/chapter/2/3">2.3 ListViews</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/flutterbook/chapter/2/4">2.4 Laying Out Widgets</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/flutterbook/chapter/2/5">2.5 Navigation in Flutter</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/flutterbook/chapter/2/6">2.6 Forms</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/flutterbook/chapter/2/7">2.7 Using Packages in Flutter</a></p>
</li>
</ul>
<h3 id="heading-3-storing-an-apps-data"><strong>3. Storing an App's Data</strong></h3>
<ul>
<li><p><a target="_blank" href="https://playbackpress.com/books/flutterbook/chapter/3/1">3.1 Storing App Data in a File</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/flutterbook/chapter/3/2">3.2 Storing App Data in a SQLite Database</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/flutterbook/chapter/3/3">3.3 Storing App Data in a Server</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/flutterbook/chapter/3/4">3.4 Storing App Data in the Firebase Cloud Firestore</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/flutterbook/chapter/3/5">3.5 Firebase Authentication</a></p>
</li>
</ul>
<h2 id="heading-get-started"><strong>Get Started</strong></h2>
<p>Start with the Dart chapter if you're new to the language. If you have JavaScript, Java, or C# experience, it should feel familiar. Then, move on to the Flutter playbacks. Work through the playbacks at your own pace.</p>
<p>Questions or feedback? Contact me at <a target="_blank" href="mailto:mark@playbackpress.com">mark@playbackpress.com</a></p>
 ]]>
                </content:encoded>
            </item>
        
            <item>
                <title>
                    <![CDATA[ Machine Learning Tutorial: How to Program Without Creating Your Own Algorithms ]]>
                </title>
                <description>
                    <![CDATA[ Recreating the First Machine Learning Demo In 1958, Frank Rosenblatt demonstrated something remarkable to reporters in Washington, D.C. His "perceptron" could look at cards with shapes on them and tell which side the shape was on. The remarkable thin... ]]>
                </description>
                <link>https://www.freecodecamp.org/news/machine-learning-tutorial-how-to-program-without-creating-your-own-algorithms/</link>
                <guid isPermaLink="false">68e7d980bc03067a7e96f306</guid>
                
                    <category>
                        <![CDATA[ Perceptron ]]>
                    </category>
                
                    <category>
                        <![CDATA[ Supervised learning ]]>
                    </category>
                
                    <category>
                        <![CDATA[ Machine Learning ]]>
                    </category>
                
                    <category>
                        <![CDATA[ AI ]]>
                    </category>
                
                <dc:creator>
                    <![CDATA[ Mark Mahoney ]]>
                </dc:creator>
                <pubDate>Thu, 09 Oct 2025 15:49:20 +0000</pubDate>
                <media:content url="https://cdn.hashnode.com/res/hashnode/image/upload/v1760024939823/c2c53158-a2ec-4fe2-b222-236bef773e6b.png" medium="image" />
                <content:encoded>
                    <![CDATA[ <h2 id="heading-recreating-the-first-machine-learning-demo">Recreating the First Machine Learning Demo</h2>
<p>In 1958, <a target="_blank" href="https://en.wikipedia.org/wiki/Frank_Rosenblatt">Frank Rosenblatt</a> demonstrated something remarkable to reporters in Washington, D.C. His "<a target="_blank" href="https://en.wikipedia.org/wiki/Mark_I_Perceptron">perceptron</a>" could look at cards with shapes on them and tell which side the shape was on. The remarkable thing about this was that the system wasn't explicitly programmed how to do this – it learned how to do it by looking at examples.</p>
<p>In traditional systems, a programmer thinks about a program’s inputs and comes up with data structures and algorithms to solve the problem and produce valuable outputs. The human programmer is the star of the show.</p>
<p>Machine learning systems don’t require that a programmer specify <strong>how</strong> to solve a problem. With <a target="_blank" href="https://en.wikipedia.org/wiki/Supervised_learning">supervised machine learning</a>, the system’s <strong>inputs and outputs</strong> are used to <strong>train</strong> the system. This is a fundamental shift in building systems so that they can recognize patterns in fresh inputs and predict outputs. <strong>Learning</strong> is the star of the show.</p>
<p>This <a target="_blank" href="https://playbackpress.com/books/cppbook/chapter/12/3">code playback</a> recreates Rosenblatt's experiment using modern object-oriented programming techniques. You'll see two solutions to the same problem. The first uses traditional programming where I come up with an algorithm to solve the problem. The other is a very simple use of machine learning that <strong>learns</strong> how to solve the problem.</p>
<p><a target="_blank" href="https://playbackpress.com/books/cppbook/chapter/12/3"><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1759643953052/d58b6769-0f08-42c7-b228-3e73d9ce541b.png" alt="d58b6769-0f08-42c7-b228-3e73d9ce541b" class="image--center mx-auto" width="2432" height="1204" loading="lazy"></a></p>
<h2 id="heading-the-problem">The Problem</h2>
<p>Each card has a rectangular shape on either the left or right side of it. In Rosenblatt’s original demo, the cards are photographed and then turned into 20x20 pixel images. In this program, I simulate the cards and the images. The program’s job is to look at new cards and predict which side the shape is on.</p>
<h2 id="heading-the-traditional-approach">The Traditional Approach</h2>
<p>The <a target="_blank" href="https://playbackpress.com/books/cppbook/chapter/12/3">code playback</a> starts with a solution that I came up with. I thought about the inputs to the system, 400 pixels from an image, and developed an algorithm to count the active pixels on each side of it. Whichever side has more pixels is the side that I ‘predict’ has the shape.</p>
<p>This works well. All 500 test cards get predicted correctly. But I had to tell the computer exactly what to do.</p>
<h2 id="heading-the-machine-learning-approach">The Machine Learning Approach</h2>
<p>Next comes the perceptron, it was one of the first examples of machine learning. It is given many different inputs (400 pixel images) and outputs (labels associated with each card that states which side the shape is on). The perceptron takes the inputs and outputs and learns how to predict where a shape is.</p>
<p>As the programmer, I don’t tell it how to do this. I set up the program so that it can learn from the examples it sees during training.</p>
<p>My perceptron uses 400 weights (one for each pixel position). Initially, all of the weights are set to zero. The perceptron makes predictions by multiplying each pixel value by its corresponding weight value, then summing everything up. If the sum is negative, it will predict left. Otherwise, it will predict right.</p>
<p>The perceptron trains on labeled examples. When it makes a wrong prediction, it learns by adjusting the relevant weights. After training, it does a really good job of predicting test cards correctly.</p>
<h2 id="heading-what-youll-learn">What You'll Learn</h2>
<p>The <a target="_blank" href="https://playbackpress.com/books/cppbook/chapter/12/3">code playback</a> walks you through:</p>
<ul>
<li><p>Creating the card representation and pixel data</p>
</li>
<li><p>Implementing the non-AI solution (so you can see the traditional approach)</p>
</li>
<li><p>Building a perceptron class with weights</p>
</li>
<li><p>Understanding the prediction mechanism (sum of products)</p>
</li>
<li><p>Seeing how training updates the weights based on errors</p>
</li>
<li><p>Watching the weights evolve from random values to learned patterns</p>
</li>
<li><p>Understanding why some initial approaches fail and how to fix them</p>
</li>
</ul>
<p>You'll see the actual weight values after training. Some patterns are obvious. Some are surprising. The playback challenges you to understand and explain these patterns.</p>
<h2 id="heading-why-this-matters">Why This Matters</h2>
<p>This is one of the simplest examples of machine learning that you can study. The perceptron is essentially a single neuron. Modern neural networks stack many neurons in layers. They can learn vastly more complex patterns, but the core idea is the same. This is a great way to begin your journey if you want to learn about neural networks, machine learning, and AI.</p>
<h2 id="heading-interactive-learning">Interactive Learning</h2>
<p><a target="_blank" href="https://playbackpress.com/books/cppbook/chapter/12/3"><strong>View the complete code playback here</strong></a></p>
<p>The playback includes a few challenges by asking some questions along the way. Can you figure out how many training examples are actually needed? When does the perceptron stop making mistakes during training? The code is available for you to download and experiment with, allowing you to recreate a piece of AI history. Rosenblatt's perceptron is where it all began.</p>
<p>The code playback medium is different from traditional videos or tutorials. You are guided through the code with a narrative and you get to see my thought processes. If you like this format, I have even more free content on my site, <a target="_blank" href="https://playbackpress.com/books">Playback Press</a>. Feel free to share your comments, questions, or feedback via email: <a target="_blank" href="mailto:mark@playbackpress.com">mark@playbackpress.com</a>.</p>
 ]]>
                </content:encoded>
            </item>
        
            <item>
                <title>
                    <![CDATA[ A Brief Introduction to SQLite ]]>
                </title>
                <description>
                    <![CDATA[ SQLite is one of the most underappreciated tools in a developer's toolkit. It's a full-featured relational database that runs directly in your application. No server setup. No configuration files. No network protocols. Just a simple library that give... ]]>
                </description>
                <link>https://www.freecodecamp.org/news/a-brief-introduction-to-sqlite/</link>
                <guid isPermaLink="false">68cd625e82b856dadd4cceba</guid>
                
                    <category>
                        <![CDATA[ SQL ]]>
                    </category>
                
                    <category>
                        <![CDATA[ SQLite ]]>
                    </category>
                
                    <category>
                        <![CDATA[ C++ ]]>
                    </category>
                
                    <category>
                        <![CDATA[ Python ]]>
                    </category>
                
                    <category>
                        <![CDATA[ Java ]]>
                    </category>
                
                <dc:creator>
                    <![CDATA[ Mark Mahoney ]]>
                </dc:creator>
                <pubDate>Fri, 19 Sep 2025 14:02:06 +0000</pubDate>
                <media:content url="https://cdn.hashnode.com/res/hashnode/image/upload/v1758290415152/439fa61c-9342-47cb-867a-0416fe6bd6cf.png" medium="image" />
                <content:encoded>
                    <![CDATA[ <p><a target="_blank" href="https://sqlite.org/">SQLite</a> is one of the most underappreciated tools in a developer's toolkit. It's a full-featured relational database that runs directly in your application. No server setup. No configuration files. No network protocols. Just a simple library that gives you the power of an ACID compliant RDBMS right where you need it.</p>
<p>SQLite powers more applications than you might think. It's in every smartphone, most web browsers, and countless desktop applications. Your phone probably has hundreds of SQLite databases on it right now. Despite handling billions of databases worldwide, many developers aren't familiar with all of the cool things that you can do with SQLite.</p>
<p>This tutorial introduces SQLite through practical examples in C/C++, Python, and Java. You can pick and choose the languages that suit your needs. No language wars here. You'll learn how to integrate SQLite into real applications. Whether you're building a desktop app, a web API, or just need local data storage without the drama of a full database server, SQLite has your back.</p>
<h2 id="heading-code-playbacks">Code Playbacks</h2>
<p>Code playbacks are a unique way to learn about programming. They are guided walkthroughs of code, allowing you to see not just the code itself but also the thought process behind it. This approach helps you understand not only what the code does, but why it was written that way. Here is a short video to show how to move through a code playback:</p>
<div class="embed-wrapper">
        <iframe width="560" height="315" src="https://www.youtube.com/embed/uYbHqCNjVDM" style="aspect-ratio: 16 / 9; width: 100%; height: auto;" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen="" loading="lazy"></iframe></div>
<p> </p>
<p>By registering on <a target="_blank" href="https://playbackpress.com/books">Playback Press</a>, you'll gain access to an AI assistant that can answer your questions about the code. This makes learning even more interactive and personalized. Watch this video to see how to work with it:</p>
<div class="embed-wrapper">
        <iframe width="560" height="315" src="https://www.youtube.com/embed/WAPql5KZFR4" style="aspect-ratio: 16 / 9; width: 100%; height: auto;" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen="" loading="lazy"></iframe></div>
<p> </p>
<h2 id="heading-a-brief-introduction-to-sqlite">A Brief Introduction to SQLite</h2>
<p>You can find my entire collection of SQLite code playbacks in my free book, <a target="_blank" href="https://playbackpress.com/books/sqlitebook">"Programming with SQLite"</a>.</p>
<p>Here's what you'll learn:</p>
<h3 id="heading-chapter-1-database-design-and-sql">Chapter 1: Database Design and SQL</h3>
<p>In this chapter, I cover the basics of relational database design and SQL. I keep it simple and practical. If you'd like more introductory SQL content like this go to my <a target="_blank" href="https://playbackpress.com/books/sqlbook">Intro SQL</a> book. If you'd like some SQL problems to work through, check out <a target="_blank" href="https://playbackpress.com/books/workedsqlbook">30 Worked SQL Examples</a>. If you already dream in <code>SELECT</code> statements, skip ahead to the chapter that best suits your needs.</p>
<ul>
<li><p><a target="_blank" href="https://playbackpress.com/books/sqlitebook/chapter/1/1">1.1 Database Design and Basic SQL</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/sqlitebook/chapter/1/2">1.2 One-to-Many Relationships and More SQL</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/sqlitebook/chapter/1/3">1.3 Many-to-Many Relationships and Even More SQL</a></p>
</li>
</ul>
<h3 id="heading-chapter-2-sqlite-in-cc">Chapter 2: SQLite in C/C++</h3>
<p>In this chapter, I discuss how to use the low level SQLite API from a C or C++ program. You have a lot of power when using the API and I cover ACID transactions. Yes, we're going to talk about pointers and memory management. Even if you're not a C/C++ programmer and haven't touched a pointer since college, I recommend looking at this chapter. Understanding what's happening under the hood will make the other chapters clearer. Plus, you can impress your friends at parties by casually mentioning you know how database transactions really work.</p>
<ul>
<li><p><a target="_blank" href="https://playbackpress.com/books/sqlitebook/chapter/2/1">2.1 Using the SQLite C/C++ API</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/sqlitebook/chapter/2/2">2.2 An Object Oriented Auction Program</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/sqlitebook/chapter/2/3">2.3 SQLite Transactions</a></p>
</li>
</ul>
<h3 id="heading-chapter-3-sqlite-in-python">Chapter 3: SQLite in Python</h3>
<p>Learn how to use SQLite in any Python program including Flask web apps. No ORMs hiding what's really happening. Just clean, direct database access. I cover how to query and create SQLite databases and then show how to build an API using <a target="_blank" href="https://flask.palletsprojects.com/en/stable/">Flask</a>. By the end, you'll have a working web API that didn't require installing PostgreSQL, configuring connection pools, or sacrificing a weekend to database administration.</p>
<ul>
<li><p><a target="_blank" href="https://playbackpress.com/books/sqlitebook/chapter/3/1">3.1 Using a SQLite Database in a Python Program</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/sqlitebook/chapter/3/2">3.2 Creating SQLite Databases</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/sqlitebook/chapter/3/3">3.3 Using SQLite in a Flask Web Application</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/sqlitebook/chapter/3/4">3.4 Creating a Web API with Flask and SQLite</a></p>
</li>
</ul>
<h3 id="heading-chapter-4-sqlite-in-java">Chapter 4: SQLite in Java</h3>
<p>In this final chapter I give an example in Java using JDBC. Because sometimes you need to write enterprise code, and SQLite works there too. Who says you need Oracle for everything?</p>
<ul>
<li><a target="_blank" href="https://playbackpress.com/books/sqlitebook/chapter/4/1">4.1 Using a SQLite Database in a Java Program</a></li>
</ul>
<h2 id="heading-conclusion">Conclusion</h2>
<p>Ready to explore SQLite? Start with the first playback and see how fun database programming can be. Each example builds on the previous one, giving you practical experience with real code. Real code solving real problems.</p>
<p>I'd love to hear your thoughts! Feel free to share your comments, questions, or feedback via email: <a target="_blank" href="mailto:mark@playbackpress.com">mark@playbackpress.com</a>. Your input helps me improve and create even better content.</p>
<p>If you've found this tutorial helpful, consider supporting my work through <a target="_blank" href="https://github.com/sponsors/markm208">GitHub Sponsors</a>. Your contributions help cover hosting costs and keep Playback Press free for everyone. Thank you for helping me continue creating educational resources for the developer community!</p>
 ]]>
                </content:encoded>
            </item>
        
            <item>
                <title>
                    <![CDATA[ A Brief Introduction to Ruby ]]>
                </title>
                <description>
                    <![CDATA[ Ruby is a programming language designed with developer happiness in mind. Its elegant and intuitive syntax makes coding not only productive but also enjoyable. Ruby stands out with its powerful metaprogramming capabilities, allowing developers to tre... ]]>
                </description>
                <link>https://www.freecodecamp.org/news/a-brief-introduction-to-ruby/</link>
                <guid isPermaLink="false">68a5f79379e37ec1bf4b9b72</guid>
                
                    <category>
                        <![CDATA[ Ruby ]]>
                    </category>
                
                    <category>
                        <![CDATA[ Ruby on Rails ]]>
                    </category>
                
                    <category>
                        <![CDATA[ sinatra ]]>
                    </category>
                
                <dc:creator>
                    <![CDATA[ Mark Mahoney ]]>
                </dc:creator>
                <pubDate>Wed, 20 Aug 2025 16:28:03 +0000</pubDate>
                <media:content url="https://cdn.hashnode.com/res/hashnode/image/upload/v1755707266513/270f71d0-0e56-46f6-bba1-7b369dd97f1d.png" medium="image" />
                <content:encoded>
                    <![CDATA[ <p>Ruby is a programming language designed with developer happiness in mind. Its elegant and intuitive syntax makes coding not only productive but also enjoyable. Ruby stands out with its powerful metaprogramming capabilities, allowing developers to treat code as data and manipulate it at runtime.</p>
<p>While many modern languages offer similar features, Ruby consistently delivers a seamless and joyful experience. Whether you're building a startup MVP, a scalable enterprise application, or a lightweight API, Ruby has you covered with frameworks like <a target="_blank" href="https://rubyonrails.org/">Rails</a> and <a target="_blank" href="https://sinatrarb.com/">Sinatra</a>.</p>
<p>Despite the growing popularity of JavaScript and Python, Ruby remains a valuable language to learn, not just for its utility, but for how it teaches you to write clean, expressive, and maintainable code.</p>
<p>If you've heard of Ruby but never used it, this tutorial is the perfect starting point. Designed to be completed in an afternoon, it offers a glimpse into what makes Ruby so beloved by developers. While it doesn't cover every aspect of the language, Ruby's intuitive nature ensures you'll be well prepared to dive right into frameworks like Sinatra or Rails after completing it.</p>
<h2 id="heading-code-playbacks"><strong>Code Playbacks</strong></h2>
<p>Code playbacks are a unique way to learn about programming. They are guided walkthroughs of code, allowing you to see not just the code itself but also the thought process behind it. This approach helps you understand not only what the code does, but <em>why</em> it was written that way. Here is a short video to show how to move through a code playback:</p>
<div class="embed-wrapper">
        <iframe width="560" height="315" src="https://www.youtube.com/embed/uYbHqCNjVDM" style="aspect-ratio: 16 / 9; width: 100%; height: auto;" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen="" loading="lazy"></iframe></div>
<p> </p>
<p>By registering on <a target="_blank" href="https://playbackpress.com/books">Playback Press</a>, you’ll gain access to an AI assistant that can answer your questions about the code. This makes learning even more interactive and personalized. Watch this video to see how to work with it:</p>
<div class="embed-wrapper">
        <iframe width="560" height="315" src="https://www.youtube.com/embed/WAPql5KZFR4" style="aspect-ratio: 16 / 9; width: 100%; height: auto;" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen="" loading="lazy"></iframe></div>
<p> </p>
<h2 id="heading-a-brief-introduction-to-ruby"><strong>A Brief Introduction to Ruby</strong></h2>
<p>You can find my entire collection of Ruby code playbacks in my free book, <a target="_blank" href="https://playbackpress.com/books/rubybook/">"A Brief Introduction to Ruby"</a>. Here's a quick look at what you'll learn:</p>
<h3 id="heading-highlights"><strong>Highlights</strong></h3>
<ul>
<li><p><a target="_blank" href="https://playbackpress.com/books/rubybook/chapter/1/1"><strong>1.1 Hello Ruby!!!</strong></a>: Write your first Ruby program and learn how to run it from the terminal.</p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/rubybook/chapter/1/2"><strong>1.2 Variables and Types</strong></a>: Explore Ruby's variables, constants, and string interpolation.</p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/rubybook/chapter/1/3"><strong>1.3 Selection and Looping</strong></a>: Master control flow with if statements, loops, and ranges.</p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/rubybook/chapter/1/4"><strong>1.4 Arrays</strong></a>: Work with arrays, one of Ruby's most versatile data structures.</p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/rubybook/chapter/1/5"><strong>1.5 Hashes</strong></a>: Learn about hashes, Ruby's equivalent of dictionaries or associative arrays.</p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/rubybook/chapter/1/6"><strong>1.6 Methods</strong></a>: Write reusable code with methods, parameters, and return values.</p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/rubybook/chapter/1/7"><strong>1.7 Closures</strong></a>: Discover how to pass code into methods and execute it with <code>yield</code>.</p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/rubybook/chapter/1/8"><strong>1.8 Iterators</strong></a>: Simplify data iteration with Ruby's powerful higher-order methods.</p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/rubybook/chapter/1/9"><strong>1.9 Classes in Ruby</strong></a>: Build objects with classes, instance variables, and inheritance.</p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/rubybook/chapter/1/10"><strong>1.10 Interacting Classes</strong></a>: Create cooperating classes and explore Ruby's "duck typing."</p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/rubybook/chapter/1/11"><strong>1.11 Unit Testing in Ruby</strong></a>: Write tests to ensure your code works as expected.</p>
</li>
</ul>
<h2 id="heading-conclusion"><strong>Conclusion</strong></h2>
<p>Ready to start your Ruby journey? Begin with the first playback and experience how fun and intuitive Ruby can be. Whether you're a complete beginner or an experienced developer, there's something here for everyone!</p>
<p>I’d love to hear your thoughts! Feel free to share your comments, questions, or feedback via email: <a target="_blank" href="https://file+.vscode-resource.vscode-cdn.net/Users/mmahoney/Dropbox/animCPPBook2021/devToBlogPosts/ruby/mark@playbackpress.com">mark@playbackpress.com</a>. Your input helps me improve and create even better content.</p>
<p>If you’ve found this tutorial helpful, consider supporting my work through <a target="_blank" href="https://github.com/sponsors/markm208">GitHub Sponsors</a>. Your contributions help cover hosting costs and keep Playback Press free for everyone. Thank you for helping me continue creating educational resources for the developer community!</p>
 ]]>
                </content:encoded>
            </item>
        
            <item>
                <title>
                    <![CDATA[ Object-Oriented Design Patterns with Java ]]>
                </title>
                <description>
                    <![CDATA[ In this article I will introduce some of the most useful object-oriented design patterns. Design patterns are solutions to common problems that show up over and over again. These problems will show up in many different contexts but always have the sa... ]]>
                </description>
                <link>https://www.freecodecamp.org/news/object-oriented-design-patterns-with-java/</link>
                <guid isPermaLink="false">6887df408810970f0e04fae6</guid>
                
                    <category>
                        <![CDATA[ design patterns ]]>
                    </category>
                
                    <category>
                        <![CDATA[ Java ]]>
                    </category>
                
                <dc:creator>
                    <![CDATA[ Mark Mahoney ]]>
                </dc:creator>
                <pubDate>Mon, 28 Jul 2025 20:36:16 +0000</pubDate>
                <media:content url="https://cdn.hashnode.com/res/hashnode/image/upload/v1753734965769/4d53f28e-7d85-4571-831f-1760490e06dc.png" medium="image" />
                <content:encoded>
                    <![CDATA[ <p>In this article I will introduce some of the most useful object-oriented <a target="_blank" href="https://www.freecodecamp.org/news/javascript-design-patterns-explained/">design patterns</a>. Design patterns are solutions to common problems that show up over and over again. These problems will show up in many different contexts but always have the same problem at the root.</p>
<p>A design pattern attempts to describe an effective solution to the problem in a generic way so that it can be applied to a specific set of circumstances.</p>
<p>I will use Java to build an example of each pattern. I’m assuming that you have some programming experience in Java. In particular, you should be (at least somewhat) familiar with the concepts of inheritance and polymorphism. These design patterns really show the power of inheritance and polymorphism, so if you are just learning about these topics this is a great opportunity to dig deeper.</p>
<p>What if you not a Java programmer? If you are familiar with any Object-Oriented language you will probably still get a lot out of the examples. Give it a shot!</p>
<h2 id="heading-code-playbacks"><strong>Code Playbacks</strong></h2>
<p>To make design patterns more approachable, I developed an interactive tutorial that uses annotated <a target="_blank" href="https://markm208.github.io/"><strong>code playbacks</strong></a> to walk through key design pattern features step-by-step.</p>
<p>Each design pattern is presented as a code playback that shows how a program changes over time along with my explanation about what's happening. This format helps you focus on the reasoning behind the code changes.</p>
<p>You can access the free 'book' of code playbacks here:</p>
<blockquote>
<p><a target="_blank" href="https://playbackpress.com/books/patternsbook">OO Design Patterns with Java</a>, by Mark Mahoney (that’s me)</p>
</blockquote>
<p>To view a code playback, click on the comments in the left panel. Each comment updates the code in the editor and highlights any changes. Read the explanation and study the code. If you get stuck, use the AI assistant like a tutor to help explain what is happening in the code.</p>
<p>For more information about code playbacks, you can watch a short demo here.</p>
<div class="embed-wrapper">
        <iframe width="560" height="315" src="https://www.youtube.com/embed/uYbHqCNjVDM" style="aspect-ratio: 16 / 9; width: 100%; height: auto;" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen="" loading="lazy"></iframe></div>
<p> </p>
<h2 id="heading-key-design-patterns-you-should-know">Key Design Patterns You Should Know</h2>
<h3 id="heading-strategy-pattern"><strong>Strategy Pattern</strong></h3>
<p>The <a target="_blank" href="https://www.freecodecamp.org/news/a-beginners-guide-to-the-strategy-design-pattern/"><strong>Strategy Pattern</strong></a> is used to define a 'family' of algorithms, encapsulate each one, and make them interchangeable. Software developers use the Strategy pattern when they know there are many different ways of accomplishing some behavior. Rather than include all the different ways in a single class, they separate them out into individual classes and plug them in when necessary.</p>
<p>This program creates some classes to hold student grades. Some instructors like to adjust the entire course’s grades to make them higher. Some instructors do this by dropping every student's lowest grade. Other instructors 'curve' each assignment. Since there are several different options, I will use the <strong>Strategy Pattern</strong> to isolate them and let the client choose which one they prefer.</p>
<p>Start by looking at the <code>Assignment</code>, <code>Student</code>, and <code>Course</code> classes. Once you are familiar with the core classes, watch as I change the code to implement two different approaches to <em>curving</em> the grades using the <strong>Strategy Pattern</strong>:</p>
<blockquote>
<p><a target="_blank" href="https://playbackpress.com/books/patternsbook/chapter/1/1"><strong>Strategy Pattern</strong> Adjusting Grades in a Course</a></p>
</blockquote>
<h3 id="heading-singleton-pattern"><strong>Singleton Pattern</strong></h3>
<p>There are times when you need to make sure there is only one instance of a class and it is accessible everywhere in your code. This is the problem that the <a target="_blank" href="https://en.wikipedia.org/wiki/Singleton_pattern"><strong>Singleton Pattern</strong></a> solves.</p>
<p>In this program, I will create a class that generates random numbers. I will rely on Java's built-in <code>Random</code> class but will be able to reproduce the exact same sequence of random numbers when in 'test mode'. I'll make sure that there is only one instance of this random number generator using the <strong>Singleton Pattern</strong>:</p>
<blockquote>
<p><a target="_blank" href="https://playbackpress.com/books/patternsbook/chapter/1/2"><strong>Singleton Pattern</strong> A Testable Random Number Class</a></p>
</blockquote>
<h3 id="heading-composite-pattern"><strong>Composite Pattern</strong></h3>
<p>Often, we’ll create whole/part containment tree structures. For example, in a file system there are simple files. I call these simple elements, <em>primitives</em>. We can group primitives together to form larger <em>composites</em>. Files can be grouped into directories. These composites (directories) can be grouped into still larger composites, and so on.</p>
<p>We could treat composites and primitives differently. But it often makes sense to treat them the same. Having to distinguish between the object types makes the application more complex.</p>
<p>The <a target="_blank" href="https://en.wikipedia.org/wiki/Composite_pattern"><strong>Composite Pattern</strong></a> describes how to use recursive composition so that clients don't need to make this distinction.</p>
<p>This program creates classes for printing a hierarchical collection of files and directories using the <strong>Composite Pattern</strong>:</p>
<blockquote>
<p><a target="_blank" href="https://playbackpress.com/books/patternsbook/chapter/1/3"><strong>Composite Pattern</strong> Displaying a Hierarchical File System</a></p>
</blockquote>
<h3 id="heading-decorator-pattern"><strong>Decorator Pattern</strong></h3>
<p>Sometimes we want to add responsibilities to individual objects, not an entire class. The <a target="_blank" href="https://en.wikipedia.org/wiki/Decorator_pattern"><strong>Decorator Pattern</strong></a> allows us to create <em>decorators</em> to provide a flexible alternative to inheritance for extending a class.</p>
<p>In this program, I create an interface for logging messages while a program is running. I use the interface to create a <code>ConsoleLogger</code> that prints the log messages to the screen. Then I start to add decorator objects that surround, or wrap, the <code>ConsoleLogger</code>. I add decorators to attach the date, author name, and time to the log messages using the <strong>Decorator Pattern</strong>:</p>
<blockquote>
<p><a target="_blank" href="https://playbackpress.com/books/patternsbook/chapter/1/4"><strong>Decorator Pattern</strong> Logging with Decorators</a></p>
</blockquote>
<h3 id="heading-state-pattern"><strong>State Pattern</strong></h3>
<p>Sometimes there are systems that react differently based on the 'state' that they are in. A state is a period of time during which a system will react to events according to certain rules. This state-based behavior is implemented using the <a target="_blank" href="https://en.wikipedia.org/wiki/State_pattern"><strong>State Pattern</strong></a>.</p>
<p>I’ll show you how to move through the characters in a string and parse it to account for quotes within it. For example, the following string:</p>
<p><code>"hamburgers chips 'hot dogs' pickles 'french fries'"</code></p>
<p>can be split into a collection like this:</p>
<p><code>["hamburgers", "chips", "hot dogs", "pickles", "french fries"]</code></p>
<p>There are may ways to accomplish this in Java, but I’ll show a state-based approach. When a single quote is encountered within a string I will use that as an event and move between different states using the <strong>State Pattern</strong>:</p>
<blockquote>
<p><a target="_blank" href="https://playbackpress.com/books/patternsbook/chapter/1/5"><strong>State Pattern</strong> String Splitting for Search Bars</a></p>
</blockquote>
<h3 id="heading-observer-pattern"><strong>Observer Pattern</strong></h3>
<p>The <a target="_blank" href="https://en.wikipedia.org/wiki/Observer_pattern"><strong>Observer Pattern</strong></a> is used when the update of a single piece of data in one object needs to be propagated to a collection of other objects.</p>
<p>For example, when the value of a cell in a spreadsheet changes, several other cells may need to be notified of that change so that they can update themselves. Similarly, in a social network application when a user makes a post, all of their friends need to be notified so that their feeds can be updated. Both of these are essentially the same problem that the <strong>Observer Pattern</strong> solves.</p>
<p>This program creates a class to hold a time in a day called <code>MyTime</code>. Then I create two different types of <code>Observers</code> that will be notified when the time changes. The two observers will re-display the time every time it changes using the <strong>Observer Pattern</strong>:</p>
<blockquote>
<p><a target="_blank" href="https://playbackpress.com/books/patternsbook/chapter/1/6"><strong>Observer Pattern</strong> Observing the Time Change</a></p>
</blockquote>
<h3 id="heading-proxy-pattern"><strong>Proxy Pattern</strong></h3>
<p>Sometimes we design a set of objects that have a client/server relationship but later decide that the two objects should not interact directly. This program shows how to use the <a target="_blank" href="https://en.wikipedia.org/wiki/Proxy_pattern"><strong>Proxy Pattern</strong></a> to place some new functionality in between two previously cooperating classes.</p>
<p>I create a <code>Card</code> and <code>Deck</code> class for card games. The <code>Deck</code> starts out being hosted on the same machine as the <code>Driver</code>. Then I split the <code>Driver</code> and the <code>Deck</code> class so that they can be run on different machines using the <strong>Proxy Pattern</strong>:</p>
<blockquote>
<p><a target="_blank" href="https://playbackpress.com/books/patternsbook/chapter/1/7"><strong>Proxy Pattern</strong> Dealing Cards from a Remote Deck</a></p>
</blockquote>
<h3 id="heading-factory-pattern"><strong>Factory Pattern</strong></h3>
<p>The <a target="_blank" href="https://en.wikipedia.org/wiki/Factory_method_pattern"><strong>Factory Pattern</strong></a> provides a mechanism for creating 'families' of related objects without specifying their concrete classes. Instantiating concrete objects in an application makes it hard to change those objects later.</p>
<p>In this program, I will create two different families of classes for a help system for two different computing platforms using the <strong>Factory Pattern</strong>:</p>
<blockquote>
<p><a target="_blank" href="https://playbackpress.com/books/patternsbook/chapter/1/8"><strong>Factory Pattern</strong> Getting Help in Mac and Windows</a></p>
</blockquote>
<h3 id="heading-visitor-pattern"><strong>Visitor Pattern</strong></h3>
<p>The <a target="_blank" href="https://en.wikipedia.org/wiki/Visitor_pattern"><strong>Visitor Pattern</strong></a> lets you add functionality to a hierarchy of classes without changing its interface.</p>
<p>The reason why this is important is that there are times when we cannot change an existing hierarchy of classes. Perhaps I am using a hierarchy of classes that I am not in control of but I want to add some new functionality to it anyway. This is where the <strong>Visitor Pattern</strong> comes in.</p>
<p>In this program, I’ll add functionality to the <code>File</code> and <code>Directory</code> classes from the <em>Composite</em> program that I wrote earlier with minimal changes to those classes.</p>
<p>I create a <em>visitor</em> to count the number of files and directories in a topmost directory. Then I write a <em>visitor</em> to collect only the filenames in a directory including its sub-directories using the <strong>Visitor Pattern</strong>:</p>
<blockquote>
<p><a target="_blank" href="https://playbackpress.com/books/patternsbook/chapter/1/9"><strong>Visitor Pattern</strong> Adding Functionality to a Hierarchy of Classes (File and Directory)</a></p>
</blockquote>
<h2 id="heading-conclusion"><strong>Conclusion</strong></h2>
<p>I hope you enjoyed learning about object-oriented design patterns. If you are interested in other programming paradigms, you can check out some of my other 'books' <a target="_blank" href="https://playbackpress.com/books">here</a>.</p>
<p>Questions and feedback are always welcome here: <a target="_blank" href="mailto:mark@playbackpress.com">mark@playbackpress.com</a></p>
<p>If you'd like to support my work and help keep Playback Press free for all, consider donating using <a target="_blank" href="https://github.com/sponsors/markm208">GitHub Sponsors</a>. I use all of the donations for hosting costs. Your support helps me continue creating educational content like this. Thank you!</p>
 ]]>
                </content:encoded>
            </item>
        
            <item>
                <title>
                    <![CDATA[ How to Build a Word Search Game Using HTML, CSS, and JavaScript ]]>
                </title>
                <description>
                    <![CDATA[ The Wordle phenomenon from a few years back inspired developers worldwide to create their own word games. It inspired me to conceive and build a game, too. ‘Word Zearch’ combines elements of Boggle and word search puzzles into a web-based game where ... ]]>
                </description>
                <link>https://www.freecodecamp.org/news/build-a-word-search-game-using-html-css-and-javascript/</link>
                <guid isPermaLink="false">687543a2e9820caf95eae4f3</guid>
                
                    <category>
                        <![CDATA[ Web Development ]]>
                    </category>
                
                    <category>
                        <![CDATA[ JavaScript ]]>
                    </category>
                
                    <category>
                        <![CDATA[ data structures ]]>
                    </category>
                
                <dc:creator>
                    <![CDATA[ Mark Mahoney ]]>
                </dc:creator>
                <pubDate>Mon, 14 Jul 2025 17:51:30 +0000</pubDate>
                <media:content url="https://cdn.hashnode.com/res/hashnode/image/upload/v1752511862075/76f0131a-336f-4670-a571-ad023e3906bb.png" medium="image" />
                <content:encoded>
                    <![CDATA[ <p>The <a target="_blank" href="https://www.nytimes.com/games/wordle/index.html">Wordle</a> phenomenon from a few years back inspired developers worldwide to create their own word games. It inspired me to conceive and build a game, too. ‘<a target="_blank" href="https://markm208.github.io/wordZearch/">Word Zearch</a>’ combines elements of <a target="_blank" href="https://en.wikipedia.org/wiki/Boggle">Boggle</a> and word search puzzles into a web-based game where players find words on a board.</p>
<p>This tutorial will teach you how to build a complete game from scratch. You'll implement advanced data structures (Trie), optimize search algorithms (recursion), and create a polished user interface (HTML/CSS). By the end, you will build a fully playable game and learn techniques that you can apply to any web project.</p>
<p>This tutorial covers:</p>
<ul>
<li><p>Implementing a Trie data structure for lightning-fast word search including partial word validation</p>
</li>
<li><p>Using recursion to efficiently explore millions of possible paths through a game board</p>
</li>
<li><p>Analyzing 20,000+ dictionary words to create balanced gameplay</p>
</li>
<li><p>Creating a build system that pre-processes data for better performance</p>
</li>
<li><p>Building a responsive UI that handles complex user interactions</p>
</li>
</ul>
<h2 id="heading-the-inspiration"><strong>The Inspiration</strong></h2>
<p>When playing Boggle with my family, I have designated myself as the 'checker' of other peoples' words when we are tabulating scores. All of the other players will list the words that they found while I point them out on the board to make sure that they are valid. Once you know that a word is on the board, finding it feels a whole lot easier than searching for it blindly.</p>
<p>I enjoy this process almost as much as playing the game. So, I built a game that focuses on that experience.</p>
<p>The rules are simple. The game presents 49 random letter groupings in a 7x7 grid. Starting with the longest words that can be found, players are presented with words and are asked to find them. Players click on adjacent letter groupings (horizontally, vertically, or diagonally) to form words. Each letter group can be used once per game. The challenge is to find as many valid words as possible in the shortest amount of time.</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1752511838114/d205d825-ff26-4f6b-b375-aeb7215b922e.png" alt="Image of the game" class="image--center mx-auto" width="1728" height="1764" loading="lazy"></p>
<p><strong>You can play the finished game here:</strong> <a target="_blank" href="https://markm208.github.io/wordZearch/"><strong>https://markm208.github.io/wordZearch/</strong></a><strong>.</strong></p>
<h2 id="heading-an-interactive-tutorial-on-building-word-zearch"><strong>An Interactive Tutorial on Building Word Zearch</strong></h2>
<p>To share how I built Word Zearch, I created "<a target="_blank" href="https://playbackpress.com/books/wordzearchbook">How I Built It: Word Zearch</a>". It is a collection of annotated code playbacks that walk through the entire development process. These playbacks show every line of code I wrote, from implementing the core data structures to polishing the user interface.</p>
<p>To view a code playback, click on the comments in the left panel. Each comment updates the code in the editor and highlights the change. Read the explanation, study the code, and use the built-in AI assistant if you have questions. For more information about code playbacks, you can watch a short demo here.</p>
<div class="embed-wrapper">
        <iframe width="560" height="315" src="https://www.youtube.com/embed/uYbHqCNjVDM" style="aspect-ratio: 16 / 9; width: 100%; height: auto;" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen="" loading="lazy"></iframe></div>
<p> </p>
<h2 id="heading-prerequisites"><strong>Prerequisites</strong></h2>
<p>You should have some programming experience to follow along. I use object-oriented programming, recursion, and DOM manipulation throughout the tutorial.</p>
<p>If you're new to web development, this offers a complete start-to-finish project that will help put all of the pieces together. If this tutorial moves too fast for you, consider starting with my introductory web development 'book' first: <a target="_blank" href="https://playbackpress.com/books/webdevbook">An Introduction to Web Development from Back to Front</a></p>
<h2 id="heading-what-youll-learn"><strong>What You'll Learn</strong></h2>
<h3 id="heading-1-building-a-trie-data-structure"><strong>1. Building a Trie Data Structure</strong></h3>
<p><a target="_blank" href="https://playbackpress.com/books/wordzearchbook/chapter/1/1">https://playbackpress.com/books/wordzearchbook/chapter/1/1</a></p>
<p>Learn how to implement a <a target="_blank" href="https://www.freecodecamp.org/news/how-to-validate-user-input-with-automated-trie-visualization/">Trie (prefix tree)</a> for fast word validation. This data structure is the foundation of the game's performance.</p>
<p>Starting with a dictionary file, I parse 20,000+ words into a nested object structure. Each level represents a letter position. The implementation includes a search method that returns three values: <code>FOUND</code>, <code>NOT FOUND</code>, or <code>PARTIAL</code>.</p>
<p>This <code>PARTIAL</code> value is crucial. It indicates when the beginning of a dictionary word is found but it is not a complete word. Later on when searching for words on the board, it tells the algorithm when to stop searching, preventing millions of unnecessary operations during gameplay.</p>
<h3 id="heading-2-modeling-letter-frequencies"><strong>2. Modeling Letter Frequencies</strong></h3>
<p><a target="_blank" href="https://playbackpress.com/books/wordzearchbook/chapter/1/2">https://playbackpress.com/books/wordzearchbook/chapter/1/2</a></p>
<p>Here, I analyze letter frequencies from the words in the dictionary to create weighted distributions for generating game boards randomly. I start by tracking how often single letters, two-letter combinations, and three-letter combinations appear across all dictionary words. This approach will work for words in any language as long as you have a dictionary file filled with words.</p>
<p>For each word, I extract all possible letter groupings of each size and count their occurrences. After processing the entire dictionary, I sort these groupings by frequency and select the most common ones. To ensure interesting game boards, I create proportional arrays where more frequent letter groups appear multiple times relative to their frequency. I'll use this data to create a balanced game board that reflects real language usage by picking the most used groups of letters at random.</p>
<h3 id="heading-3-a-simple-web-app"><strong>3. A Simple Web App</strong></h3>
<p><a target="_blank" href="https://playbackpress.com/books/wordzearchbook/chapter/1/3">https://playbackpress.com/books/wordzearchbook/chapter/1/3</a></p>
<p>In this playback, I set up the foundation for the web application and create an efficient build process. Rather than rebuilding the <code>Trie</code> and calculating letter frequencies every time someone plays the game, I develop a build system that pre-generates these data structures.</p>
<p>Then I reorganize the project by creating a build folder and a template file. The <code>BuildTrie</code> class will read the dictionary, construct the word map and letter frequencies, and inject this data into a template file to generate a static <code>Trie.js</code> file. This approach significantly improves performance since the computationally expensive dictionary processing happens once during the build phase rather than on every page load.</p>
<h3 id="heading-4-building-the-game-board"><strong>4. Building the Game Board</strong></h3>
<p><a target="_blank" href="https://playbackpress.com/books/wordzearchbook/chapter/1/4">https://playbackpress.com/books/wordzearchbook/chapter/1/4</a></p>
<p>Next, I implement the <code>WordBoard</code> class, which manages the 7x7 game board and contains the core algorithm for finding valid words. The board is configured to hold 49 letter groups with customizable distributions of single, double, and triple letter combinations.</p>
<p>The heart of the implementation is a recursive search algorithm in the <code>solve</code> method that explores all possible word paths. Starting from each position on the board, the algorithm moves in eight directions (horizontally, vertically, and diagonally), building up potential words by concatenating adjacent letter groups. To prevent infinite loops and ensure game rules are followed, I track visited positions so each letter group can only be used once per word.</p>
<p>The <code>Trie</code> integration provides a crucial optimization. When a letter sequence isn't found in the <code>Trie</code>, the algorithm stops exploring that path, preventing unnecessary searching. Found words are organized by length in a results array, with each result storing the complete path through the board. The playback concludes with testing the <code>WordBoard</code>, demonstrating how it successfully identifies all valid words that can be formed from the randomly generated letter groups.</p>
<h3 id="heading-5-the-front-end"><strong>5. The Front End</strong></h3>
<p><a target="_blank" href="https://playbackpress.com/books/wordzearchbook/chapter/1/5">https://playbackpress.com/books/wordzearchbook/chapter/1/5</a></p>
<p>In this final playback, I build the complete user interface for Word Zearch. I start by creating a 7x7 HTML table where each cell displays a letter group from the <code>WordBoard</code>.</p>
<p>I implement click handling that allows players to select adjacent letter groups, visually highlighting them as they build words. The core gameplay logic compares the player's selected path against the pre-calculated valid word paths from the <code>WordBoard</code>'s <code>solve</code> method.</p>
<p>When a match is found, I add visual feedback including directional arrows showing the word's path, color coding for completed words, and preventing reuse of letter groups by marking them as solved. Found words are displayed in a results list with timestamps and links to their definitions. The interface also includes hover effects to highlight previously found words on the board and handles game completion by showing total time and offering a replay option.</p>
<p>The result is a fully interactive word search game with intuitive visual feedback and smooth gameplay.</p>
<h2 id="heading-start-building"><strong>Start Building</strong></h2>
<p>Word games make excellent programming projects. They combine interesting computer science concepts with practical web development skills.</p>
<p><a target="_blank" href="https://markm208.github.io/wordZearch/">Try playing the game first to understand what I'm building</a>. Then dive into the code playbacks to see how it all comes together. If you get stuck, use the AI assistant like a tutor to help explain what is happening in the code. Afterwards, if you are feeling adventurous, try modifying the code, optimizing it, adding new features, or building your own word game!</p>
<p>Questions and feedback are always welcome here: <a target="_blank" href="mailto:mark@playbackpress.com">mark@playbackpress.com</a></p>
<p>If you'd like to support my work and help keep Playback Press free for all, consider donating using <a target="_blank" href="https://github.com/sponsors/markm208">GitHub Sponsors</a>. I use all of the donations for hosting costs. Your support helps me continue creating educational content like this. Thank you!</p>
 ]]>
                </content:encoded>
            </item>
        
            <item>
                <title>
                    <![CDATA[ An Animated Introduction to Web Development from Back to Front ]]>
                </title>
                <description>
                    <![CDATA[ Web development combines multiple technologies to create interactive applications that run in web servers and browsers. Modern web apps require understanding both the server-side (back end) and client-side (front end) and how they communicate with ea... ]]>
                </description>
                <link>https://www.freecodecamp.org/news/an-animated-introduction-to-web-development-from-back-to-front/</link>
                <guid isPermaLink="false">685c658face24766313d6c64</guid>
                
                    <category>
                        <![CDATA[ Web Development ]]>
                    </category>
                
                    <category>
                        <![CDATA[ JavaScript ]]>
                    </category>
                
                    <category>
                        <![CDATA[ Node.js ]]>
                    </category>
                
                    <category>
                        <![CDATA[ React ]]>
                    </category>
                
                    <category>
                        <![CDATA[ Web Components ]]>
                    </category>
                
                <dc:creator>
                    <![CDATA[ Mark Mahoney ]]>
                </dc:creator>
                <pubDate>Wed, 25 Jun 2025 21:09:35 +0000</pubDate>
                <media:content url="https://cdn.hashnode.com/res/hashnode/image/upload/v1750883709276/9a8aeb7d-51f8-4412-9ead-e833f4577fde.png" medium="image" />
                <content:encoded>
                    <![CDATA[ <p>Web development combines multiple technologies to create interactive applications that run in web servers and browsers. Modern web apps require understanding both the server-side (back end) and client-side (front end) and how they communicate with each other. This involves learning languages along with tools and frameworks that streamline development.</p>
<p>Web development has evolved significantly over the past decade. Today's developers work with sophisticated frameworks, build APIs, manage databases, and create responsive user interfaces. The ecosystem continues to grow with new tools emerging regularly.</p>
<p>This tutorial will get you started learning some of the most used tools and technologies of the trade. You'll learn about JavaScript, HTTP, Node, Express, JSON, SQLite, Mongo, HTML, CSS, Web Components, React, and GraphQL.</p>
<p>Even though there are 35 different programs in it, there are a lot of cool technologies that I am not covering. Hopefully, this material sparks your interest and you begin a journey to learn about the wonderful ecosystem built around the web.</p>
<h2 id="heading-an-animated-introduction-to-web-development"><strong>An Animated Introduction to Web Development</strong></h2>
<p>To make learning web development more accessible, I have created an interactive tutorial called "An Introduction to Web Development from Back to Front." This 'book' uses annotated code playbacks to demonstrate how to build web applications step by step.</p>
<p>Unlike traditional tutorials that mix partial code snippets with partial explanations, code playbacks make all of the code visible with links to it in the explanation. You'll see exactly how I build up each program.</p>
<p>To view a code playback, click on the comments in the left panel. Each comment updates the code in the editor and highlights the change. Read the explanation, study the code, and use the built-in AI tutor if you have questions. For more information about code playbacks, you can watch a short demo here.</p>
<div class="embed-wrapper">
        <iframe width="560" height="315" src="https://www.youtube.com/embed/uYbHqCNjVDM" style="aspect-ratio: 16 / 9; width: 100%; height: auto;" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen="" loading="lazy"></iframe></div>
<p> </p>
<p>You can access the free 'book' of code playbacks here: <a target="_blank" href="https://playbackpress.com/books/webdevbook">https://playbackpress.com/books/webdevbook</a></p>
<p><strong>Note on Prerequisites</strong>: This is not an introduction to programming. You should have some programming experience as I won't cover basics like if statements, loops, and functions. If you've programmed before in any language, you should be able to follow along.</p>
<p>If you are looking for an introduction to programming, I do have other books that introduce programming in <a target="_blank" href="https://playbackpress.com/books/cppbook">C++</a> and <a target="_blank" href="https://playbackpress.com/books/pybook">Python</a> along with others on the <a target="_blank" href="https://playbackpress.com/books">Playback Press</a> site.</p>
<h2 id="heading-table-of-contents"><strong>Table of Contents</strong></h2>
<h3 id="heading-1-javascript"><strong>1. JavaScript</strong></h3>
<ul>
<li><p><a target="_blank" href="https://playbackpress.com/books/webdevbook/chapter/1/1">Ancient JavaScript</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/webdevbook/chapter/1/2">Modern JavaScript</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/webdevbook/chapter/1/3">JavaScript and Types</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/webdevbook/chapter/1/4">Closures</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/webdevbook/chapter/1/5">Classes in JavaScript</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/webdevbook/chapter/1/6">Promises and async/await</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/webdevbook/chapter/1/7">More with async and await</a></p>
</li>
</ul>
<h3 id="heading-2-the-back-end-node-express-sqlite-and-mongo"><strong>2. The Back End: Node, Express, SQLite, and Mongo</strong></h3>
<ul>
<li><p><a target="_blank" href="https://playbackpress.com/books/webdevbook/chapter/2/1">Node Modules and npm</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/webdevbook/chapter/2/2">Creating Your Own Modules</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/webdevbook/chapter/2/3">The Http Module</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/webdevbook/chapter/2/4">Express Basics</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/webdevbook/chapter/2/5">Returning JSON Data</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/webdevbook/chapter/2/6">Reading and Writing Data to a JSON File</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/webdevbook/chapter/2/7">Express and SQLite</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/webdevbook/chapter/2/8">Express and MongoDB</a></p>
</li>
</ul>
<h3 id="heading-3-the-front-end-html-css-bootstrap-and-express-views"><strong>3. The Front End: HTML, CSS, Bootstrap, and Express Views</strong></h3>
<ul>
<li><p><a target="_blank" href="https://playbackpress.com/books/webdevbook/chapter/3/1">Basic HTML and CSS</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/webdevbook/chapter/3/2">HTML5 and More CSS</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/webdevbook/chapter/3/3">Bootstrap</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/webdevbook/chapter/3/4">Using Views in Express</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/webdevbook/chapter/3/5">Dynamic JavaScript</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/webdevbook/chapter/3/6">Sessions and Password Hashing</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/webdevbook/chapter/3/7">A Very Brief Introduction to the Firebase Cloud Firestore</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/webdevbook/chapter/3/8">Web Components Part 1: LegendHeader</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/webdevbook/chapter/3/9">Web Components Part 2: LegendTable</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/webdevbook/chapter/3/10">Web Components Part 3: NewLegendForm</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/webdevbook/chapter/3/11">Web Components Part 4: AuthBox</a></p>
</li>
</ul>
<h3 id="heading-4-react"><strong>4. React</strong></h3>
<ul>
<li><p><a target="_blank" href="https://playbackpress.com/books/webdevbook/chapter/4/1">Basic React</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/webdevbook/chapter/4/2">Using Vite to Create a React App</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/webdevbook/chapter/4/3">Using React and Express Together</a></p>
</li>
</ul>
<h3 id="heading-5-graphql"><strong>5. GraphQL</strong></h3>
<ul>
<li><p><a target="_blank" href="https://playbackpress.com/books/webdevbook/chapter/5/1">A Traditional API</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/webdevbook/chapter/5/2">GraphQL Query Syntax</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/webdevbook/chapter/5/3">A GraphQL Server Without a Database</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/webdevbook/chapter/5/4">A GraphQL Server that Uses a Database</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/webdevbook/chapter/5/5">Accessing a GraphQL Server Using fetch() and graphql-request</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/webdevbook/chapter/5/6">Using React to Access a GraphQL Server</a></p>
</li>
</ul>
<h2 id="heading-get-started"><strong>Get Started</strong></h2>
<p>I hope this animated introduction helps you grasp the fundamental concepts of web development and empowers you to start building your own web applications. Dive in, experiment, and let me know what you think!</p>
<p>If you have any questions or feedback, I'd love to hear it. Comments and thoughts are welcome anytime: <a target="_blank" href="mailto:mark@playbackpress.com">mark@playbackpress.com</a></p>
<p>If you'd like to support my work and help keep Playback Press free for all, consider donating using <a target="_blank" href="https://github.com/sponsors/markm208">GitHub Sponsors</a>. I use all of the donations for hosting costs. Your support helps me continue creating educational content like this. Thank you!</p>
 ]]>
                </content:encoded>
            </item>
        
            <item>
                <title>
                    <![CDATA[ An Animated Introduction to Programming with Python ]]>
                </title>
                <description>
                    <![CDATA[ Python is a high-level, general-purpose programming language. Created by Guido van Rossum and first released in 1991, Python is known for its design philosophy that emphasizes code readability, notably using significant indentation. It supports multi... ]]>
                </description>
                <link>https://www.freecodecamp.org/news/an-animated-introduction-to-programming-with-python/</link>
                <guid isPermaLink="false">685052f79796239b8044baeb</guid>
                
                    <category>
                        <![CDATA[ Python ]]>
                    </category>
                
                    <category>
                        <![CDATA[ Beginner Developers ]]>
                    </category>
                
                <dc:creator>
                    <![CDATA[ Mark Mahoney ]]>
                </dc:creator>
                <pubDate>Mon, 16 Jun 2025 17:23:03 +0000</pubDate>
                <media:content url="https://cdn.hashnode.com/res/hashnode/image/upload/v1750082209046/ed07548b-e859-47a0-8372-6e9b04cb51bc.png" medium="image" />
                <content:encoded>
                    <![CDATA[ <p><a target="_blank" href="https://www.python.org/downloads/">Python</a> is a high-level, general-purpose programming language. Created by <a target="_blank" href="https://en.wikipedia.org/wiki/Guido_van_Rossum">Guido van Rossum</a> and first released in 1991, Python is known for its design philosophy that emphasizes code readability, notably using significant indentation. It supports multiple programming paradigms, including object-oriented, imperative, and functional programming.</p>
<p>Python's popularity stems from its versatility and ease of use, making it an excellent choice for a broad range of applications. Its extensive standard library provides tools for numerous tasks, from web development and data analysis to artificial intelligence and scientific computing.</p>
<p>The language's clear syntax and active, supportive community also contribute to its widespread adoption among both beginners and experienced developers.</p>
<p>Python is employed across a wide array of domains, including:</p>
<ul>
<li><p>Data Analysis and Visualization: Processing, analyzing, and visualizing large datasets using libraries such as Pandas, NumPy, and Matplotlib.</p>
</li>
<li><p>Artificial Intelligence and Machine Learning: Developing AI models, machine learning algorithms, and deep learning applications with frameworks like TensorFlow and PyTorch.</p>
</li>
<li><p>Scientific and Numeric Computing: Performing complex calculations and simulations in fields like physics, engineering, and mathematics.</p>
</li>
<li><p>Web Development: Building server-side web applications with frameworks like Django and Flask.</p>
</li>
<li><p>Automation and Scripting: Automating repetitive tasks, system administration, and network configuration.</p>
</li>
<li><p>Software Testing and Quality Assurance: Writing scripts for automated testing.</p>
</li>
<li><p>Education: Widely used as a first language for teaching programming concepts due to its simplicity and readability.</p>
</li>
</ul>
<h2 id="heading-an-animated-introduction-to-programming-with-python"><strong>An Animated Introduction to Programming with Python</strong></h2>
<p>To make learning about Python programming more accessible, I developed an interactive tutorial called "An Animated Introduction to Programming with Python." This resource utilizes annotated code playbacks to demonstrate key language features step-by-step. From fundamental syntax to media manipulation, each concept is presented through executable code and accompanying visual explanations.</p>
<p>You can access the free 'book' of code playbacks here: <a target="_blank" href="https://playbackpress.com/books/pybook">https://playbackpress.com/books/pybook</a>.</p>
<p>For more information about code playbacks, you can watch a short demo.</p>
<div class="embed-wrapper">
        <iframe width="560" height="315" src="https://www.youtube.com/embed/uYbHqCNjVDM" style="aspect-ratio: 16 / 9; width: 100%; height: auto;" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen="" loading="lazy"></iframe></div>
<p> </p>
<h2 id="heading-a-focus-on-media-computation-with-jes"><strong>A Focus on Media Computation with JES</strong></h2>
<p>A portion of this book utilizes Mark Guzdial's pioneering "Media Computation" approach, which teaches programming concepts through the manipulation of digital media (images, sounds, and videos). Some of the examples in the book use the <a target="_blank" href="https://github.com/gatech-csl/jes">Jython Environment for Students</a> (JES).</p>
<h3 id="heading-a-note-on-jes"><strong>A Note on JES:</strong></h3>
<p>JES was developed at Georgia Tech and has been a highly effective pedagogical tool for many years. The main idea is to manipulate pixels in images for understanding fundamental programming concepts like iteration, conditionals, and functions in a visual and tangible way.</p>
<p>Even if JES isn't as widely used today, the lessons learned from manipulating pixels transfers to almost all other areas of computing. In other words, even if you don’t use JES it is still worth going through the playbacks marked with <em>JES.</em>**</p>
<h2 id="heading-table-of-contents"><strong>Table of Contents</strong></h2>
<ol>
<li><p>Flow of Control and Simple Data</p>
<ol>
<li><p><a target="_blank" href="https://playbackpress.com/books/pybook/chapter/1/1">Printing and flow</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/pybook/chapter/1/2">Arithmetic and comparing numbers</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/pybook/chapter/1/3">Programming with Data</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/pybook/chapter/1/4">Distance Between Two Points</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/pybook/chapter/1/5">More with Strings</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/pybook/chapter/1/6"><strong>JES:</strong> Prompting the User for Some Information</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/pybook/chapter/1/7"><strong>JES:</strong> Showing a Picture</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/pybook/chapter/1/8"><strong>JES:</strong> Accessing Pixels</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/pybook/chapter/1/9"><strong>JES:</strong> Adding a Caption to a Picture</a></p>
</li>
</ol>
</li>
<li><p>Iterating Over Data</p>
<ol>
<li><p><a target="_blank" href="https://playbackpress.com/books/pybook/chapter/2/1">Iterating Through a String</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/pybook/chapter/2/2">Lists and Iteration</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/pybook/chapter/2/3">Splitting Strings</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/pybook/chapter/2/4">Ranges</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/pybook/chapter/2/5">Reading from a File</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/pybook/chapter/2/6">Writing to a File</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/pybook/chapter/2/7"><strong>JES:</strong> Iterating Through Pixels</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/pybook/chapter/2/8"><strong>JES:</strong> Graying an Image</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/pybook/chapter/2/9"><strong>JES:</strong> Copying an Image</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/pybook/chapter/2/10"><strong>JES:</strong> Enlarging a Picture</a></p>
</li>
</ol>
</li>
<li><p>Conditions with if and while</p>
<ol>
<li><p><a target="_blank" href="https://playbackpress.com/books/pybook/chapter/3/1">Comparisons by the Computer</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/pybook/chapter/3/2">if, if/else, and if/else if/else Statements</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/pybook/chapter/3/3">Logical Operators</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/pybook/chapter/3/4">Loops</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/pybook/chapter/3/5"><strong>JES:</strong> Adding a Border to a Picture</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/pybook/chapter/3/6"><strong>JES:</strong> Finding the Predominant Color in a Row</a></p>
</li>
</ol>
</li>
<li><p>Data Containers</p>
<ol>
<li><p><a target="_blank" href="https://playbackpress.com/books/pybook/chapter/4/1">Python Lists</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/pybook/chapter/4/2">Python Dictionaries</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/pybook/chapter/4/3">Python Sets</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/pybook/chapter/4/4"><strong>JES:</strong> Storing User Supplied Data in a Dictionary</a></p>
</li>
</ol>
</li>
<li><p>Functions</p>
<ol>
<li><p><a target="_blank" href="https://playbackpress.com/books/pybook/chapter/5/1">A First Function</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/pybook/chapter/5/2">Function Return Values</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/pybook/chapter/5/3">Parameters</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/pybook/chapter/5/4">Scope of Variables</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/pybook/chapter/5/5">Pass by Reference or Pass by Value</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/pybook/chapter/5/6">Sorting with Functions</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/pybook/chapter/5/7"><strong>JES:</strong> Adding Text (Again) and Saving a File Using Functions</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/pybook/chapter/5/8"><strong>JES:</strong> Shrinking a Picture</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/pybook/chapter/5/9"><strong>JES:</strong> Making a Movie with Moving Text</a></p>
</li>
</ol>
</li>
<li><p>Classes</p>
<ol>
<li><p><a target="_blank" href="https://playbackpress.com/books/pybook/chapter/6/1">Classes</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/pybook/chapter/6/2">Class with Data and Methods</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/pybook/chapter/6/3">Classes that Interact with Each Other</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/pybook/chapter/6/4">Inheritance</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/pybook/chapter/6/5"><strong>JES:</strong> Photo Resizing/Rotating Class</a></p>
</li>
</ol>
</li>
</ol>
<p>I hope this animated introduction helps you grasp the fundamental concepts of Python and empowers you to start building your own applications. Dive in, experiment, and let me know what you think! If you have any questions or feedback, I'd love to hear it. Comments and feedback are welcome anytime: <a target="_blank" href="mailto:mark@playbackpress.com">mark@playbackpress.com</a></p>
<p>If you'd like to support my work and help keep Playback Press free for all, consider donating using <a target="_blank" href="https://github.com/sponsors/markm208">GitHub Sponsors</a>. I use all of the donations for hosting costs. Your support helps me continue creating educational content like this. Thank you!</p>
 ]]>
                </content:encoded>
            </item>
        
            <item>
                <title>
                    <![CDATA[ An Animated Introduction to Elixir ]]>
                </title>
                <description>
                    <![CDATA[ Elixir is a dynamic, functional programming language designed for building scalable and maintainable applications. It leverages the battle-tested Erlang VM, known for running low-latency, distributed, and fault-tolerant systems. Elixir is based on an... ]]>
                </description>
                <link>https://www.freecodecamp.org/news/an-animated-introduction-to-elixir/</link>
                <guid isPermaLink="false">682f44e3dcb21c615cf1a12d</guid>
                
                    <category>
                        <![CDATA[ Elixir ]]>
                    </category>
                
                    <category>
                        <![CDATA[ Functional Programming ]]>
                    </category>
                
                <dc:creator>
                    <![CDATA[ Mark Mahoney ]]>
                </dc:creator>
                <pubDate>Thu, 22 May 2025 15:38:11 +0000</pubDate>
                <media:content url="https://cdn.hashnode.com/res/hashnode/image/upload/v1747923637406/e7ad8796-6269-4260-b500-226e445140ce.png" medium="image" />
                <content:encoded>
                    <![CDATA[ <p><a target="_blank" href="https://elixir-lang.org/">Elixir</a> is a dynamic, functional programming language designed for building scalable and maintainable applications. It leverages the battle-tested Erlang VM, known for running low-latency, distributed, and fault-tolerant systems.</p>
<p>Elixir is based on another language called <a target="_blank" href="https://www.erlang.org/">Erlang</a>. Erlang was developed by Ericsson in the 1980s for telecom applications requiring extreme reliability and availability. It includes built-in support for concurrency, distribution, and fault-tolerance. Elixir, created by José Valim, brings a more approachable and expressive syntax to the Erlang VM. It lowers the barrier to entry for using Erlang's powerful features.</p>
<p>In Elixir, functions are the primary building blocks of programs, similar to how classes and methods are the core units in object-oriented languages. But instead of modeling behavior through stateful objects, functional languages like Elixir treat computation as a series of pure functions that take input and produce output without side effects.</p>
<p>This paradigm offers several benefits:</p>
<ul>
<li><p>Immutability: Data is immutable by default. Once a variable is bound, it can't be changed. This avoids hard to track bugs caused by side effects.</p>
</li>
<li><p>Functions as first-class citizens: Functions can be assigned to variables, passed as arguments, and returned from other functions. This enables powerful abstractions and code reuse.</p>
</li>
<li><p>Pattern matching: Elixir uses pattern matching to bind variables, unpack data structures, and control program flow. This leads to concise and declarative code.</p>
</li>
<li><p>Recursion: Looping is typically achieved through recursion. Elixir optimizes recursive calls to avoid stack overflow issues.</p>
</li>
</ul>
<p>While functional programming requires a shift in thinking, it can lead to more predictable and maintainable systems. Elixir makes this paradigm friendly and accessible.</p>
<p>One of Elixir's standout features is its concurrency model. It uses lightweight processes to achieve massive scalability:</p>
<ul>
<li><p>Processes are isolated and share no memory, communicating only via message passing.</p>
</li>
<li><p>The Erlang VM can run millions of processes concurrently on a single machine.</p>
</li>
<li><p>Fault-tolerance is achieved by supervising and restarting failed processes.</p>
</li>
</ul>
<p>This architecture enables building distributed, real-time systems that efficiently use modern multi-core hardware.</p>
<h2 id="heading-an-animated-introduction-to-elixir"><strong>An Animated Introduction to Elixir</strong></h2>
<p>To make Elixir's functional and concurrent nature more approachable, I developed an interactive tutorial called "An Animated Introduction to Elixir". It uses annotated code playbacks to walk through key language features step-by-step. From basic syntax to advanced topics like concurrency, each concept is explained through code and accompanying visuals.</p>
<p>You can access the free 'book' of code playbacks here: <a target="_blank" href="https://playbackpress.com/books/exbook">https://playbackpress.com/books/exbook</a>.</p>
<p>For more info about code playbacks, you can watch a short demo:</p>
<div class="embed-wrapper">
        <iframe width="560" height="315" src="https://www.youtube.com/embed/uYbHqCNjVDM" style="aspect-ratio: 16 / 9; width: 100%; height: auto;" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen="" loading="lazy"></iframe></div>
<p> </p>
<p>Part 1 of the book focuses on core Elixir – syntax basics, pattern matching, functions and modules, key data structures like tuples, maps, lists, functional concepts like closures, recursion, enumeration, and efficient immutability.</p>
<ul>
<li><p><a target="_blank" href="https://playbackpress.com/books/exbook/chapter/1/1">1.1 Hello Elixir!!!</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/exbook/chapter/1/2">1.2 Numbers and the Match Operator</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/exbook/chapter/1/3">1.3 Functions and More Matching</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/exbook/chapter/1/4">1.4 Modules and More Matching with SimpleMath</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/exbook/chapter/1/5">1.5 Closures</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/exbook/chapter/1/6">1.6 Ranges and the Enum Module</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/exbook/chapter/1/7">1.7 Tuples</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/exbook/chapter/1/8">1.8 Maps</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/exbook/chapter/1/9">1.9 SimpleDateFormatter Module with Maps</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/exbook/chapter/1/10">1.10 Lists, Matching, and Recursion</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/exbook/chapter/1/11">1.11 Poker Probabilities</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/exbook/chapter/1/12">1.12 Recursion in Elixir</a></p>
</li>
</ul>
<p>Part 2 explores Elixir's concurrency model – working with processes, message passing between processes, dividing work across processes, and real-world examples and benchmarking. The concepts are applied to practical problems like estimating poker probabilities and generating calendars.</p>
<ul>
<li><p><a target="_blank" href="https://playbackpress.com/books/exbook/chapter/2/1">2.1 Adding Tests to the Mix</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/exbook/chapter/2/2">2.2 Process Basics</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/exbook/chapter/2/3">2.3 Prime Sieve</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/exbook/chapter/2/4">2.4 Calendar with Processes</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/exbook/chapter/2/5">2.5 Poker with Processes</a></p>
</li>
</ul>
<h2 id="heading-why-learn-elixir">Why Learn Elixir?</h2>
<p>Learning Elixir is beneficial for programmers for several compelling reasons. Elixir's functional paradigm and immutable data structures promote writing cleaner, more predictable, and maintainable code.</p>
<p>Its actor-based concurrency model, built on the robust Erlang VM, enables developing highly scalable, fault-tolerant, and distributed systems that can efficiently leverage multi-core processors and handle massive numbers of simultaneous users. Also, Elixir has a friendly, expressive syntax that lowers the barrier to entry for using these powerful features.</p>
<p>Finally, Elixir has a rapidly growing, vibrant community and ecosystem. For example, the Elixir ecosystem includes powerful web frameworks like <a target="_blank" href="https://www.phoenixframework.org/">Phoenix</a> for building scalable web applications, <a target="_blank" href="https://nerves-project.org/">Nerves</a> for creating embedded software for devices, and <a target="_blank" href="https://hexdocs.pm/ecto/Ecto.html">Ecto</a> for writing database queries and interacting with different databases.</p>
<p>If you have any questions or feedback, I'd love to hear it. Comments and feedback are welcome anytime: <a target="_blank" href="mailto:mark@playbackpress.com">mark@playbackpress.com</a>.</p>
<p>If you'd like to support my work and help keep Playback Press free for all, consider donating using <a target="_blank" href="https://github.com/sponsors/markm208">GitHub Sponsors</a>. I use all of the donations for hosting costs. Your support helps me continue creating educational content like this. Thank you!</p>
 ]]>
                </content:encoded>
            </item>
        
            <item>
                <title>
                    <![CDATA[ A Brief Introduction to Web Components ]]>
                </title>
                <description>
                    <![CDATA[ In a previous article, I gave a brief introduction to React. This tutorial introduces an alternative approach to building a component-based frontend. It covers the fundamentals of Web Components to build modular, reusable elements for your web applic... ]]>
                </description>
                <link>https://www.freecodecamp.org/news/a-brief-introduction-to-web-components/</link>
                <guid isPermaLink="false">681cce7f505e2f4aa022069b</guid>
                
                    <category>
                        <![CDATA[ Web Components ]]>
                    </category>
                
                    <category>
                        <![CDATA[ Web Development ]]>
                    </category>
                
                    <category>
                        <![CDATA[ React ]]>
                    </category>
                
                <dc:creator>
                    <![CDATA[ Mark Mahoney ]]>
                </dc:creator>
                <pubDate>Thu, 08 May 2025 15:32:15 +0000</pubDate>
                <media:content url="https://cdn.hashnode.com/res/hashnode/image/upload/v1746625674217/902b1ac1-f7c2-42cd-b12f-d9803e58739d.png" medium="image" />
                <content:encoded>
                    <![CDATA[ <p>In a previous article, I gave a <a target="_blank" href="https://www.freecodecamp.org/news/a-brief-introduction-to-react/">brief introduction to React</a>. This tutorial introduces an alternative approach to building a component-based frontend. It covers the fundamentals of <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/API/Web_components">Web Components</a> to build modular, reusable elements for your web applications.</p>
<p>Web Components are a set of standardized browser APIs that allow you to create custom, reusable HTML elements with encapsulated functionality. They help developers create self-contained components that can be used across different frameworks or even without any framework at all.</p>
<p>This tutorial assumes you have some basic programming experience and are comfortable reading and writing JavaScript. You should understand variables, functions, loops, objects, classes, and how JavaScript works in the browser. You don’t need to know anything about Web Components to get started.</p>
<p>The four lessons presented here are taken from my free book of code playbacks:</p>
<blockquote>
<p><a target="_blank" href="https://playbackpress.com/books/webdevbook/">An Introduction to Web Development from Back to Front</a><br>By Mark Mahoney</p>
</blockquote>
<p>This book is available for free on <a target="_blank" href="https://playbackpress.com/books/">Playback Press</a>. The book is a hands-on guide to modern web development, covering everything from core JavaScript features to building full-stack apps with various tools and technologies.</p>
<p>Each lesson is presented as a <a target="_blank" href="https://markm208.github.io/">code playback</a>, which is an interactive code walkthrough that shows how a program changes over time along with my explanation about what's happening. This format helps you focus on the reasoning behind the code changes.</p>
<p>To view a playback, click on the comments in the left panel. Each comment updates the code in the editor and highlights the change. Read the explanation, study the code, and use the built-in AI tutor if you have questions. Here's a short video that shows how to use a code playback:</p>
<div class="embed-wrapper">
        <iframe width="560" height="315" src="https://www.youtube.com/embed/uYbHqCNjVDM" style="aspect-ratio: 16 / 9; width: 100%; height: auto;" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen="" loading="lazy"></iframe></div>
<p> </p>
<p>After this introduction, you might want to explore the official Web Components resources: <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/API/Web_components">MDN Web Components Guide</a>.</p>
<h2 id="heading-table-of-contents"><strong>Table of Contents</strong></h2>
<ul>
<li><p><a class="post-section-overview" href="#heading-web-components-part-1-your-first-custom-element">Web Components Part 1: Your First Custom Element</a></p>
</li>
<li><p><a class="post-section-overview" href="#heading-web-components-part-2-data-communication">Web Components Part 2: Data Communication</a></p>
</li>
<li><p><a class="post-section-overview" href="#heading-web-components-part-3-custom-events">Web Components Part 3: Custom Events</a></p>
</li>
<li><p><a class="post-section-overview" href="#heading-web-components-part-4-building-a-complete-app">Web Components Part 4: Building a Complete App</a></p>
</li>
<li><p><a class="post-section-overview" href="#heading-react-vs-web-components-comparison">React vs Web Components Comparison</a></p>
</li>
</ul>
<h2 id="heading-web-components-part-1-your-first-custom-element"><strong>Web Components Part 1: Your First Custom Element</strong></h2>
<p>This first lesson introduces building user interfaces using Web Components, which let you bundle together HTML, CSS, and JavaScript into a single reusable element.</p>
<p>These elements can be treated just like built-in HTML elements such as <code>h1</code>, <code>div</code>, and <code>img</code>. They're particularly useful when you want to break a page into smaller, self-contained, and reusable parts like headers, tables, or forms, while keeping the code for each organized and isolated.</p>
<p>In this playback, you'll learn:</p>
<ul>
<li><p>How to create a JavaScript class that represents a custom HTML element</p>
</li>
<li><p>How to access the attributes of the web component</p>
</li>
<li><p>How to create and use a web component in HTML</p>
</li>
</ul>
<p>The lesson focuses on creating a <code>LegendHeader</code> component that can be reused throughout a web application. You'll see how custom elements can have attributes just like regular HTML elements (such as <code>src</code> in an <code>img</code> tag), and how these attributes can be changed from JavaScript code, triggering methods in response.</p>
<p><strong>View the playback here:</strong> <a target="_blank" href="https://playbackpress.com/books/webdevbook/chapter/3/8"><strong>Web Components Part 1- LegendHeader</strong></a></p>
<h2 id="heading-web-components-part-2-data-communication"><strong>Web Components Part 2: Data Communication</strong></h2>
<p>Building on the previous lesson, this playback demonstrates how to create multiple components that share data. I'll enhance the <code>LegendHeader</code> component to display the count of legends being tracked, and add a new <code>LegendTable</code> component that displays all the CS legends in a database using an HTML table.</p>
<p>A key concept introduced in this lesson is having a top-level element hold the web app's data and letting it communicate changes to the components that rely on it. This approach makes component management more organized and maintainable.</p>
<p>In this playback, you'll learn:</p>
<ul>
<li><p>How to create and work with multiple components</p>
</li>
<li><p>How to set up and use 'observable attributes' in a web component</p>
</li>
<li><p>How a top-level element can manage data and inform components when data changes</p>
</li>
</ul>
<p><strong>View the playback here:</strong> <a target="_blank" href="https://playbackpress.com/books/webdevbook/chapter/3/9"><strong>Web Components Part 2- LegendTable</strong></a></p>
<h2 id="heading-web-components-part-3-custom-events"><strong>Web Components Part 3: Custom Events</strong></h2>
<p>This lesson expands the application by adding a <code>NewLegendForm</code> component that allows users to add new legends to the database. The playback introduces the concept of custom events that 'bubble' up through the DOM, enabling top-level elements to control requests for data.</p>
<p>You'll learn why it's often better for components not to manage app-wide data themselves. Having a top-level element manage the entire web app's data makes components simpler and more reusable, as they don't need to know about each other or communicate directly.</p>
<p>In this playback, you'll learn:</p>
<ul>
<li><p>How components can generate custom events to request data instead of managing it themselves</p>
</li>
<li><p>How a top-level element can listen for events and handle them</p>
</li>
<li><p>How a top-level element accesses data and passes it to components that need it</p>
</li>
</ul>
<p><strong>View the playback here:</strong> <a target="_blank" href="https://playbackpress.com/books/webdevbook/chapter/3/10"><strong>Web Components Part 3- NewLegendForm</strong></a></p>
<h2 id="heading-web-components-part-4-building-a-complete-app"><strong>Web Components Part 4: Building a Complete App</strong></h2>
<p>In this final lesson, I bring everything together to create a complete application with authentication. I'll add a new <code>AuthBox</code> component and implement a light authentication system so that only registered, logged-in users can add new legends to the database.</p>
<p>The playback uses sessions on the server to control user access and reinforces the importance of centralized data management in component-based architecture.</p>
<p>In this playback, you'll learn:</p>
<ul>
<li><p>How to implement user authentication with a web component</p>
</li>
<li><p>How to integrate all components into a complete, functional application</p>
</li>
<li><p>Best practices for data management in component-based web applications</p>
</li>
</ul>
<p><strong>View the playback here:</strong> <a target="_blank" href="https://playbackpress.com/books/webdevbook/chapter/3/11"><strong>Web Components Part 4- AuthBox</strong></a></p>
<h2 id="heading-react-vs-web-components-comparison"><strong>React vs Web Components Comparison</strong></h2>
<p>Some of the main differences between React and web components can be summarized like this:</p>
<div class="hn-table">
<table>
<thead>
<tr>
<td>Key Property</td><td>React</td><td>Web Components</td></tr>
</thead>
<tbody>
<tr>
<td><strong>Component Definition</strong></td><td>Uses functions (typically) to define components</td><td>Uses JavaScript classes that extend HTMLElement</td></tr>
<tr>
<td><strong>Tooling Requirements</strong></td><td>Requires tools for installation, transpilation, bundling (npm, webpack, babel, and so on)</td><td>Native browser support with no build tools or installation required</td></tr>
<tr>
<td><strong>Template Syntax</strong></td><td>Uses JSX, an HTML-like syntax within JavaScript</td><td>Uses standard HTML in strings or HTML templates</td></tr>
<tr>
<td><strong>DOM Updates</strong></td><td>Uses Virtual DOM to efficiently batch and minimize actual DOM manipulations</td><td>Directly manipulates the DOM, typically less optimized for frequent updates</td></tr>
<tr>
<td><strong>Property Types</strong></td><td>Accepts various data types as props (strings, arrays, objects, functions)</td><td>Only accepts strings as attributes in HTML</td></tr>
<tr>
<td><strong>Rendering Model</strong></td><td>Declarative: describe what the UI should look like, React handles updates</td><td>More imperative: directly manipulate the DOM in response to changes</td></tr>
<tr>
<td><strong>Style Encapsulation</strong></td><td>No built-in style encapsulation (requires CSS-in-JS or CSS Modules)</td><td>Built-in style encapsulation with Shadow DOM</td></tr>
<tr>
<td><strong>Browser Support</strong></td><td>Works in all browsers via polyfills</td><td>Modern browsers only (may require polyfills for older browsers)</td></tr>
<tr>
<td><strong>Ecosystem</strong></td><td>Large ecosystem with many libraries and tools</td><td>Smaller ecosystem, but growing</td></tr>
</tbody>
</table>
</div><h2 id="heading-wrapping-up">Wrapping Up</h2>
<p>These four lessons cover the fundamentals of Web Components, but there's much more to explore. Web Components provide a standards-based way to create reusable elements without the need for external libraries or frameworks, making them particularly valuable for building maintainable and portable code.</p>
<p>If you found this format helpful, explore the rest of the book to see how full web apps are built from scratch using modern tools and approaches.</p>
<p>Web Components represent just one approach to component-based web development. Keep building, keep reading, and try out the other playbacks when you're ready to go further.</p>
<p>If you have feedback about the playbacks I'd love to hear from you. You can reach me here <a target="_blank" href="mailto:mark@playbackpress.com">mark@playbackpress.com</a>.</p>
<p>If you'd like to support my work and help keep Playback Press free for all, consider donating using <a target="_blank" href="https://github.com/sponsors/markm208">GitHub Sponsors</a>. I use all of the donations for hosting costs. Your support helps me continue creating educational content like this. Thank you!</p>
 ]]>
                </content:encoded>
            </item>
        
            <item>
                <title>
                    <![CDATA[ A Brief Introduction to React ]]>
                </title>
                <description>
                    <![CDATA[ This tutorial introduces the basics of using React components in your web apps. React is a JavaScript library used to build user interfaces, especially for single-page applications where parts of the page need to update without a full page reload. It... ]]>
                </description>
                <link>https://www.freecodecamp.org/news/a-brief-introduction-to-react/</link>
                <guid isPermaLink="false">681397cd1168f254478cd514</guid>
                
                    <category>
                        <![CDATA[ React ]]>
                    </category>
                
                    <category>
                        <![CDATA[ Web Development ]]>
                    </category>
                
                    <category>
                        <![CDATA[ JavaScript ]]>
                    </category>
                
                <dc:creator>
                    <![CDATA[ Mark Mahoney ]]>
                </dc:creator>
                <pubDate>Thu, 01 May 2025 15:48:29 +0000</pubDate>
                <media:content url="https://cdn.hashnode.com/res/hashnode/image/upload/v1746109202328/e4b0f59b-a8d1-42de-9eff-b5413ced3b93.png" medium="image" />
                <content:encoded>
                    <![CDATA[ <p>This tutorial introduces the basics of using <a target="_blank" href="https://react.dev/">React</a> components in your web apps. React is a JavaScript library used to build user interfaces, especially for single-page applications where parts of the page need to update without a full page reload. It helps developers create interactive, reusable components that manage their own state and respond efficiently to data changes.</p>
<p>This guide assumes you have some basic programming experience and are comfortable reading and writing JavaScript. You should understand variables, functions, loops, objects, and how JavaScript works in the browser. You don’t need to know React or any build tools, as those are introduced along the way.</p>
<h3 id="heading-how-this-guide-works">How this Guide Works</h3>
<p>The three lessons presented here are taken from my free book of code playbacks:<br><a target="_blank" href="https://playbackpress.com/books/webdevbook/">An Introduction to Web Development from Back to Front</a>.</p>
<p>This book is available for free on <a target="_blank" href="https://playbackpress.com/books/">Playback Press</a>. The book is a hands-on guide to modern web development, covering everything from core JavaScript features to building full-stack apps with tools like Node, Express, SQLite, Mongo, and GraphQL.</p>
<p>Each lesson is presented as a <a target="_blank" href="https://markm208.github.io/">code playback</a>, which is an interactive code walkthrough that shows how a program changes over time along with my explanation about what's happening. This format helps you focus on the reasoning behind the code changes.</p>
<p>To view a playback, click on the comments in the left panel. Each comment updates the code in the editor and highlights the change. Read the explanation, study the code, and use the built-in AI tutor if you have questions. Here's a short video that shows how to use a code playback:</p>
<div class="embed-wrapper">
        <iframe width="560" height="315" src="https://www.youtube.com/embed/uYbHqCNjVDM" style="aspect-ratio: 16 / 9; width: 100%; height: auto;" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen="" loading="lazy"></iframe></div>
<p> </p>
<p>There are plenty of other great React resources out there. After you finish with this short introduction, check out the React team's official tutorial: <a target="_blank" href="https://react.dev/learn">https://react.dev/learn</a>.</p>
<h2 id="heading-table-of-contents"><strong>Table of Contents</strong></h2>
<ul>
<li><p><a class="post-section-overview" href="#heading-introduction-to-react-your-first-component">Introduction to React: Your First Component</a></p>
</li>
<li><p><a class="post-section-overview" href="#heading-building-a-react-app-with-vite">Building a React App with Vite</a></p>
</li>
<li><p><a class="post-section-overview" href="#heading-connecting-react-to-a-real-backend-with-express">Connecting React to a Real Backend with Express</a></p>
</li>
</ul>
<h2 id="heading-introduction-to-react-your-first-component"><strong>Introduction to React: Your First Component</strong></h2>
<p>This first lesson introduces building user interfaces using small, reusable React components. Instead of writing code to directly update the DOM, you define what the UI should look like, and React takes care of syncing the DOM with your data.</p>
<p>The playback shows how to use <code>ReactDOM.render</code> with <code>React.createElement</code>, and then how to write the same component using JSX. Over the course of the three lessons, I'll create a site that displays some computer science legends (and one imposter).</p>
<p>The lesson then moves on to creating a <code>CustomHeader</code> component that takes properties or <code>props</code>. It shows how to pass data into a component and how destructuring can make that easier. By the end, you'll know how to write and reuse simple components that can be used in larger React apps.</p>
<p><strong>View the playback here:</strong> <a target="_blank" href="https://playbackpress.com/books/webdevbook/chapter/4/1"><strong>Basic React</strong></a></p>
<h2 id="heading-building-a-react-app-with-vite"><strong>Building a React App with Vite</strong></h2>
<p>The next lesson shows how to create a modern React project using <a target="_blank" href="https://vite.dev/">Vite</a>. Vite takes care of the setup by creating a project folder, installing libraries, running a development server, and preparing a build for production. This lets you skip any manual configuration and start building your app right away.</p>
<p>I'll build on the CS Legends app from the first playback, but this time inside a project directory. I'll separate components into different files and use JSX. The playback also introduces <code>useState</code> for managing dynamic data and shows how to pass data and event handlers between components. The result is a working front-end app with clear structure and reusable code.</p>
<p><strong>View the playback here:</strong> <a target="_blank" href="https://playbackpress.com/books/webdevbook/chapter/4/2"><strong>Using Vite to Create a React App</strong></a></p>
<h2 id="heading-connecting-react-to-a-real-backend-with-express"><strong>Connecting React to a Real Backend with Express</strong></h2>
<p>This final lesson extends the Vite + React app by adding a database-backed Express backend. Instead of storing the legend data in React's local state, the app will fetch and update data using an Express API. You'll create a second folder for the backend server, connect it to a database, and write routes to get and add data.</p>
<p>I use the <code>useEffect</code> hook to load the data from the Express server when the app starts. You'll also set up the <code>cors</code> package to allow the frontend and backend to talk to each other during development. Once everything works, the React app is built into a static bundle and is served by the Express server. The result is a full-stack web app, ready to be deployed.</p>
<p><strong>View the playback here:</strong> <a target="_blank" href="https://playbackpress.com/books/webdevbook/chapter/4/3"><strong>Using React and Express Together</strong></a></p>
<h2 id="heading-wrapping-up">Wrapping Up</h2>
<p>These three lessons cover the basics, but there's much more to learn. If you found this format helpful, explore the rest of the book to see how full web apps are built from scratch using modern tools and frameworks.</p>
<p>React is just one piece of the web development puzzle. Keep building, keep reading, and try out the other playbacks when you're ready to go further.</p>
<p>If you have feedback about the playbacks I’d love to hear from you. You can reach me here <a target="_blank" href="mailto:mark@playbackpress.com">mark@playbackpress.com</a>.</p>
<p>If you'd like to support my work and help keep Playback Press free for all, consider donating using <a target="_blank" href="https://github.com/sponsors/markm208">GitHub Sponsors</a>. I use all of the donations for hosting costs. Your support helps me continue creating educational content like this. Thank you!</p>
 ]]>
                </content:encoded>
            </item>
        
            <item>
                <title>
                    <![CDATA[ An Animated Introduction to SQL – Learn to Query Relational Databases ]]>
                </title>
                <description>
                    <![CDATA[ In this tutorial, you’ll learn about the Structured Query Language (SQL), the standard language used to query relational databases. SQL is not a traditional programming language. In Python or Java, you write step-by-step instructions that tell the co... ]]>
                </description>
                <link>https://www.freecodecamp.org/news/an-animated-introduction-to-sql-learn-to-query-relational-databases/</link>
                <guid isPermaLink="false">67ffd01c61bb8e3a320b1eac</guid>
                
                    <category>
                        <![CDATA[ SQL ]]>
                    </category>
                
                    <category>
                        <![CDATA[ SQLite ]]>
                    </category>
                
                <dc:creator>
                    <![CDATA[ Mark Mahoney ]]>
                </dc:creator>
                <pubDate>Wed, 16 Apr 2025 15:43:24 +0000</pubDate>
                <media:content url="https://cdn.hashnode.com/res/hashnode/image/upload/v1744818155429/10b16956-a249-4815-b50a-594b58330a01.png" medium="image" />
                <content:encoded>
                    <![CDATA[ <p>In this tutorial, you’ll learn about the <a target="_blank" href="https://www.freecodecamp.org/news/what-is-sql-database-definition-for-beginners/">Structured Query Language (SQL)</a>, the standard language used to query relational databases.</p>
<p>SQL is not a traditional programming language. In Python or Java, you write step-by-step instructions that tell the computer exactly <strong>how</strong> to do something. This is called <strong>imperative</strong> programming.</p>
<p>SQL works differently. First, you understand what data is stored in your tables. Then you write a query describing <strong>what</strong> data you want and you give it to a database management system. The database management system figures out <strong>how</strong> to get it. This <strong>declarative</strong> style is part of what makes SQL powerful (and fun to use).</p>
<p>You don’t need to be a programmer to learn SQL, but having some programming experience helps. Concepts like conditional logic and comparing values to see if something is true or false will feel familiar if you’ve coded before.</p>
<p>If you want an introduction to the basics, check out some of my programming language tutorials listed below.</p>
<h2 id="heading-tutorial-structure"><strong>Tutorial Structure</strong></h2>
<p>This tutorial is built around three books of interactive code playbacks I use in my database courses:</p>
<ul>
<li><p><a target="_blank" href="https://playbackpress.com/books/sqlbook">Database Design and SQL for Beginners</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/workedsqlbook">Worked SQL Examples</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/sqlitebook">Programming with SQLite</a></p>
</li>
</ul>
<p>Each section of this tutorial includes worked examples where I show how I write SQL step-by-step, explaining my thought process along the way. You’ll see me experiment, refine, and build queries piece by piece, just like a real developer would. I rely heavily on Entity-Relationship Diagrams and Schemas to help me visualize the data stored in the databases.</p>
<p>Here’s how the tutorial is organized:</p>
<h3 id="heading-part-1-a-whirlwind-tour-of-sql"><strong>Part 1: A Whirlwind Tour of SQL</strong></h3>
<p>(from <a target="_blank" href="https://playbackpress.com/books/sqlbook">Database Design and SQL for Beginners</a>)</p>
<p>I start by exploring a simple database for a fictional pet adoption center called the <em>Paw Prints Adoption Center</em>. I introduce essential concepts like:</p>
<ul>
<li><p>Entity-Relationship (ER) diagrams</p>
</li>
<li><p>Schemas</p>
</li>
<li><p>Table structure and relationships</p>
</li>
</ul>
<p>This foundation sets the stage for everything that follows. If you're new to database design, spend some time here before moving on.</p>
<h3 id="heading-part-2-core-sql-concepts-and-keywords"><strong>Part 2: Core SQL Concepts and Keywords</strong></h3>
<p>(also from <a target="_blank" href="https://playbackpress.com/books/sqlbook">Database Design and SQL for Beginners</a>)</p>
<p>I cover the most important SQL keywords and ideas. Each topic is explained in its own playback with examples:</p>
<ul>
<li><p><code>CREATE TABLE</code>, <code>ALTER TABLE</code></p>
</li>
<li><p><code>SELECT</code>, <code>FROM</code>, <code>WHERE</code>, <code>JOIN</code></p>
</li>
<li><p><code>ORDER BY</code>, <code>GROUP BY</code>, <code>HAVING</code></p>
</li>
<li><p><code>INSERT</code>, <code>UPDATE</code>, <code>DELETE</code></p>
</li>
<li><p>Nested queries, Common Table Expressions, and set operations (<code>UNION</code>, <code>INTERSECT</code>, <code>EXCEPT</code>)</p>
</li>
<li><p>Indexes and transactions</p>
</li>
</ul>
<p>This section works as a reference. If you're stuck on a query or forget what a keyword does, come back here.</p>
<h3 id="heading-part-3-practice-problems"><strong>Part 3: Practice Problems</strong></h3>
<p>(from <a target="_blank" href="https://playbackpress.com/books/workedsqlbook">Worked SQL Examples</a>)</p>
<p>Practice is how you really learn. I’ve included 36 practice problems using the Paw Prints database and a new university database. Each problem has an animated playback showing how I worked through the solution step-by-step.</p>
<p>Try writing your own query before watching the solution. Struggling with the problem first will help you learn much more than just watching me provide the answer.</p>
<p>These problems build your skills gradually and help reinforce the use of ER diagrams and schemas in real scenarios.</p>
<h3 id="heading-part-4-using-sqlite-in-programs"><strong>Part 4: Using SQLite in Programs</strong></h3>
<p>(from <a target="_blank" href="https://playbackpress.com/books/sqlitebook">Programming with SQLite</a>)</p>
<p>In this final optional section, I show how to connect SQL to real code. You’ll learn how to use the <a target="_blank" href="https://sqlite.org/">SQLite</a> database in:</p>
<ul>
<li><p>C/C++</p>
</li>
<li><p>Python and Flask</p>
</li>
<li><p>Java</p>
</li>
</ul>
<h3 id="heading-running-queries"><strong>Running Queries</strong></h3>
<p>A database management system (DBMS) is the software used to manage and query data in a database. Many DBMSs require significant configuration and often a separate server to respond to query requests. Setting these up can be challenging for newcomers.</p>
<p><a target="_blank" href="https://sqlite.org/">SQLite</a> is a simple DBMS that doesn’t require much setup. It’s a great tool to start with. It doesn’t need a standalone server and stores the entire database in a single file.</p>
<p>To make it easier to view and edit your databases, I recommend using <a target="_blank" href="https://sqlitebrowser.org/">DB Browser for SQLite</a>. It’s a free, open-source tool with a simple interface and all of SQLite’s functionality built in. You can open database files, browse tables, run queries, and edit data using an intuitive user interface. It’s especially useful when you’re learning and want to quickly see how your queries affect the data.</p>
<h3 id="heading-optional-web-based-alternative-to-db-browser"><strong>Optional: Web-Based Alternative to DB Browser</strong></h3>
<p>If you prefer not to install any software, you can use a web-based tool like <a target="_blank" href="https://inloop.github.io/sqlite-viewer/">SQLite Viewer</a> or <a target="_blank" href="https://sqliteonline.com/">SQLite Online</a>. These let you upload a <code>.sqlite</code> file, run queries, and explore a database from your browser.</p>
<ul>
<li><p><a target="_blank" href="https://inloop.github.io/sqlite-viewer/">SQLite Viewer</a>: A simple, read-only viewer. Good for inspecting tables and testing basic queries.</p>
</li>
<li><p><a target="_blank" href="https://sqliteonline.com/">SQLite Online</a>: A full-featured SQLite IDE. You can create databases, upload files, run queries, and even save your work.</p>
</li>
</ul>
<p>Both tools are great for quick experiments or checking your work without installing anything.</p>
<h3 id="heading-code-playbacks"><strong>Code Playbacks</strong></h3>
<p>This tutorial is not a traditional video or static text. Each section includes links to interactive <strong>code playbacks</strong> that animate how the code or query was built, step-by-step. You can pause and rewind to see each change as it happens.</p>
<p>Each playback includes a narrative, screenshots, whiteboard-style drawings, and self-grading multiple-choice questions to reinforce what you’ve learned.</p>
<p>If you haven’t seen a code playback before, don’t worry. They’re easy to use and allow you to see how queries evolve over time. Here’s a short video showing how to view a code playback:</p>
<div class="embed-wrapper">
        <iframe width="560" height="315" src="https://www.youtube.com/embed/uYbHqCNjVDM" style="aspect-ratio: 16 / 9; width: 100%; height: auto;" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen="" loading="lazy"></iframe></div>
<p> </p>
<h3 id="heading-playback-press"><strong>Playback Press</strong></h3>
<p><a target="_blank" href="https://playbackpress.com/books">Playback Press</a> is the platform where I publish my interactive code walkthroughs. Each book includes step-by-step animations, AI tutoring, and built-in quizzes.</p>
<p>I also created <a target="_blank" href="https://markm208.github.io/">Storyteller</a>, the free, open-source tool that powers these playbacks.</p>
<h3 id="heading-ai-tutor"><strong>AI Tutor</strong></h3>
<p>While you're viewing a code playback, you can ask an AI tutor questions about the queries. It gives clear, focused answers and doesn’t rush you. You can also ask it to create new self-grading multiple-choice questions to test your understanding.</p>
<p>To use the AI tutor and quizzes, create a free account on Playback Press and add one of the books to your bookshelf.</p>
<h2 id="heading-table-of-contents"><strong>Table of Contents</strong></h2>
<ul>
<li><p><a class="post-section-overview" href="#heading-part-1-a-whirlwind-tour-of-sql-1">Part 1: A Whirlwind Tour of SQL</a></p>
</li>
<li><p><a class="post-section-overview" href="#heading-part-2-a-beginners-reference-to-sql">Part 2: A Beginner’s Reference to SQL</a></p>
</li>
<li><p><a class="post-section-overview" href="#heading-part-3-practice-problems-paw-prints-and-university-databases">Part 3: Practice Problems — Paw Prints and University Databases</a></p>
</li>
<li><p><a class="post-section-overview" href="#heading-part-4-using-sqlite-in-programs-1">Part 4: Using SQLite in Programs</a></p>
</li>
<li><p><a class="post-section-overview" href="#heading-conclusion">Conclusion</a></p>
</li>
<li><p><a class="post-section-overview" href="#heading-comments-and-feedback">Comments and Feedback</a></p>
</li>
</ul>
<h2 id="heading-part-1-a-whirlwind-tour-of-sql-1"><strong>Part 1: A Whirlwind Tour of SQL</strong></h2>
<p>When someone is asked to manage some data, most people's first instinct is to use a spreadsheet. Spreadsheets are easy to use and flexible. But as your data grows more complex, they start to show some weaknesses.</p>
<p>One major issue is redundant data. When the same piece of information appears in multiple places, there's a risk that one copy might change while the others stay the same. This can lead to inconsistencies, errors, and confusing results.</p>
<p>Relational databases help solve this by organizing data in a structured way that reduces redundancy by design. Before building a database, it’s helpful to model the data using an Entity-Relationship (ER) diagram.</p>
<h3 id="heading-entity-relationship-diagrams"><strong>Entity-Relationship Diagrams</strong></h3>
<p>An ER diagram is a planning tool used to visualize the structure of a database. It helps you figure out what kinds of data you need to store and how those pieces of data relate to each other.</p>
<ul>
<li><p><strong>Entities</strong> are the main objects or concepts in your system, like <code>Person</code>, <code>Course</code>, or <code>Dog</code>. Entities have attributes that describe them. A <code>Person</code> might have <code>name</code>, <code>date of birth</code>, and <code>address</code> attributes, for example.</p>
</li>
<li><p><strong>Relationships</strong> describe how entities are connected. For example, a <code>Person</code> might <em>adopt</em> a <code>Dog</code>, or a <code>Student</code> might <em>enroll in</em> a <code>Course</code>.</p>
</li>
</ul>
<p>By laying this out in a diagram, you can clearly see what data is being stored and how the entities are related to each other. This makes it easier to design the tables in your database correctly.</p>
<p>Here is an example of an ER diagram used in this part of the tutorial:</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1744664220972/dc57e1fa-bad9-42b0-9158-0f2649c4f282.png" alt="An Entity-Relationship Diagram for the Paw Prints Database" class="image--center mx-auto" width="988" height="1188" loading="lazy"></p>
<h3 id="heading-schemas"><strong>Schemas</strong></h3>
<p>A <strong>schema</strong> is another way to describe the structure of a database. It shows the same information as the ER diagram, but in a more technical and precise format focused on how the data will actually be stored. Each element of a schema will become a table in a database.</p>
<p>Instead of lines connecting boxes, a schema uses primary keys and foreign keys:</p>
<ul>
<li><p>A <strong>primary key</strong> uniquely identifies each row in a table. Primary keys have a solid underline.</p>
</li>
<li><p>A <strong>foreign key</strong> refers to the primary key in another table, linking the two together. Foreign keys have a dashed underline.</p>
</li>
</ul>
<p>Here is an example of a schema used in this part of the tutorial:</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1744664247677/146dff90-e366-4ba2-b584-07d5ff42cca9.jpeg" alt="A Schema for the Paw Prints database" class="image--center mx-auto" width="1803" height="1753" loading="lazy"></p>
<p>While an ER diagram is more visual and conceptual, a schema is more concrete and closer to the actual implementation in the DBMS. You’ll see both used throughout this tutorial as I move from planning to writing SQL.</p>
<h3 id="heading-try-it-explore-a-relational-database-in-action"><strong>Try It: Explore a Relational Database in Action</strong></h3>
<p>To see how these concepts work in practice, take a look at the following three code playbacks. They walk through the design of a relational database for a fictional pet adoption center called <strong>Paw Prints</strong>. These examples will help you understand how entities, relationships, and schemas come together in a real database and how to write simple SQL queries to explore that data.</p>
<p>Start with the first playback and move through all three in order:</p>
<ol>
<li><h4 id="heading-database-design-and-simple-sqlhttpsplaybackpresscombookssqlbookchapter11-introduces-the-paw-prints-database-and-shows-how-to-write-basic-sql-queries"><a target="_blank" href="https://playbackpress.com/books/sqlbook/chapter/1/1"><strong>Database Design and Simple SQL</strong></a><strong>:</strong> Introduces the Paw Prints database and shows how to write basic SQL queries.</h4>
</li>
<li><h4 id="heading-one-to-many-relationships-and-more-sqlhttpsplaybackpresscombookssqlbookchapter12-covers-one-to-many-relationships-and-how-to-join-related-tables"><a target="_blank" href="https://playbackpress.com/books/sqlbook/chapter/1/2"><strong>One-to-Many Relationships and More SQL</strong></a><strong>:</strong> Covers one-to-many relationships and how to join related tables.</h4>
</li>
<li><h4 id="heading-many-to-many-relationships-and-even-more-sqlhttpsplaybackpresscombookssqlbookchapter13-shows-how-to-handle-many-to-many-relationships-using-join-tables-and-more-advanced-queries"><a target="_blank" href="https://playbackpress.com/books/sqlbook/chapter/1/3"><strong>Many-to-Many Relationships and Even More SQL</strong></a><strong>:</strong> Shows how to handle many-to-many relationships using join tables and more advanced queries.</h4>
</li>
</ol>
<p>As you watch, pause to make sure you understand how the data is structured and how each SQL query is written. You can always refer back to this section later if something in the next chapters isn’t clear.</p>
<h2 id="heading-part-2-a-beginners-reference-to-sql"><strong>Part 2: A Beginner’s Reference to SQL</strong></h2>
<p>This section takes a closer look at the core SQL commands introduced in the whirlwind tour. Each playback focuses on one topic and shows how to use it through step-by-step examples. I continue to use the Paw Prints database in these examples.</p>
<p>Think of this as a reference section. You don’t need to go through everything in order but you may want to go through them all at least once before beginning to practice in part 3. Come back here whenever you need a refresher on a particular SQL concept.</p>
<p>Here are the key concepts we’ll cover:</p>
<h4 id="heading-create-table-and-alter-tablehttpsplaybackpresscombookssqlbookchapter21"><a target="_blank" href="https://playbackpress.com/books/sqlbook/chapter/2/1"><strong>CREATE TABLE and ALTER TABLE</strong></a></h4>
<p>Learn how to define tables in a relational database. This playback shows how to create tables from scratch and how to change them later using <code>ALTER TABLE</code>.</p>
<h4 id="heading-inserthttpsplaybackpresscombookssqlbookchapter22"><a target="_blank" href="https://playbackpress.com/books/sqlbook/chapter/2/2"><strong>INSERT</strong></a></h4>
<p>See how to add new rows of data to a table. This example shows how to use the <code>INSERT</code> command and make sure your data matches the table structure.</p>
<h4 id="heading-selecthttpsplaybackpresscombookssqlbookchapter23"><a target="_blank" href="https://playbackpress.com/books/sqlbook/chapter/2/3"><strong>SELECT</strong></a></h4>
<p>This playback introduces the <code>SELECT</code> keyword in SQL. You’ll learn how to retrieve specific columns (or attributes) from a table and see what the result set looks like.</p>
<h4 id="heading-fromhttpsplaybackpresscombookssqlbookchapter24"><a target="_blank" href="https://playbackpress.com/books/sqlbook/chapter/2/4"><strong>FROM</strong></a></h4>
<p>Explore how the <code>FROM</code> clause specifies which tables your data comes from. This sets the stage for combining data from multiple sources using a Cartesian product. You’ll also see how to <code>JOIN</code> tables together.</p>
<h4 id="heading-wherehttpsplaybackpresscombookssqlbookchapter25"><a target="_blank" href="https://playbackpress.com/books/sqlbook/chapter/2/5"><strong>WHERE</strong></a></h4>
<p>Learn how to filter results using conditions. The <code>WHERE</code> clause helps narrow down the rows returned by a query. This playback also shows how to join tables by matching foreign keys to primary keys.</p>
<h4 id="heading-update-and-deletehttpsplaybackpresscombookssqlbookchapter26"><a target="_blank" href="https://playbackpress.com/books/sqlbook/chapter/2/6"><strong>UPDATE and DELETE</strong></a></h4>
<p>Learn how to change existing data in the database with <code>UPDATE</code> and remove data using <code>DELETE</code>. You’ll also see how to avoid accidental changes by using <code>WHERE</code> conditions carefully.</p>
<h4 id="heading-order-byhttpsplaybackpresscombookssqlbookchapter27"><a target="_blank" href="https://playbackpress.com/books/sqlbook/chapter/2/7"><strong>ORDER BY</strong></a></h4>
<p>Sort your results using <code>ORDER BY</code>. You’ll learn how to control the order of your output using one or more attributes.</p>
<h4 id="heading-aggregate-operators-group-by-and-havinghttpsplaybackpresscombookssqlbookchapter28"><a target="_blank" href="https://playbackpress.com/books/sqlbook/chapter/2/8"><strong>Aggregate Operators, GROUP BY, and HAVING</strong></a></h4>
<p>Group rows and calculate summary values using aggregate functions like <code>COUNT</code>, <code>AVG</code>, <code>MIN</code>, <code>MAX</code>, and <code>SUM</code>. This playback also shows how to use <code>GROUP BY</code> and <code>HAVING</code> to work with grouped results.</p>
<h4 id="heading-nested-queries-with-in-and-common-table-expressionshttpsplaybackpresscombookssqlbookchapter29"><a target="_blank" href="https://playbackpress.com/books/sqlbook/chapter/2/9"><strong>Nested Queries with IN and Common Table Expressions</strong></a></h4>
<p>Learn how to use nested queries – queries inside other queries – to build more flexible logic. This playback also shows how to write cleaner queries using Common Table Expressions (CTEs).</p>
<h4 id="heading-union-intersect-excepthttpsplaybackpresscombookssqlbookchapter210"><a target="_blank" href="https://playbackpress.com/books/sqlbook/chapter/2/10"><strong>UNION, INTERSECT, EXCEPT</strong></a></h4>
<p>See how to combine the results of multiple queries. This example shows how <code>UNION</code>, <code>INTERSECT</code>, and <code>EXCEPT</code> help you work with data from different queries as if it were one set.</p>
<h4 id="heading-transactionshttpsplaybackpresscombookssqlbookchapter211"><a target="_blank" href="https://playbackpress.com/books/sqlbook/chapter/2/11"><strong>Transactions</strong></a></h4>
<p>Learn how to group multiple SQL commands into a single <strong>transaction</strong>, so they all succeed or fail together. Transactions help protect your data from partial updates.</p>
<h4 id="heading-create-indexhttpsplaybackpresscombookssqlbookchapter212"><a target="_blank" href="https://playbackpress.com/books/sqlbook/chapter/2/12"><strong>CREATE INDEX</strong></a></h4>
<p>Improve query performance using indexes. This playback shows how to create an index on one or more columns and explains why that makes certain queries run faster.</p>
<h2 id="heading-part-3-practice-problems-paw-prints-and-university-databases"><strong>Part 3: Practice Problems — Paw Prints and University Databases</strong></h2>
<p>Now it’s time to apply what you’ve learned.</p>
<p>Below are six practice problems that use the Paw Prints database from earlier examples. If you haven't recreated it yourself, here is a link to the SQLite file <a target="_blank" href="https://markm208.github.io/sqlbook/dogsFinal.sqlite">dogsFinal.sqlite.</a> Each one asks a specific question that requires you to write a SQL query to find the answer. Try solving each one on your own before watching the solution.</p>
<p>Don’t worry if you don’t get it right on the first try. Writing SQL often involves trial and error, even for experienced developers. The goal is to think through the problem and make progress, not to be perfect. Start small and build your queries up through an iterative process.</p>
<p>Click each link to view the playback after you've made your attempt:</p>
<ol>
<li><h4 id="heading-which-dogs-have-had-the-most-visitshttpsplaybackpresscombookssqlbookchapter31"><a target="_blank" href="https://playbackpress.com/books/sqlbook/chapter/3/1"><strong>Which Dogs Have Had the Most Visits?</strong></a></h4>
</li>
</ol>
<p>Figure out how to count visits for each dog and sort them to find the most frequently visited ones.</p>
<ol start="2">
<li><h4 id="heading-number-of-adoptions-and-average-agehttpsplaybackpresscombookssqlbookchapter32"><a target="_blank" href="https://playbackpress.com/books/sqlbook/chapter/3/2"><strong>Number of Adoptions and Average Age</strong></a></h4>
</li>
</ol>
<p>Find the total number of adoptions and the average age of adopted dogs. You'll need to filter the data appropriately.</p>
<ol start="3">
<li><h4 id="heading-locations-with-leastmost-aggressive-dogshttpsplaybackpresscombookssqlbookchapter33"><a target="_blank" href="https://playbackpress.com/books/sqlbook/chapter/3/3"><strong>Locations with Least/Most Aggressive Dogs</strong></a></h4>
</li>
</ol>
<p>Use grouping to compare aggression levels across locations and determine where the most and fewest aggressive dogs are housed.</p>
<ol start="4">
<li><h4 id="heading-average-time-to-adoption-by-locationhttpsplaybackpresscombookssqlbookchapter34"><a target="_blank" href="https://playbackpress.com/books/sqlbook/chapter/3/4"><strong>Average Time to Adoption By Location</strong></a></h4>
</li>
</ol>
<p>Calculate the average time it takes for dogs to be adopted, broken down by location.</p>
<ol start="5">
<li><h4 id="heading-finding-available-capacity-at-each-locationhttpsplaybackpresscombookssqlbookchapter35"><a target="_blank" href="https://playbackpress.com/books/sqlbook/chapter/3/5"><strong>Finding Available Capacity at Each Location</strong></a></h4>
</li>
</ol>
<p>Determine how much space is left at each shelter location by comparing total capacity to current occupancy.</p>
<ol start="6">
<li><h4 id="heading-who-visited-then-adopted-an-aggressive-doghttpsplaybackpresscombookssqlbookchapter36"><a target="_blank" href="https://playbackpress.com/books/sqlbook/chapter/3/6"><strong>Who Visited then Adopted an Aggressive Dog</strong></a></h4>
</li>
</ol>
<p>This complex query asks you to track user actions over time, first visiting, then adopting an aggressive dog. A good challenge!</p>
<h3 id="heading-university-database"><strong>University Database</strong></h3>
<p>Next, you’ll work with a more complex database that models a university’s course and grading system. You’ll use it to analyze real-world relationships between students, professors, courses, and departments.</p>
<p>Download the SQLite version of the database here:<br><a target="_blank" href="https://markm208.github.io/workedsqlbook/studentGrades.sqlite">studentGrades.sqlite</a></p>
<p>Here are the <strong>entities</strong> in the database:</p>
<ul>
<li><p><code>Students</code></p>
</li>
<li><p><code>Sections</code></p>
</li>
<li><p><code>Courses</code></p>
</li>
<li><p><code>Professors</code></p>
</li>
<li><p><code>Departments</code></p>
</li>
</ul>
<p>And here are the <strong>relationships</strong> between them:</p>
<ul>
<li><p>Each student takes zero or more sections. (Every student receives a grade.)</p>
</li>
<li><p>Each section has zero or more students taking it.</p>
</li>
<li><p>Each section is an instance of a course.</p>
</li>
<li><p>Each course has zero or more sections.</p>
</li>
<li><p>Each section is taught by a single professor.</p>
</li>
<li><p>Each professor teaches zero or more sections.</p>
</li>
<li><p>Each professor belongs to zero or more departments.</p>
</li>
<li><p>Each department has zero or more professors.</p>
</li>
<li><p>Each department has, at most, one professor who is its chairperson.</p>
</li>
<li><p>Each professor may chair, at most, one department.</p>
</li>
<li><p>Each course is offered by a department.</p>
</li>
<li><p>Each department offers zero or more courses.</p>
</li>
</ul>
<p>The code playbacks highlight how I use <strong>ER diagrams</strong> and <strong>schemas</strong> to help me build my queries. You can preview them here:</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1744665047915/c0c0c31a-8463-4d01-a15c-930d6e24b574.jpeg" alt="An Entity-Relationship Diagram for the University database" class="image--center mx-auto" width="1350" height="1781" loading="lazy"></p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1744665070077/fd9c60be-0140-4281-ba8c-a3216001a043.jpeg" alt="A Schema for the University database" class="image--center mx-auto" width="1328" height="1677" loading="lazy"></p>
<p>Try each query on your own before watching the solution.</p>
<ol start="7">
<li><h4 id="heading-list-every-course-name-section-number-and-professor-name-in-chronological-order-for-every-section-that-has-ever-been-offeredhttpsplaybackpresscombooksworkedsqlbookchapter11"><a target="_blank" href="https://playbackpress.com/books/workedsqlbook/chapter/1/1"><strong>List every course name, section number, and professor name in chronological order for every section that has ever been offered</strong></a></h4>
</li>
<li><h4 id="heading-list-every-course-name-and-section-number-for-every-course-offered-by-the-computer-science-departmenthttpsplaybackpresscombooksworkedsqlbookchapter12"><a target="_blank" href="https://playbackpress.com/books/workedsqlbook/chapter/1/2"><strong>List every course name and section number for every course offered by the computer science department</strong></a></h4>
</li>
<li><h4 id="heading-find-the-name-of-every-professor-who-has-ever-taught-csci111httpsplaybackpresscombooksworkedsqlbookchapter13"><a target="_blank" href="https://playbackpress.com/books/workedsqlbook/chapter/1/3"><strong>Find the name of every professor who has ever taught CSCI111</strong></a></h4>
</li>
<li><h4 id="heading-list-all-of-the-professor-names-and-their-departmentshttpsplaybackpresscombooksworkedsqlbookchapter14"><a target="_blank" href="https://playbackpress.com/books/workedsqlbook/chapter/1/4"><strong>List all of the professor names and their departments</strong></a></h4>
</li>
<li><h4 id="heading-list-the-names-of-the-professors-who-have-taught-both-csci111-and-csci112httpsplaybackpresscombooksworkedsqlbookchapter15"><a target="_blank" href="https://playbackpress.com/books/workedsqlbook/chapter/1/5"><strong>List the names of the professors who have taught both CSCI111 and CSCI112</strong></a></h4>
</li>
<li><h4 id="heading-list-the-names-of-all-of-the-students-of-professor-mark-mahoney-who-are-greater-than-or-equal-to-21-years-oldhttpsplaybackpresscombooksworkedsqlbookchapter21"><a target="_blank" href="https://playbackpress.com/books/workedsqlbook/chapter/2/1"><strong>List the names of all of the students of professor Mark Mahoney who are greater than or equal to 21 years old</strong></a></h4>
</li>
<li><h4 id="heading-list-the-names-of-all-of-the-students-who-are-taught-by-a-department-chairhttpsplaybackpresscombooksworkedsqlbookchapter22"><a target="_blank" href="https://playbackpress.com/books/workedsqlbook/chapter/2/2"><strong>List the names of all of the students who are taught by a department chair</strong></a></h4>
</li>
<li><h4 id="heading-list-all-of-the-course-names-and-section-numbers-of-every-course-ever-taught-by-a-department-chairhttpsplaybackpresscombooksworkedsqlbookchapter23"><a target="_blank" href="https://playbackpress.com/books/workedsqlbook/chapter/2/3"><strong>List all of the course names and section numbers of every course ever taught by a department chair</strong></a></h4>
</li>
<li><h4 id="heading-list-all-of-the-courses-with-the-oldest-studenthttpsplaybackpresscombooksworkedsqlbookchapter24"><a target="_blank" href="https://playbackpress.com/books/workedsqlbook/chapter/2/4"><strong>List all of the courses with the oldest student</strong></a></h4>
</li>
<li><h4 id="heading-list-all-of-the-courses-and-section-numbers-with-the-youngest-average-student-agehttpsplaybackpresscombooksworkedsqlbookchapter25"><a target="_blank" href="https://playbackpress.com/books/workedsqlbook/chapter/2/5"><strong>List all of the courses and section numbers with the youngest average student age</strong></a></h4>
</li>
<li><h4 id="heading-list-all-of-the-course-names-and-section-numbers-of-courses-with-less-than-four-creditshttpsplaybackpresscombooksworkedsqlbookchapter31"><a target="_blank" href="https://playbackpress.com/books/workedsqlbook/chapter/3/1"><strong>List all of the course names and section numbers of courses with less than four credits</strong></a></h4>
</li>
<li><h4 id="heading-list-all-of-the-course-names-and-section-numbers-with-the-smallest-enrollmenthttpsplaybackpresscombooksworkedsqlbookchapter32"><a target="_blank" href="https://playbackpress.com/books/workedsqlbook/chapter/3/2"><strong>List all of the course names and section numbers with the smallest enrollment</strong></a></h4>
</li>
<li><h4 id="heading-list-all-of-the-student-names-who-have-taken-more-than-one-course-with-mark-mahoneyhttpsplaybackpresscombooksworkedsqlbookchapter33"><a target="_blank" href="https://playbackpress.com/books/workedsqlbook/chapter/3/3"><strong>List all of the student names who have taken more than one course with Mark Mahoney</strong></a></h4>
</li>
<li><h4 id="heading-list-all-of-the-student-names-who-have-taken-a-course-with-both-mark-mahoney-and-eric-whendonhttpsplaybackpresscombooksworkedsqlbookchapter34"><a target="_blank" href="https://playbackpress.com/books/workedsqlbook/chapter/3/4"><strong>List all of the student names who have taken a course with both Mark Mahoney and Eric Whendon</strong></a></h4>
</li>
<li><h4 id="heading-list-all-the-course-names-and-section-numbers-that-had-two-or-more-students-earn-ashttpsplaybackpresscombooksworkedsqlbookchapter35"><a target="_blank" href="https://playbackpress.com/books/workedsqlbook/chapter/3/5"><strong>List all the course names and section numbers that had two or more students earn A's</strong></a></h4>
</li>
<li><h4 id="heading-find-the-names-of-all-the-students-who-have-taken-csci111httpsplaybackpresscombooksworkedsqlbookchapter41"><a target="_blank" href="https://playbackpress.com/books/workedsqlbook/chapter/4/1"><strong>Find the names of all the students who have taken CSCI111</strong></a></h4>
</li>
<li><h4 id="heading-find-the-names-of-all-professors-in-the-computer-science-department-who-are-not-chairs-of-a-departmenthttpsplaybackpresscombooksworkedsqlbookchapter42"><a target="_blank" href="https://playbackpress.com/books/workedsqlbook/chapter/4/2"><strong>Find the names of all professors in the computer science department who are not chairs of a department</strong></a></h4>
</li>
<li><h4 id="heading-find-the-names-of-all-professors-who-are-the-chair-of-a-departmenthttpsplaybackpresscombooksworkedsqlbookchapter43"><a target="_blank" href="https://playbackpress.com/books/workedsqlbook/chapter/4/3"><strong>Find the names of all professors who are the chair of a department</strong></a></h4>
</li>
<li><h4 id="heading-find-the-ssn-first-and-last-name-course-name-and-grade-earned-for-all-courses-taken-in-spring-2007httpsplaybackpresscombooksworkedsqlbookchapter44"><a target="_blank" href="https://playbackpress.com/books/workedsqlbook/chapter/4/4"><strong>Find the ssn, first and last name, course name, and grade earned for all courses taken in spring 2007</strong></a></h4>
</li>
<li><h4 id="heading-find-the-course-name-and-section-number-of-all-the-courses-that-have-ever-been-offered-in-the-fallhttpsplaybackpresscombooksworkedsqlbookchapter45"><a target="_blank" href="https://playbackpress.com/books/workedsqlbook/chapter/4/5"><strong>Find the course name and section number of all the courses that have ever been offered in the fall</strong></a></h4>
</li>
<li><h4 id="heading-find-the-names-of-all-of-the-professors-teaching-in-spring-2007httpsplaybackpresscombooksworkedsqlbookchapter51"><a target="_blank" href="https://playbackpress.com/books/workedsqlbook/chapter/5/1"><strong>Find the names of all of the professors teaching in spring 2007</strong></a></h4>
</li>
<li><h4 id="heading-find-the-names-of-all-of-the-students-who-have-received-an-a-and-a-b-in-any-coursehttpsplaybackpresscombooksworkedsqlbookchapter52"><a target="_blank" href="https://playbackpress.com/books/workedsqlbook/chapter/5/2"><strong>Find the names of all of the students who have received an A and a B in any course</strong></a></h4>
</li>
<li><h4 id="heading-find-out-how-many-students-have-ever-taken-csci111httpsplaybackpresscombooksworkedsqlbookchapter53"><a target="_blank" href="https://playbackpress.com/books/workedsqlbook/chapter/5/3"><strong>Find out how many students have ever taken CSCI111</strong></a></h4>
</li>
<li><h4 id="heading-find-the-average-age-of-all-students-who-ever-had-a-course-with-mark-mahoneyhttpsplaybackpresscombooksworkedsqlbookchapter54"><a target="_blank" href="https://playbackpress.com/books/workedsqlbook/chapter/5/4"><strong>Find the average age of all students who ever had a course with Mark Mahoney</strong></a></h4>
</li>
<li><h4 id="heading-find-the-names-of-all-of-the-professors-who-have-never-taught-a-coursehttpsplaybackpresscombooksworkedsqlbookchapter55"><a target="_blank" href="https://playbackpress.com/books/workedsqlbook/chapter/5/5"><strong>Find the names of all of the professors who have never taught a course</strong></a></h4>
</li>
<li><h4 id="heading-find-the-names-of-all-of-the-professors-who-have-taught-may-joneshttpsplaybackpresscombooksworkedsqlbookchapter61"><a target="_blank" href="https://playbackpress.com/books/workedsqlbook/chapter/6/1"><strong>Find the names of all of the professors who have taught May Jones</strong></a></h4>
</li>
<li><h4 id="heading-find-the-names-of-the-students-who-have-had-a-course-in-fall-2006-or-spring-2007httpsplaybackpresscombooksworkedsqlbookchapter62"><a target="_blank" href="https://playbackpress.com/books/workedsqlbook/chapter/6/2"><strong>Find the names of the students who have had a course in Fall 2006 or Spring 2007</strong></a></h4>
</li>
<li><h4 id="heading-find-the-names-of-the-students-who-have-taken-a-course-from-a-professor-who-has-more-than-one-appointment-to-a-departmenthttpsplaybackpresscombooksworkedsqlbookchapter63"><a target="_blank" href="https://playbackpress.com/books/workedsqlbook/chapter/6/3"><strong>Find the names of the students who have taken a course from a professor who has more than one appointment to a department</strong></a></h4>
</li>
<li><h4 id="heading-find-the-average-age-of-students-who-took-courses-in-spring-2007httpsplaybackpresscombooksworkedsqlbookchapter64"><a target="_blank" href="https://playbackpress.com/books/workedsqlbook/chapter/6/4"><strong>Find the average age of students who took courses in Spring 2007</strong></a></h4>
</li>
<li><h4 id="heading-find-the-sum-of-all-of-the-credit-hours-offered-by-the-computer-science-department-in-2007httpsplaybackpresscombooksworkedsqlbookchapter65"><a target="_blank" href="https://playbackpress.com/books/workedsqlbook/chapter/6/5"><strong>Find the sum of all of the credit hours offered by the computer science department in 2007</strong></a></h4>
</li>
</ol>
<h2 id="heading-part-4-using-sqlite-in-programs-1"><strong>Part 4: Using SQLite in Programs</strong></h2>
<p>So far, you’ve learned how to write SQL queries and design relational databases. In this optional section, you’ll see how to use SQLite in actual code. Each playback walks through a working program that reads from and writes to a SQLite database.</p>
<h3 id="heading-why-use-sqlite-in-programs"><strong>Why Use SQLite in Programs?</strong></h3>
<p>SQLite’s simplicity makes it a great choice for quick projects, prototypes, and small applications. You don’t need to run a server, and everything is stored in a single file.</p>
<p>These playbacks show how to embed SQL directly into your code, so your programs can store and retrieve data as part of their normal workflow. I really love using it in my projects!</p>
<p>Here’s an overview of the playbacks:</p>
<h3 id="heading-cc"><strong>C/C++</strong></h3>
<ol>
<li><h4 id="heading-the-c-sqlite-apihttpsplaybackpresscombookssqlitebookchapter21"><a target="_blank" href="https://playbackpress.com/books/sqlitebook/chapter/2/1"><strong>The C++ SQLite API</strong></a></h4>
</li>
</ol>
<p>Shows how to set up and use the SQLite C++ API. You’ll open a database, run basic queries, and handle results.</p>
<ol start="2">
<li><h4 id="heading-an-object-oriented-auction-programhttpsplaybackpresscombookssqlitebookchapter22"><a target="_blank" href="https://playbackpress.com/books/sqlitebook/chapter/2/2"><strong>An Object-Oriented Auction Program</strong></a></h4>
</li>
</ol>
<p>Builds a more complex C++ program that tracks bids, items, and users. This example shows how to structure a real-world application with SQLite.</p>
<ol start="3">
<li><h4 id="heading-sqlite-transactionshttpsplaybackpresscombookssqlitebookchapter23"><a target="_blank" href="https://playbackpress.com/books/sqlitebook/chapter/2/3"><strong>SQLite Transactions</strong></a></h4>
</li>
</ol>
<p>Explains how to group multiple database operations into a single transaction. This protects your data from partial updates.</p>
<h3 id="heading-python-and-flask"><strong>Python and Flask</strong></h3>
<ol>
<li><h4 id="heading-querying-a-sqlite-databasehttpsplaybackpresscombookssqlitebookchapter31"><a target="_blank" href="https://playbackpress.com/books/sqlitebook/chapter/3/1"><strong>Querying a SQLite Database</strong></a></h4>
</li>
</ol>
<p>Connects a Python script to a SQLite database, runs queries, and processes the results using Python’s built-in libraries.</p>
<ol start="2">
<li><h4 id="heading-creating-sqlite-databaseshttpsplaybackpresscombookssqlitebookchapter32"><a target="_blank" href="https://playbackpress.com/books/sqlitebook/chapter/3/2"><strong>Creating SQLite Databases</strong></a></h4>
</li>
</ol>
<p>Shows how to create new SQLite databases directly from Python, defining tables and inserting initial data.</p>
<ol start="3">
<li><h4 id="heading-flask-basicshttpsplaybackpresscombookssqlitebookchapter33"><a target="_blank" href="https://playbackpress.com/books/sqlitebook/chapter/3/3"><strong>Flask Basics</strong></a></h4>
</li>
</ol>
<p>Introduces Flask. You’ll see how to build a simple web application that can serve pages and connect to your SQLite database.</p>
<ol start="4">
<li><h4 id="heading-creating-an-apihttpsplaybackpresscombookssqlitebookchapter34"><a target="_blank" href="https://playbackpress.com/books/sqlitebook/chapter/3/4"><strong>Creating an API</strong></a></h4>
</li>
</ol>
<p>Takes Flask further by creating a RESTful API that interacts with a SQLite database, letting you perform CRUD operations on a SQLite database.</p>
<h3 id="heading-java"><strong>Java</strong></h3>
<ol>
<li><h4 id="heading-using-a-sqlite-database-in-a-java-programhttpsplaybackpresscombookssqlitebookchapter41"><a target="_blank" href="https://playbackpress.com/books/sqlitebook/chapter/4/1"><strong>Using a SQLite Database in a Java Program</strong></a></h4>
</li>
</ol>
<p>Shows how to integrate the SQLite driver into a Java application. You’ll learn how to open a connection, run queries, and handle exceptions properly.</p>
<h2 id="heading-conclusion"><strong>Conclusion</strong></h2>
<p>By now, you’ve learned how to read and write real SQL. You’ve seen how to design a database, how to write queries that retrieve and modify data, and how to tackle increasingly complex questions using the tools SQL gives you.</p>
<p>If you worked through the practice problems you’ve already done what many developers do on the job: examine unfamiliar data, figure out the relationships, and write queries to answer real questions.</p>
<p>SQL is a skill that gets sharper the more you use it. Don’t worry if you still feel a little unsure. Repetition and exploration will build your confidence. Keep experimenting, break things, and try to fix them. That’s how you really learn.</p>
<p>If you’re planning to use SQL in your own projects, try building a small database from scratch or connecting SQLite to one of your programs. You’ll learn a lot by seeing what questions your own data brings up.</p>
<p>Thanks for reading. I hope these playbacks helped make SQL a little easier to understand. Good luck with your next SQL project.</p>
<h2 id="heading-comments-and-feedback"><strong>Comments and Feedback</strong></h2>
<p>You can find all of these code playbacks and more in one of my free books:</p>
<ul>
<li><p><a target="_blank" href="https://playbackpress.com/books/sqlbook">Database Design and SQL for Beginners</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/workedsqlbook">Worked SQL Examples</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/sqlitebook">Programming with SQLite</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/cppbook/">An Animated Introduction to Programming in C++</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/pybook">An Animated Introduction to Programming with Python</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/webdevbook">An Introduction to Web Development from Back to Front</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/cljbook">An Animated Introduction to Clojure</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/exbook">An Animated Introduction to Elixir</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/rubybook">A Brief Introduction to Ruby</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/flutterbook">Mobile App Development with Dart and Flutter</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/patternsbook">OO Design Patterns with Java</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/wordzearchbook">How I Built It: Word Zearch</a></p>
</li>
</ul>
<p>Comments and feedback are welcome anytime: <a target="_blank" href="mailto:mark@playbackpress.com">mark@playbackpress.com</a>.</p>
<p>If you'd like to support my work and help keep Playback Press free for all, consider donating using <a target="_blank" href="https://github.com/sponsors/markm208">GitHub Sponsors</a>. I use all of the donations for hosting costs. Your support helps me continue creating educational content like this. Thank you!</p>
 ]]>
                </content:encoded>
            </item>
        
            <item>
                <title>
                    <![CDATA[ An Animated Introduction to Clojure – Learn Clojure Programming Basics ]]>
                </title>
                <description>
                    <![CDATA[ This tutorial introduces the programming language, Clojure. Clojure is an awesome functional programming language that runs on Java's Virtual Machine (JVM). It is sometimes called a LISP, which is short for 'LISt Processing'. You'll need to have some... ]]>
                </description>
                <link>https://www.freecodecamp.org/news/learn-clojure-programming-basics/</link>
                <guid isPermaLink="false">67f7044b8d28cad83fb095a2</guid>
                
                    <category>
                        <![CDATA[ Clojure ]]>
                    </category>
                
                    <category>
                        <![CDATA[ Functional Programming ]]>
                    </category>
                
                    <category>
                        <![CDATA[ jvm ]]>
                    </category>
                
                <dc:creator>
                    <![CDATA[ Mark Mahoney ]]>
                </dc:creator>
                <pubDate>Wed, 09 Apr 2025 23:35:39 +0000</pubDate>
                <media:content url="https://cdn.hashnode.com/res/hashnode/image/upload/v1744240649396/3e68ef22-3109-4b43-841e-e947f1821a76.png" medium="image" />
                <content:encoded>
                    <![CDATA[ <p>This tutorial introduces the programming language, Clojure. <a target="_blank" href="https://clojure.org/">Clojure</a> is an awesome functional programming language that runs on Java's Virtual Machine (JVM). It is sometimes called a LISP, which is short for '<strong>LIS</strong>t <strong>P</strong>rocessing'.</p>
<p>You'll need to have some previous programming experience in another language to get the most out of this tutorial. Clojure is so different from most imperative programming languages that it doesn't really matter where you are coming from as long as you know the basics (variables, if statements, loops, and functions).</p>
<p>If you are looking for a complete beginner's guide to programming, you can find some of my other programming content below.</p>
<p>Here, I will cover functions, data structures, immutability, closures, tail recursion, lazy sequences, macros, and concurrency.</p>
<p>Clojure is a functional programming language. In it, the function is king and data is immutable. This may be a different paradigm than you are used to, but there are some compelling reasons to use it. Clojure's immutability is particularly good for programs that need to take advantage of modern hardware on laptops and mobile phones (multiple processors sharing a single memory).</p>
<p>Clojure runs on the <a target="_blank" href="https://en.wikipedia.org/wiki/Java_virtual_machine">JVM</a>. It can be difficult to set up Clojure because it involves installing Java, Leiningen, and sometimes an editor plugin. To make things easier, I recommend starting with a web-based IDE. There is no easier way to start programming in Clojure than using <a target="_blank" href="https://replit.com/">replit</a>. I recommend using it to write your first programs in Clojure. If you feel up to it, check out <a target="_blank" href="https://clojure.org/guides/install_clojure">these docs</a> to get started on your own machine.</p>
<p>Even if you don't use Clojure every day, learning it will change how you think about programming. It will help you understand recursion, higher-order functions, and data transformations in a new way. These ideas transfer well to other languages like JavaScript, Python, or Rust. In short, learning Clojure will make you a better programmer.</p>
<h3 id="heading-code-playbacks"><strong>Code Playbacks</strong></h3>
<p>This material will not be delivered like traditional online tutorials or video series. Each section includes links to interactive <strong>code playbacks</strong> that visually animate changes made to a program in a step-by-step manner, helping you understand how it was written.</p>
<p>A code playback shows how a program evolves by replaying all the steps in its development. It has an author-supplied narrative, screenshots, whiteboard-style drawings, and self-grading multiple choice questions to make the learning process more dynamic and interactive.</p>
<p>Here's a short YouTube video explaining how to view a code playback:</p>
<div class="embed-wrapper">
        <iframe width="560" height="315" src="https://www.youtube.com/embed/uYbHqCNjVDM" style="aspect-ratio: 16 / 9; width: 100%; height: auto;" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen="" loading="lazy"></iframe></div>
<p> </p>
<h3 id="heading-playback-press"><strong>Playback Press</strong></h3>
<p><a target="_blank" href="https://playbackpress.com/books">Playback Press</a> is a platform for sharing interactive code walkthroughs that I created. I’m Mark, by the way, a professor of computer science. These books provide interactive programming lessons through step-by-step animations, AI tutoring, and quizzes.</p>
<p>If you want to see the full Clojure 'book', you can go here:</p>
<blockquote>
<p><a target="_blank" href="https://playbackpress.com/books/cljbook">An Animated Introduction to Clojure</a>, by Mark Mahoney</p>
</blockquote>
<p>I also built <a target="_blank" href="https://markm208.github.io/">Storyteller</a>, the free and open-source tool that powers code playbacks.</p>
<h3 id="heading-ai-tutor"><strong>AI Tutor</strong></h3>
<p>When viewing a code playback, you can ask an AI tutor about the code. It answers questions clearly and patiently, making it a helpful resource for learners. You can also ask the AI tutor to generate new self-grading multiple-choice questions to test your knowledge of what you are learning.</p>
<p>To access the AI tutor and self-grading quizzes, simply create a free account on Playback Press and add the <a target="_blank" href="https://playbackpress.com/books/cljbook">book</a> to your bookshelf.</p>
<h3 id="heading-table-of-contents"><strong>Table of Contents</strong></h3>
<ul>
<li><p><a class="post-section-overview" href="#heading-introduction-to-clojure">Introduction to Clojure</a></p>
</li>
<li><p><a class="post-section-overview" href="#heading-functions">Functions</a></p>
</li>
<li><p><a class="post-section-overview" href="#heading-closures">Closures</a></p>
</li>
<li><p><a class="post-section-overview" href="#heading-recursion">Recursion</a></p>
</li>
<li><p><a class="post-section-overview" href="#heading-lazy-sequences">Lazy Sequences</a></p>
</li>
<li><p><a class="post-section-overview" href="#heading-macros">Macros</a></p>
</li>
<li><p><a class="post-section-overview" href="#heading-concurrency">Concurrency</a></p>
</li>
</ul>
<h2 id="heading-introduction-to-clojure"><strong>Introduction to Clojure</strong></h2>
<p>These first few programs show how to print to the screen, perform basic arithmetic, and store some data. Go through each of these now:</p>
<ul>
<li><p><a target="_blank" href="https://playbackpress.com/books/cljbook/chapter/1/1">Hello World!!!</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/cljbook/chapter/1/2">Readers/evaluators and simple arithmetic</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/cljbook/chapter/1/3">Dog age converter</a></p>
</li>
</ul>
<p>This program shows how to use the Java capability that it built into to the JVM.</p>
<ul>
<li><a target="_blank" href="https://playbackpress.com/books/cljbook/chapter/1/4">Java interoperability</a></li>
</ul>
<p>These programs show some basic data structures in Clojure and how they are immutable.</p>
<ul>
<li><p><a target="_blank" href="https://playbackpress.com/books/cljbook/chapter/1/5">Clojure data structures</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/cljbook/chapter/1/6">Efficient immutability (more with data structures)</a></p>
</li>
</ul>
<h3 id="heading-hands-on-practice"><strong>Hands-On Practice</strong></h3>
<p><strong>Problem 1</strong></p>
<p>Write a Clojure program that prompts the user for the length and width of a wooden board in inches. Then display the number of whole square feet that are in the board. For example, if the height is 27 inches and the width is 34 inches, then the number of square feet is 6.375.</p>
<p><strong>Problem 2</strong></p>
<p>Write a program that creates an empty list and use <code>def</code> to store a reference to it called <code>empty-list</code>. Use <code>cons</code> to add your name to it and store it in a new list called <code>my-name</code>.</p>
<p>Use <code>conj</code> to add all of your siblings to a list called <code>me-and-my-siblings</code> (if you don't have any or don't have that many you can use some of the <a target="_blank" href="https://en.wikipedia.org/wiki/Kardashian_family#Members_of_the_Kardashian-Jenner_Family">Kardashians</a>).</p>
<p>Print all the names in <code>me-and-my-siblings</code>. Then print the third name on the list <code>me-and-my-siblings</code>.</p>
<p>Create a map with all of your siblings' names as keys and their birth years as values. Use <code>assoc</code> to add your name and birth year to the map. Use the map to print everyone's name and their age in the year 2050.</p>
<p><strong>Problem 3</strong></p>
<p>Create a map with the number of days in each of the months called <code>days-in-months</code>. Use Clojure keywords like <code>:jan</code> and <code>:feb</code> as the keys and the number of days in the months as the values.</p>
<p>Create a second map from the first that has 29 days for February. Call this one <code>days-in-months-leapyear</code>. Make sure to do this efficiently, use <code>assoc</code> to create a new value for February. Finally, print each of the maps.</p>
<h2 id="heading-functions"><strong>Functions</strong></h2>
<p>Next, I'll discuss creating and calling functions in Clojure. Clojure is a functional programming language so this is a pretty important topic.</p>
<p>The first two programs show how to write functions in Clojure.</p>
<ul>
<li><p><a target="_blank" href="https://playbackpress.com/books/cljbook/chapter/2/1">Functions in Clojure</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/cljbook/chapter/2/2">Fizz Buzz</a></p>
</li>
</ul>
<p>This program shows how to use a map to encapsulate data along with some functions that manipulate the data.</p>
<ul>
<li><a target="_blank" href="https://playbackpress.com/books/cljbook/chapter/2/3">Maps as objects</a></li>
</ul>
<p>These programs show how to read and write to a file using functions.</p>
<ul>
<li><p><a target="_blank" href="https://playbackpress.com/books/cljbook/chapter/2/4">Reading from a file (with CS poetry)</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/cljbook/chapter/2/5">Writing to a file</a></p>
</li>
</ul>
<h3 id="heading-hands-on-practice-1"><strong>Hands-On Practice</strong></h3>
<p><strong>Problem 1</strong></p>
<p>Write three mathematical functions:</p>
<ul>
<li><p><code>square</code> squares a passed in parameter</p>
</li>
<li><p><code>cube</code> cubes a passed in parameter</p>
</li>
<li><p><code>pow</code> raises a base number to an exponent</p>
</li>
</ul>
<p>For this group of functions, do not use any built-in mathematical functions.</p>
<p>Hint: look at the Clojure function <code>repeat</code> and <code>reduce</code> for the <code>pow</code> function. Use the <code>let</code> function to hold temporary values so that they can be referred to later.</p>
<p><strong>Problem 2</strong></p>
<p>Write a function that takes a number and will calculate the factorial value for that number.</p>
<pre><code class="lang-cpp"><span class="hljs-number">5</span>! is <span class="hljs-number">5</span> * <span class="hljs-number">4</span> * <span class="hljs-number">3</span> * <span class="hljs-number">2</span> * <span class="hljs-number">1</span> = <span class="hljs-number">120</span>

<span class="hljs-number">10</span>! is <span class="hljs-number">10</span> * <span class="hljs-number">9</span> * <span class="hljs-number">8</span> * <span class="hljs-number">7</span> * <span class="hljs-number">6</span> * <span class="hljs-number">5</span> * <span class="hljs-number">4</span> * <span class="hljs-number">3</span> * <span class="hljs-number">2</span> * <span class="hljs-number">1</span> = <span class="hljs-number">3</span>,<span class="hljs-number">628</span>,<span class="hljs-number">800</span>
</code></pre>
<p>Hint: this type of problem is typically done with recursion. But for now, try to do it without recursion. Look at the Clojure <code>range</code> and <code>reduce</code> functions.</p>
<p><strong>Problem 3</strong></p>
<p>Write a function that determines whether a number is prime or not. Use the <code>range</code> and <code>filter</code> functions to filter out non-primes in a range of values.</p>
<p>Hint: look at the <code>not-any?</code> and <code>mod</code> functions for determining whether a number is prime or not.</p>
<p><strong>Problem 4</strong></p>
<p>Write a function that takes one or more string parameters, converts them to numbers, and then adds them together and returns the sum.</p>
<pre><code class="lang-cpp">(println (add-strings <span class="hljs-string">"10"</span>)) ;prints <span class="hljs-number">10</span>

(println (add-strings <span class="hljs-string">"10"</span> <span class="hljs-string">"20"</span>)) ;prints <span class="hljs-number">30</span>

(println (add-strings <span class="hljs-string">"10"</span> <span class="hljs-string">"20"</span> <span class="hljs-string">"30"</span>)) ;prints <span class="hljs-number">60</span>

(println (add-strings <span class="hljs-string">"10"</span> <span class="hljs-string">"20"</span> <span class="hljs-string">"30"</span> <span class="hljs-string">"40"</span>)) ;prints <span class="hljs-number">100</span>
</code></pre>
<p>Use Clojure's <code>reduce</code> function or <code>apply</code> to turn the strings into numbers and then add them together.</p>
<h2 id="heading-closures"><strong>Closures</strong></h2>
<p>A closure is a way to associate data permanently with a function.</p>
<p>The first program shows how to bind data to a function.</p>
<ul>
<li><a target="_blank" href="https://playbackpress.com/books/cljbook/chapter/3/1">Closures</a></li>
</ul>
<p>The second program shows a more complex example of using closures.</p>
<ul>
<li><a target="_blank" href="https://playbackpress.com/books/cljbook/chapter/3/2">Interest in an account</a></li>
</ul>
<h3 id="heading-hands-on-practice-2"><strong>Hands-On Practice</strong></h3>
<p><strong>Problem 1</strong></p>
<p>Write a function that returns a function. The Fibonacci numbers are a sequence of numbers that are generated by summing the previous two numbers together:</p>
<pre><code class="lang-cpp"><span class="hljs-number">0</span> <span class="hljs-number">1</span> <span class="hljs-number">1</span> <span class="hljs-number">2</span> <span class="hljs-number">3</span> <span class="hljs-number">5</span> <span class="hljs-number">8</span> <span class="hljs-number">13</span> <span class="hljs-number">21</span> <span class="hljs-number">34</span> ...
</code></pre>
<p>Usually, the first two numbers are assumed to be 0 and 1. But in this case, return a function that uses the specified first two numbers in the sequence. Then generate and print out the requested numbers in the sequence.</p>
<pre><code class="lang-cpp">(defn fibs-fn[firstFib secondFib] ...) ;;<span class="hljs-function">fill <span class="hljs-keyword">this</span> <span class="hljs-title">in</span>

<span class="hljs-params">(def another-fib (fibs-fn <span class="hljs-number">10</span> <span class="hljs-number">15</span>))</span> </span>;;create a fib function that prints starting with <span class="hljs-number">10</span> <span class="hljs-keyword">and</span> <span class="hljs-number">15</span>

(another-fib <span class="hljs-number">5</span>) ;;print first <span class="hljs-number">5</span> fibs: <span class="hljs-number">10</span> <span class="hljs-number">15</span> <span class="hljs-number">25</span> <span class="hljs-number">40</span> <span class="hljs-number">65</span>
</code></pre>
<h2 id="heading-recursion"><strong>Recursion</strong></h2>
<p>A recursive function is one that calls itself. Since every function call results in a stack frame being placed on the call stack, regular recursion runs the risk of 'blowing up the call stack'. Tail recursion, with <code>recur</code>, is an efficient way to simulate recursion without the downsides.</p>
<ul>
<li><p><a target="_blank" href="https://playbackpress.com/books/cljbook/chapter/4/1">Tail Recursion</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/cljbook/chapter/4/2">Recursion and Fizz-Buzz</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/cljbook/chapter/4/3">Recursion and Square Roots</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/cljbook/chapter/4/4">Converting a String to an Integer in the Bases 2-16</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/cljbook/chapter/4/5">Mortgage Scheduler</a></p>
</li>
</ul>
<h3 id="heading-hands-on-practice-3"><strong>Hands-On Practice</strong></h3>
<p><strong>Problem 1</strong></p>
<p>Write a recursive function to reverse the letters of a string.</p>
<pre><code class="lang-cpp">(reverse-<span class="hljs-built_in">string</span> <span class="hljs-string">"Mark Mahoney"</span>) ;;returns <span class="hljs-string">"yenohaM kraM"</span>
</code></pre>
<p>You may need to create a recursive 'helper' function that takes a different number of parameters than the non-recursive function or use the <code>loop</code> form. Make sure you use recursion with the <code>recur</code> form so that you do not 'blow the stack'.</p>
<p><strong>Problem 2</strong></p>
<p>Write a function that will join a series of strings together separated by another string. The function should create and return a new string. Use recursion with <code>recur</code>.</p>
<pre><code class="lang-cpp">(defn join [separator &amp; parts]
   ;;your code here)

(join <span class="hljs-string">", "</span> <span class="hljs-string">"Mark"</span> <span class="hljs-string">"Laura"</span> <span class="hljs-string">"Buddy"</span> <span class="hljs-string">"Patrick"</span> <span class="hljs-string">"Willy"</span>) ;;<span class="hljs-string">"Mark, Laura, Buddy, Patrick, Willy"</span>
</code></pre>
<p><strong>Problem 3</strong></p>
<p>Write a function that takes in an integer and converts it to a string. The user can specify the base that the string is in from 2-10. The program should use recursion and <code>recur</code> (either a recursive function or the <code>loop</code> form).</p>
<pre><code class="lang-cpp">(to-<span class="hljs-built_in">string</span> <span class="hljs-number">100</span> <span class="hljs-number">10</span>) ;;<span class="hljs-string">"100"</span> decimal
(to-<span class="hljs-built_in">string</span> <span class="hljs-number">7</span> <span class="hljs-number">2</span>) ;;<span class="hljs-string">"111"</span> binary
</code></pre>
<h2 id="heading-lazy-sequences"><strong>Lazy Sequences</strong></h2>
<p>A lazy sequence defers the cost of creating values until they are needed. The first program shows how to create a lazy sequence. The next two are more concrete examples.</p>
<ul>
<li><p><a target="_blank" href="https://playbackpress.com/books/cljbook/chapter/5/1">Lazy sequences</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/cljbook/chapter/5/2">Lazy Prime Generator (Fizz Buzz part 3)</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/cljbook/chapter/5/3">Poker Probabilities</a></p>
</li>
</ul>
<h3 id="heading-hands-on-practice-4"><strong>Hands-On Practice</strong></h3>
<p><strong>Problem 1</strong></p>
<p>Create a function that generates a lazy sequence of squares. For example, (1 4 9 16 ... to infinity). Use it to print the first 10 squared values.</p>
<p>Then write a function that generates a lazy sequence of values raised to a power:</p>
<pre><code class="lang-cpp">(defn lazy-<span class="hljs-built_in">pow</span> [start-val power]
  ...)

(take <span class="hljs-number">6</span> (lazy-<span class="hljs-built_in">pow</span> <span class="hljs-number">10</span> <span class="hljs-number">2</span>)) ;(<span class="hljs-number">100</span> <span class="hljs-number">121</span> <span class="hljs-number">144</span> <span class="hljs-number">169</span> <span class="hljs-number">196</span> <span class="hljs-number">225</span>)
(take <span class="hljs-number">6</span> (lazy-<span class="hljs-built_in">pow</span> <span class="hljs-number">10</span> <span class="hljs-number">3</span>)) ;(<span class="hljs-number">1000</span> <span class="hljs-number">1331</span> <span class="hljs-number">1728</span> <span class="hljs-number">2197</span> <span class="hljs-number">2744</span> <span class="hljs-number">3375</span>)
</code></pre>
<p><strong>Problem 2</strong></p>
<p>Write a function that generates an infinite lazy sequence of possible permutations of the passed in sequence.</p>
<pre><code class="lang-cpp">(take <span class="hljs-number">3</span> (lazy-perm [<span class="hljs-string">"a"</span> <span class="hljs-string">"b"</span> <span class="hljs-string">"c"</span>]))
;(<span class="hljs-string">"a"</span> <span class="hljs-string">"b"</span> <span class="hljs-string">"c"</span>)

(take <span class="hljs-number">12</span> (lazy-perm [<span class="hljs-string">"a"</span> <span class="hljs-string">"b"</span> <span class="hljs-string">"c"</span>])) 
;(<span class="hljs-string">"a"</span> <span class="hljs-string">"b"</span> <span class="hljs-string">"c"</span> <span class="hljs-string">"aa"</span> <span class="hljs-string">"ab"</span> <span class="hljs-string">"ac"</span> <span class="hljs-string">"ba"</span> <span class="hljs-string">"bb"</span> <span class="hljs-string">"bc"</span> <span class="hljs-string">"ca"</span> <span class="hljs-string">"cb"</span> <span class="hljs-string">"cc"</span>)

(take <span class="hljs-number">39</span> (lazy-perm [<span class="hljs-string">"a"</span> <span class="hljs-string">"b"</span> <span class="hljs-string">"c"</span>])) 
;(<span class="hljs-string">"a"</span> <span class="hljs-string">"b"</span> <span class="hljs-string">"c"</span> <span class="hljs-string">"aa"</span> <span class="hljs-string">"ab"</span> <span class="hljs-string">"ac"</span> <span class="hljs-string">"ba"</span> <span class="hljs-string">"bb"</span> <span class="hljs-string">"bc"</span> <span class="hljs-string">"ca"</span> <span class="hljs-string">"cb"</span> <span class="hljs-string">"cc"</span> <span class="hljs-string">"aaa"</span> <span class="hljs-string">"aab"</span> <span class="hljs-string">"aac"</span> <span class="hljs-string">"aba"</span> <span class="hljs-string">"abb"</span> <span class="hljs-string">"abc"</span> <span class="hljs-string">"aca"</span> <span class="hljs-string">"acb"</span> <span class="hljs-string">"acc"</span> <span class="hljs-string">"baa"</span> <span class="hljs-string">"bab"</span> <span class="hljs-string">"bac"</span> <span class="hljs-string">"bba"</span> <span class="hljs-string">"bbb"</span> <span class="hljs-string">"bbc"</span> <span class="hljs-string">"bca"</span> <span class="hljs-string">"bcb"</span> <span class="hljs-string">"bcc"</span> <span class="hljs-string">"caa"</span> <span class="hljs-string">"cab"</span> <span class="hljs-string">"cac"</span> <span class="hljs-string">"cba"</span> <span class="hljs-string">"cbb"</span> <span class="hljs-string">"cbc"</span> <span class="hljs-string">"cca"</span> <span class="hljs-string">"ccb"</span> <span class="hljs-string">"ccc"</span>)

(take <span class="hljs-number">120</span> (lazy-perm [<span class="hljs-string">"a"</span> <span class="hljs-string">"b"</span> <span class="hljs-string">"c"</span>]))
;(<span class="hljs-string">"a"</span> <span class="hljs-string">"b"</span> <span class="hljs-string">"c"</span> <span class="hljs-string">"aa"</span> <span class="hljs-string">"ab"</span> <span class="hljs-string">"ac"</span> <span class="hljs-string">"ba"</span> <span class="hljs-string">"bb"</span> <span class="hljs-string">"bc"</span> <span class="hljs-string">"ca"</span> <span class="hljs-string">"cb"</span> <span class="hljs-string">"cc"</span> <span class="hljs-string">"aaa"</span> <span class="hljs-string">"aab"</span> <span class="hljs-string">"aac"</span> <span class="hljs-string">"aba"</span> <span class="hljs-string">"abb"</span> <span class="hljs-string">"abc"</span> <span class="hljs-string">"aca"</span> <span class="hljs-string">"acb"</span> <span class="hljs-string">"acc"</span> <span class="hljs-string">"baa"</span> <span class="hljs-string">"bab"</span> <span class="hljs-string">"bac"</span> <span class="hljs-string">"bba"</span> <span class="hljs-string">"bbb"</span> <span class="hljs-string">"bbc"</span> <span class="hljs-string">"bca"</span> <span class="hljs-string">"bcb"</span> <span class="hljs-string">"bcc"</span> <span class="hljs-string">"caa"</span> <span class="hljs-string">"cab"</span> <span class="hljs-string">"cac"</span> <span class="hljs-string">"cba"</span> <span class="hljs-string">"cbb"</span> <span class="hljs-string">"cbc"</span> <span class="hljs-string">"cca"</span> <span class="hljs-string">"ccb"</span> <span class="hljs-string">"ccc"</span> <span class="hljs-string">"aaaa"</span> <span class="hljs-string">"aaab"</span> <span class="hljs-string">"aaac"</span> <span class="hljs-string">"aaba"</span> <span class="hljs-string">"aabb"</span> <span class="hljs-string">"aabc"</span> <span class="hljs-string">"aaca"</span> <span class="hljs-string">"aacb"</span> <span class="hljs-string">"aacc"</span> <span class="hljs-string">"abaa"</span> <span class="hljs-string">"abab"</span> <span class="hljs-string">"abac"</span> <span class="hljs-string">"abba"</span> <span class="hljs-string">"abbb"</span> <span class="hljs-string">"abbc"</span> <span class="hljs-string">"abca"</span> <span class="hljs-string">"abcb"</span> <span class="hljs-string">"abcc"</span> <span class="hljs-string">"acaa"</span> <span class="hljs-string">"acab"</span> <span class="hljs-string">"acac"</span> <span class="hljs-string">"acba"</span> <span class="hljs-string">"acbb"</span> <span class="hljs-string">"acbc"</span> <span class="hljs-string">"acca"</span> <span class="hljs-string">"accb"</span> <span class="hljs-string">"accc"</span> <span class="hljs-string">"baaa"</span> <span class="hljs-string">"baab"</span> <span class="hljs-string">"baac"</span> <span class="hljs-string">"baba"</span> <span class="hljs-string">"babb"</span> <span class="hljs-string">"babc"</span> <span class="hljs-string">"baca"</span> <span class="hljs-string">"bacb"</span> <span class="hljs-string">"bacc"</span> <span class="hljs-string">"bbaa"</span> <span class="hljs-string">"bbab"</span> <span class="hljs-string">"bbac"</span> <span class="hljs-string">"bbba"</span> <span class="hljs-string">"bbbb"</span> <span class="hljs-string">"bbbc"</span> <span class="hljs-string">"bbca"</span> <span class="hljs-string">"bbcb"</span> <span class="hljs-string">"bbcc"</span> <span class="hljs-string">"bcaa"</span> <span class="hljs-string">"bcab"</span> <span class="hljs-string">"bcac"</span> <span class="hljs-string">"bcba"</span> <span class="hljs-string">"bcbb"</span> <span class="hljs-string">"bcbc"</span> <span class="hljs-string">"bcca"</span> <span class="hljs-string">"bccb"</span> <span class="hljs-string">"bccc"</span> <span class="hljs-string">"caaa"</span> <span class="hljs-string">"caab"</span> <span class="hljs-string">"caac"</span> <span class="hljs-string">"caba"</span> <span class="hljs-string">"cabb"</span> <span class="hljs-string">"cabc"</span> <span class="hljs-string">"caca"</span> <span class="hljs-string">"cacb"</span> <span class="hljs-string">"cacc"</span> <span class="hljs-string">"cbaa"</span> <span class="hljs-string">"cbab"</span> <span class="hljs-string">"cbac"</span> <span class="hljs-string">"cbba"</span> <span class="hljs-string">"cbbb"</span> <span class="hljs-string">"cbbc"</span> <span class="hljs-string">"cbca"</span> <span class="hljs-string">"cbcb"</span> <span class="hljs-string">"cbcc"</span> <span class="hljs-string">"ccaa"</span> <span class="hljs-string">"ccab"</span> <span class="hljs-string">"ccac"</span> <span class="hljs-string">"ccba"</span> <span class="hljs-string">"ccbb"</span> <span class="hljs-string">"ccbc"</span> <span class="hljs-string">"ccca"</span> <span class="hljs-string">"cccb"</span> <span class="hljs-string">"cccc"</span>)
</code></pre>
<h2 id="heading-macros"><strong>Macros</strong></h2>
<p>A macro specifies some code to be executed, sort of like a function, but it also allows some of that code to be replaced with values that come from the user.</p>
<p>The code in a macro is kind of like a template that can be altered to suit the caller’s needs. With this powerful feature, the language can be expanded to do things that the language inventor never thought to add.</p>
<ul>
<li><p><a target="_blank" href="https://playbackpress.com/books/cljbook/chapter/6/1">Macros</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/cljbook/chapter/6/2">Set macros</a></p>
</li>
</ul>
<h3 id="heading-hands-on-practice-5"><strong>Hands-On Practice</strong></h3>
<p><strong>Problem 1</strong></p>
<p>Write a macro that takes in a grade earned on a student assignment (on a 0-100 scale) and some code to execute if the grade is a passing or failing.</p>
<pre><code class="lang-cpp">(defmacro eval-grade [grade <span class="hljs-keyword">if</span>-passing <span class="hljs-keyword">if</span>-failing] ...)
</code></pre>
<p>And use it to print or call a function based on the value of the grade</p>
<pre><code class="lang-cpp">(def users-grade <span class="hljs-number">43</span>)

(eval-grade users-grade (println <span class="hljs-string">"Passing"</span>) (println <span class="hljs-string">"Failing"</span>)) ;;<span class="hljs-string">"Failing"</span>

(eval-grade users-grade (praise users-grade) (warning users-grade)) ;;call the warning function
</code></pre>
<h2 id="heading-concurrency"><strong>Concurrency</strong></h2>
<p>Concurrency in Clojure is a big topic. I start by discussing threads. Then I talk about different strategies for dealing with data that is shared among different threads.</p>
<ul>
<li><p><a target="_blank" href="https://playbackpress.com/books/cljbook/chapter/7/1">Threads</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/cljbook/chapter/7/2">Threaded poker</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/cljbook/chapter/7/3">refs and threads</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/cljbook/chapter/7/4">Atoms</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/cljbook/chapter/7/5">Poker with atoms</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/cljbook/chapter/7/6">Thread logging with agents</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/cljbook/chapter/7/7">Simpler concurrency</a></p>
</li>
</ul>
<h3 id="heading-hands-on-practice-6"><strong>Hands-On Practice</strong></h3>
<p><strong>Problem 1</strong></p>
<p>This lab asks you to create a Clojure program that will count how many primes are in a given range.</p>
<p>Create a thread pool and have each thread check a single number in the range. If it finds a prime, it will increase a counter (which should be an <code>atom</code> since it is shared by all of the threads). Look at the program above on Atoms as a starting point.</p>
<h2 id="heading-conclusion">Conclusion</h2>
<p>If you've made it this far, you’ve already taken meaningful steps toward learning a language that can change how you write and think about code.</p>
<p>Clojure offers a fresh perspective on programming, one that focuses on simplicity, immutability, and the power of functions. Learning Clojure will change your brain and you will take these lessons with you to other languages as well.</p>
<p>So keep experimenting, keep asking questions, and keep practicing to sharpen your skills.</p>
<h2 id="heading-comments-and-feedback"><strong>Comments and Feedback</strong></h2>
<p>You can find all of these code playbacks in the free 'book', <a target="_blank" href="https://playbackpress.com/books/cljbook/">An Animated Introduction to Clojure</a>. There are more free books here:</p>
<ul>
<li><p><a target="_blank" href="https://playbackpress.com/books/cppbook/">An Animated Introduction to Programming in C++</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/pybook">An Animated Introduction to Programming with Python</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/sqlbook">Database Design and SQL for Beginners</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/workedsqlbook">Worked SQL Examples</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/sqlitebook">Programming with SQLite</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/webdevbook">An Introduction to Web Development from Back to Front</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/cljbook">An Animated Introduction to Clojure</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/exbook">An Animated Introduction to Elixir</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/rubybook">A Brief Introduction to Ruby</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/flutterbook">Mobile App Development with Dart and Flutter</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/patternsbook">OO Design Patterns with Java</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/wordzearchbook">How I Built It: Word Zearch</a></p>
</li>
</ul>
<p>Comments and feedback are welcome via email: <a target="_blank" href="mailto:mark@playbackpress.com">mark@playbackpress.com</a>.</p>
<p>If you'd like to support my work and help keep Playback Press free for all, consider donating using <a target="_blank" href="https://github.com/sponsors/markm208">GitHub Sponsors</a>. I use all of the donations for hosting costs. Your support helps me continue creating educational content like this. Thank you!</p>
 ]]>
                </content:encoded>
            </item>
        
            <item>
                <title>
                    <![CDATA[ An Animated Introduction to Programming in C++ ]]>
                </title>
                <description>
                    <![CDATA[ In this tutorial, I’ll give you a comprehensive introduction to programming in C++. You don't need to have any previous programming experience in order to begin. Along the way, you will learn about the flow of control, variables, conditional statemen... ]]>
                </description>
                <link>https://www.freecodecamp.org/news/learn-programming-in-cpp/</link>
                <guid isPermaLink="false">67e48bff04e3150220f40379</guid>
                
                    <category>
                        <![CDATA[ C++ ]]>
                    </category>
                
                    <category>
                        <![CDATA[ Beginner Developers ]]>
                    </category>
                
                <dc:creator>
                    <![CDATA[ Mark Mahoney ]]>
                </dc:creator>
                <pubDate>Wed, 26 Mar 2025 23:21:35 +0000</pubDate>
                <media:content url="https://cdn.hashnode.com/res/hashnode/image/upload/v1743028744653/12f33ee5-4ef4-47da-b50d-060a9ee327ce.png" medium="image" />
                <content:encoded>
                    <![CDATA[ <p>In this tutorial, I’ll give you a comprehensive introduction to programming in C++. You don't need to have any previous programming experience in order to begin.</p>
<p>Along the way, you will learn about the flow of control, variables, conditional statements, loops, arrays, functions, structured data, pointers and dynamic memory, classes, common data structures, and working with databases.</p>
<p>Integrated Development Environments (IDE’s) are tools that allow you to write, run, and debug C++ programs. There are some great free C++ IDE’s out there.</p>
<p>If you own a Windows computer, I recommend using <a target="_blank" href="https://visualstudio.microsoft.com/vs/community">Visual Studio Community Edition</a>. If you own a Mac, I recommend using <a target="_blank" href="https://developer.apple.com/xcode">Xcode</a>. These provide robust features and excellent support for C++ development. If you're looking for a lightweight install on any platform, <a target="_blank" href="https://www.jetbrains.com/clion/download">CLion</a> is a fantastic choice.</p>
<p>For those who prefer not to install any software or are unable to, <a target="_blank" href="https://replit.com">replit</a> is a convenient web-based IDE that allows you to start coding immediately.</p>
<p>There are practice problems in each section so that you can use to practice while learning from the content. These are in the '<strong>Hands-On Practice</strong>' portion of each section. You will use your IDE to write and run these practice programs.</p>
<h2 id="heading-code-playbacks"><strong>Code Playbacks</strong></h2>
<p>This is not a traditional online tutorial or video series. Each section will have links to interactive ‘<strong>code playbacks’</strong> that visually animate the changes made to a program in a step-by-step manner.</p>
<p>A code playback shows how a program evolves by replaying all the steps in its development. It has an author-supplied narrative, screenshots, whiteboard-style drawings, and self-grading multiple choice questions to make the learning process more dynamic and interactive. Just click on the numbered comments on the left hand side of the screen to drive the playback forward.</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1742956414812/64ed10ba-5f80-442b-b469-9d6462521578.png" alt="Screenshot showing what the playbacks look like" class="image--center mx-auto" width="2588" height="1540" loading="lazy"></p>
<p>Watch this short <a target="_blank" href="https://youtu.be/uYbHqCNjVDM">YouTube video</a> which explains how to view a code playback in more detail.</p>
<h2 id="heading-playback-press"><strong>Playback Press</strong></h2>
<p><a target="_blank" href="https://playbackpress.com/books">Playback Press</a> is a platform for sharing code playbacks. The site contains collections of code playbacks grouped together by language/technology into different ‘books’. If you want to see the full C++ book, you can go here: <a target="_blank" href="https://playbackpress.com/books/cppbook">An Animated Introduction to Programming in C++</a>.</p>
<p>Code playbacks on the platform include AI tutoring, mini-quizzes, and text-to-speech features.</p>
<p><a target="_blank" href="https://markm208.github.io/">Storyteller</a> is the free and open-source tool that powers code playbacks.</p>
<h2 id="heading-ai-tutor"><strong>AI Tutor</strong></h2>
<p>When viewing a code playback, you can ask an AI tutor about the code. It answers questions clearly and patiently, making it a helpful resource for learners. You can also ask the AI tutor to generate new self-grading multiple choice questions to test your knowledge of what you are learning.</p>
<p>In order to access the AI tutor and to generate new multiple choice questions, simply create a free account on Playback Press and add the <a target="_blank" href="https://playbackpress.com/books/cppbook">book</a> to your bookshelf. It is still free, but you do need to register in order to access the AI features.</p>
<h2 id="heading-table-of-contents"><strong>Table of Contents</strong></h2>
<ul>
<li><p><a class="post-section-overview" href="#heading-part-1-variables">Part 1: Variables</a></p>
</li>
<li><p><a class="post-section-overview" href="#heading-part-2-selection">Part 2: Selection</a></p>
</li>
<li><p><a class="post-section-overview" href="#heading-part-3-looping">Part 3: Looping</a></p>
</li>
<li><p><a class="post-section-overview" href="#heading-part-4-arrays">Part 4: Arrays</a></p>
</li>
<li><p><a class="post-section-overview" href="#heading-part-5-functions">Part 5: Functions</a></p>
</li>
<li><p><a class="post-section-overview" href="#heading-part-6-vectors">Part 6: Vectors</a></p>
</li>
<li><p><a class="post-section-overview" href="#heading-part-7-structured-data">Part 7: Structured Data</a></p>
</li>
<li><p><a class="post-section-overview" href="#heading-part-8-pointers">Part 8: Pointers</a></p>
</li>
<li><p><a class="post-section-overview" href="#heading-part-9-object-oriented-programming">Part 9: Object-Oriented Programming</a></p>
</li>
<li><p><a class="post-section-overview" href="#heading-part-10-data-structures">Part 10: Data Structures</a></p>
</li>
<li><p><a class="post-section-overview" href="#heading-part-11-sqlite-databases">Part 11: SQLite Databases</a></p>
</li>
<li><p><a class="post-section-overview" href="#heading-comments-and-feedback">Comments and Feedback</a></p>
</li>
</ul>
<h3 id="heading-c-overview">C++ Overview</h3>
<p>C++ is a powerful, high-performance programming language that is widely used in various domains such as system development, game development, real-time simulations, and high-performance applications. It is an extension of the C programming language, adding object-oriented features, which makes it suitable for large-scale software engineering projects.</p>
<p>C++ provides fine-grained control over system resources and memory management, which can lead to highly optimized and efficient code. C++ remains a popular choice due to its versatility, performance, and the vast ecosystem of libraries and tools available.</p>
<h2 id="heading-part-1-variables"><strong>Part 1: Variables</strong></h2>
<p>Simply watching an experienced artist paint is not enough to say that you have learned how to become a painter. Watching an experienced artist is an important <em>part</em> of the learning process, but you can only call yourself a painter after struggling to make your own paintings first.</p>
<p>There are a lot of similarities between learning to paint and learning to program. The only way to truly learn programming is through practice!</p>
<p>So, let's get started. Follow along with the code playbacks below. Click the links below to load each code playback (it may help to open them in a new tab). Click on the playback comments on the left-hand side of the playback screen to step through the code's development.</p>
<h3 id="heading-flow-of-control"><strong>Flow of Control</strong></h3>
<p>The following playback explains the <strong>flow of control</strong> in a program by describing how to print to the screen from it:</p>
<ul>
<li><a target="_blank" href="https://playbackpress.com/books/cppbook/chapter/1/1">1.1 Name printer program</a></li>
</ul>
<h3 id="heading-variables-and-types"><strong>Variables and Types</strong></h3>
<p>This next group of programs describes declaring variables to hold data in a program. All variables have a <strong>type</strong> which specifies what can be stored in them and what operations can be performed on them.</p>
<ul>
<li><p><a target="_blank" href="https://playbackpress.com/books/cppbook/chapter/1/2">1.2 Distance formula</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/cppbook/chapter/1/3">1.3 Basic types in C++</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/cppbook/chapter/1/4">1.4 Number types</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/cppbook/chapter/1/5">1.5 Characters and strings</a></p>
</li>
</ul>
<h3 id="heading-reading-from-the-keyboard"><strong>Reading from the Keyboard</strong></h3>
<p>This final group of programs builds on previous concepts and shows how to prompt the user for input.</p>
<ul>
<li><p><a target="_blank" href="https://playbackpress.com/books/cppbook/chapter/1/6">1.6 Weekly pay calculator</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/cppbook/chapter/1/7">1.7 Distance formula revisited</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/cppbook/chapter/1/8">1.8 Gas Mileage</a></p>
</li>
</ul>
<h3 id="heading-hands-on-practice"><strong>Hands-On Practice</strong></h3>
<p>Now that you have reviewed the guided code walk-throughs, write a program that prompts the user for three integers: one representing an hour, one representing a minute, and one representing a second. Next, calculate the number of seconds until midnight based on the time that was input. Print the number of seconds until midnight on the screen.</p>
<p>Then, prompt the user for a single integer representing the number of seconds until midnight. From that value, do the reverse calculation to find the hour, minute, and second of that time. Print it to the screen in a time format HH:MM:SS.</p>
<h2 id="heading-part-2-selection"><strong>Part 2: Selection</strong></h2>
<p>This section discusses altering the flow of control with <code>if/else</code> statements. These statements ask the computer to evaluate whether a condition is <code>true</code> or <code>false</code> and changes the flow of control based on the answer. It also explains the data type, <code>bool</code>, which can hold either true or false and it shows a few examples of how to use selection with <code>if</code>, <code>if/else</code>, <code>if/else if/else</code>, and <code>switch</code> statements.</p>
<ul>
<li><p><a target="_blank" href="https://playbackpress.com/books/cppbook/chapter/2/1">2.1 Booleans</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/cppbook/chapter/2/2">2.2 Even/odd calculator</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/cppbook/chapter/2/3">2.3 Overtime pay with an if/else</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/cppbook/chapter/2/4">2.4 Water temperature</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/cppbook/chapter/2/5">2.5 Switch</a></p>
</li>
</ul>
<h3 id="heading-hands-on-practice-1"><strong>Hands-On Practice</strong></h3>
<p>Now that you have reviewed the guided code walk-throughs, try to write a few programs:</p>
<h4 id="heading-problem-1"><strong>Problem 1</strong></h4>
<p>Problem 1 asks you to write a program to determine if one date comes after another. The program will ask for two sets of dates. Next, the program will determine if the first date comes before, is equal to, or comes after.</p>
<pre><code class="lang-plaintext">Enter in the first month: 2
Enter in the first day: 21
Enter in the first year: 2012

Enter in the second month: 2
Enter in the second day: 22
Enter in the second year: 2011

The first date comes after the second.
</code></pre>
<h4 id="heading-problem-2"><strong>Problem 2</strong></h4>
<p>Problem 2 asks you to write a program that prompts the user for a date and determines if that date is valid. For example, 9/19/2017 is a valid date, but these are not valid dates:</p>
<ul>
<li><p>4/31/2006 (only 30 days in April)</p>
</li>
<li><p>2/29/2005 (not a leap year)</p>
</li>
<li><p>16/1/2010 (invalid month)</p>
</li>
<li><p>4/59/2013 (invalid day)</p>
</li>
</ul>
<p>If the date is correct, print it out. If it is incorrect, display an error message explaining why the date is not correct.</p>
<h4 id="heading-problem-3"><strong>Problem 3</strong></h4>
<p>Problem 3 asks you to write a program that will calculate change for a sales purchase. Your program should prompt for a sales price. Validate that the data entered is a number greater than 0. If the data entered is incorrect, display an error message and end the program.</p>
<p>Next, prompt the user for the amount that the customer will pay to the cashier. Validate that this value is greater than or equal to the sales price. If it is not, display an error message and end the program.</p>
<p>If the entry is correct, your program must calculate the amount of change to return to the user. Next, calculate what bills and coins that the the cashier needs to return to the customer. The fewest number of paper bills and coins should be returned. You can make change in many different combinations, but the only correct implementation is the one that returns the fewest paper bills and coins.</p>
<p>Display the number of each of the bills and coins. Here is a sample run of the program:</p>
<pre><code class="lang-plaintext">Enter in a sales amount: $20.38
Enter in the amount the customer pays: $30.00

The change due back is $9.62

You should give the customer this change:
0 $100 bills
0 $50 bills
0 $20 bills
0 $10 bills
1 $5 bills
4 $1 bills
1 Half Dollars
0 Quarters
1 Dimes
0 Nickels
2 Pennies
</code></pre>
<p>Because of the way arithmetic works with float variables, storing the monetary values as floats may cause some problems.</p>
<p>For example, if you had a float variable that held 1.29 to represent $1.29 and you subtracted the .05 from it (to represent giving back a nickel), you would think that you would be left with exactly 1.24. Unfortunately, the computer might store that value or it might store 1.2399999 or 1.2400001 instead of exactly 1.24.</p>
<p>These very small inconsistencies can cause a problem calculating the number of pennies to return. Consider converting the amounts into ints to solve this problem.</p>
<h2 id="heading-part-3-looping"><strong>Part 3: Looping</strong></h2>
<p>This group of playbacks discusses repeatedly executing the same code over and over again in a loop. They show how to create count controlled and event controlled loops with the <code>while</code> keyword, nested loops, a <code>for</code> loop, and how to exit a loop with <code>break</code> and <code>continue</code>.</p>
<ul>
<li><p><a target="_blank" href="https://playbackpress.com/books/cppbook/chapter/3/1">3.1 A simple loop</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/cppbook/chapter/3/2">3.2 More loops</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/cppbook/chapter/3/3">3.3 Summation</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/cppbook/chapter/3/4">3.4 Nested loop</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/cppbook/chapter/3/5">3.5 <code>for</code> loop</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/cppbook/chapter/3/6">3.6 Capitalization</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/cppbook/chapter/3/7">3.7 <code>break</code> and <code>continue</code></a></p>
</li>
</ul>
<h3 id="heading-hands-on-practice-2"><strong>Hands-On Practice</strong></h3>
<p>Now that you have reviewed the guided code walk-throughs, write a few programs:</p>
<h4 id="heading-problem-1-1"><strong>Problem 1</strong></h4>
<p>Problem 1 asks you to write a program that will calculate the sum of the squares from 1 up to and including that number. For example, if the user entered in the value 5, then the sum of the squares for the numbers one through five would be (1 + 4 + 9 + 16 + 25) = 55.</p>
<p>Your program should repeatedly calculate this value until the user enters in a value of -99. This is the sentinel value that the program uses to determine when to quit.</p>
<pre><code class="lang-plaintext">Enter in an integer number(ex. 10), -99 to quit: 5
The sum of the squares up to 5 is 55

Enter in an integer number(ex. 10), -99 to quit: 4
The sum of the squares up to 4 is 30

Enter in an integer number(ex. 10), -99 to quit: -99
Have a nice day!
</code></pre>
<h4 id="heading-problem-2-1"><strong>Problem 2</strong></h4>
<p>Problem 2 asks you to write a program that will determine whether a number is prime or not. A prime number is any number that is evenly divisible only by the number one and itself.</p>
<p>7 is prime because the only numbers that divide into it without a remainder are 1 and 7.</p>
<p>12 is not prime because the numbers that divide into it evenly are 1, 2, 3, 4, 6, and 12.</p>
<p>Your program will prompt for a number and then display whether the number is prime or not. The number entered must be a positive number. Repeatedly prompt for a number until a positive number is entered.</p>
<h4 id="heading-problem-3-1"><strong>Problem 3</strong></h4>
<p>Problem 3 asks you to calculate a mortgage schedule for someone thinking of buying a new house. The inputs to determine a monthly schedule are the principal loan amount and the annual interest rate. Assume this will be a conventional 30 year loan.</p>
<p>Your program should prompt for these inputs and find a monthly payment using this calculation:</p>
<pre><code class="lang-plaintext">                                   monthly interest rate                                              
monthly payment =  ------------------------------------------------- * principal
                   1 - (1 + monthly interest rate)^-number of months
</code></pre>
<p>Notice that you will have to calculate the monthly interest rate (the annual interest rate divided by 12.0) and number of months (360 for a 30 year loan). The ^ in this formula means raise one number to a power. There is a function called <code>pow()</code> which raises one number to another and returns the result. For example, if you wanted to raise 2 to the -3rd power, you would do this:</p>
<pre><code class="lang-cpp"><span class="hljs-keyword">float</span> result = <span class="hljs-built_in">pow</span>(<span class="hljs-number">2.0</span>, <span class="hljs-number">-3.0</span>);
</code></pre>
<p>After you have calculated the monthly payment, create a summary of the loan characteristics. Display the loan amount, the interest rate, the monthly payment, the total amount paid for the loan, the total amount of interest paid, and the ratio of amount paid over the principal.</p>
<p>After you have printed the summary, you can begin to make the schedule. Prompt the user for the ending month to display in the schedule. The schedule should display the month number, the monthly payment, the amount paid in principal in that month, the amount paid in interest in that month, and the amount remaining in the principal (the amount paid in principle each month is deducted from the remaining principle). A month's interest amount is equal to monthly interest rate times the remaining principal. The monthly principal is the difference between the monthly payment and the monthly interest paid. Remember to update the remaining principal after every month.</p>
<p>After each year of the schedule has been printed, display a message with the year number.</p>
<h2 id="heading-part-4-arrays"><strong>Part 4: Arrays</strong></h2>
<p>This batch of programs shows how to use arrays in C/C++. An array is a collection of variables (all of the same type) that have a single name and sit next to each other in memory. Loops are almost always used to go through the elements of an array. They show how to create two and three dimensional arrays and use the random number generator in C/C++.</p>
<ul>
<li><p><a target="_blank" href="https://playbackpress.com/books/cppbook/chapter/4/1">4.1 Arrays</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/cppbook/chapter/4/2">4.2 Average and standard deviation of an array of values</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/cppbook/chapter/4/3">4.3 Problems with arrays</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/cppbook/chapter/4/4">4.4 Flipping coins</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/cppbook/chapter/4/5">4.5 Multi-dimensional arrays</a></p>
</li>
</ul>
<h3 id="heading-hands-on-practice-3"><strong>Hands-On Practice</strong></h3>
<p>Now that you have reviewed the guided code walk-throughs, write a few programs:</p>
<h4 id="heading-problem-1-2"><strong>Problem 1</strong></h4>
<p>Problem 1 asks you to write a program that displays a menu with three options.</p>
<p>The first option allows the user to enter in a month number (between 1-12) and a day number within that month (1-31) and calculates the day number in the year. January 1 is day 1. January 31 is day 31. February 1 is day 32. February 28 is day 59. December 31 is day 365 (don’t worry about leap years). If the user enters an invalid combination (like February 31) the program should continuously prompt the user to enter in a new value until they enter a valid date.</p>
<p>The second menu option allows the user to enter in a day number (1-365) and prints out the month name and day number of that month. If the user enters in 59, the program should print out:</p>
<pre><code class="lang-plaintext">Day 59 is February 28
</code></pre>
<p>If the user enters an invalid day number, the program should continuously prompt the user to enter in a new value until it is in the correct range.</p>
<p>The last menu option allows the user to quit the program. The menu should repeatedly be displayed until the user chooses to quit the program.</p>
<p>Use an array of integers to hold the number of days in each of the months. Use the array to keep a running sum to help with your day calculations. You may also want to create an array of strings with the month names.</p>
<pre><code class="lang-cpp"><span class="hljs-keyword">int</span> numDaysInMonths[] = {<span class="hljs-number">31</span>, <span class="hljs-number">28</span>, <span class="hljs-number">31</span>, <span class="hljs-number">30</span>, <span class="hljs-number">31</span>, <span class="hljs-number">30</span>, <span class="hljs-number">31</span>, <span class="hljs-number">31</span>, <span class="hljs-number">30</span>, <span class="hljs-number">31</span>, <span class="hljs-number">30</span>, <span class="hljs-number">31</span>};
</code></pre>
<p>Here is a sample run of the program:</p>
<pre><code class="lang-plaintext">1. Enter in a month and day
2. Enter in a day number
3. Quit
Enter in a menu option: 1

Enter in a month number: 2
Enter in a day number: 1

February 1 is day 32

1. Enter in a month and day
2. Enter in a day number
3. Quit
Enter in a menu option: 2

Enter in a day number: 59
Day 59 is February 28

1. Enter in a month and day
2. Enter in a day number
3. Quit
Enter in a menu option: 3
</code></pre>
<h4 id="heading-problem-2-2"><strong>Problem 2</strong></h4>
<p>Problem 2 asks you to create a program that will find the number of days in between two dates.</p>
<p>For example, say a user would like to know how many days are in between two dates (1/1/2000) and (3/19/2030). The program must find out how many whole days are in between these two dates (include the starting and ending date).</p>
<p>If the two dates are in the same year, then the algorithm to find the number of days may be different than if the dates are in different years. Your program must handle each case.</p>
<p>Here is a sample run of the program:</p>
<pre><code class="lang-plaintext">Enter in a start month: 1
Enter in a start day: 1
Enter in a start year: 2000

Enter in an end month: 3
Enter in an end day: 19
Enter in an end year: 2030

There are 11035 days in between 1/1/2000 and 3/19/2030
</code></pre>
<h2 id="heading-part-5-functions"><strong>Part 5: Functions</strong></h2>
<p>This group of playbacks describes another flow of control-altering mechanism called functions. A function is a named block of code that can be <em>called</em> and the flow of control will jump to it.</p>
<p>When calling a function, some data can be passed into it (called parameters) and the function can return a piece of data when it is complete (called a return value). These playbacks discuss passing in data 'by value' versus 'by reference'. They show that every variable has a limited lifetime that it sits in memory, or scope.</p>
<ul>
<li><p><a target="_blank" href="https://playbackpress.com/books/cppbook/chapter/5/1">5.1 Functions</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/cppbook/chapter/5/2">5.2 Value returning functions</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/cppbook/chapter/5/3">5.3 Functions with parameters</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/cppbook/chapter/5/4">5.4 Passing parameters by reference</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/cppbook/chapter/5/5">5.5 The scope of variables</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/cppbook/chapter/5/6">5.6 Prime number function</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/cppbook/chapter/5/7">5.7 Passing arrays to functions</a></p>
</li>
</ul>
<h3 id="heading-hands-on-practice-4"><strong>Hands-On Practice</strong></h3>
<p>Now that you have reviewed the guided code walk-throughs, write a few programs:</p>
<h4 id="heading-problem-1-3"><strong>Problem 1</strong></h4>
<p>Problem 1 asks you to extend the prime number problem from a previous section. Write a program that includes a function that will print all the prime numbers in a range. The program will ask for a lower bound and an upper bound and print all the primes in that range.</p>
<h4 id="heading-problem-2-3"><strong>Problem 2</strong></h4>
<p>Problem 2 asks you to write a function that takes an integer year number and returns a <code>bool</code> whether that year is a leap year or not. The calculation for leap year is as follows:</p>
<ul>
<li><p>most years evenly divisible by four are leap years</p>
</li>
<li><p>if a year is divisible by four and is a century year, like 1800 or 1900, then it is NOT a leap year</p>
</li>
<li><p>if a century year also happens to be divisible by 400, like 2000 or 2400, then it is a leap year</p>
</li>
</ul>
<p>The function should look something like this:</p>
<pre><code class="lang-cpp"><span class="hljs-function"><span class="hljs-keyword">bool</span> <span class="hljs-title">isLeapYear</span><span class="hljs-params">(<span class="hljs-keyword">int</span> year)</span>
</span>{
    <span class="hljs-comment">//calculate if it is leap year or not and return true or false</span>
}
</code></pre>
<h4 id="heading-problem-3-2"><strong>Problem 3</strong></h4>
<p>Problem 3 asks you to write a program that will print a calendar for a whole year given the day that January 1st falls on. Your program will prompt for the day that January 1st falls on and the year. You must print the calendar for all 12 months of that year. The options for the first day of the year will be entered with the first three letters of each of the seven days of the week from Sunday ('sun') to Saturday ('sat').</p>
<p>The year does not need to be validated, but the day of the week does. You should not allow the user to enter in a value other than 'sun', 'mon', 'tue', 'wed', 'thu', 'fri', or 'sat'.</p>
<p>The format of your calendar should be very similar to the example below. You must use at least one function in addition to the main function. Pass data between functions, do not use global variables.</p>
<p>The final requirement is that your program should only display one month at a time and then wait for some user input before continuing.</p>
<p>It is very important that you come up with a plan to solve this program before you begin coding (as it is with every program). Think about how you would print a single month's calendar given the day of the month that it begins on.</p>
<p>Sample Output:</p>
<pre><code class="lang-plaintext">What year do you want the calendar for?
2003

What day of the week does January 1st fall on (sun for Sunday, mon for Monday, etc..)?
s
Invalid Entry - please enter the first three letters of the day

What day of the week does January 1st fall on (sun for Sunday, mon for Monday, etc..)?
wed

    January 2003
 S  M  T  W  T  F  S
---------------------
          1  2  3  4
 5  6  7  8  9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31

Do you want to continue? y

   February 2003
 S  M  T  W  T  F  S
---------------------
                   1
 2  3  4  5  6  7  8
 9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28

Do you want to continue? y
...
...
</code></pre>
<h2 id="heading-part-6-vectors"><strong>Part 6: Vectors</strong></h2>
<p>C++ comes with the Standard Template Library (STL) which is a collection of different containers. This section will cover vectors. A <code>vector</code> is an array-based container that holds data very much like an array does but it is <em>smarter</em>. It knows how many elements are in it and it can grow as the program is running. It also shows how to read and write data from a file, efficiently search through an array-based container, sort values, and more.</p>
<ul>
<li><p><a target="_blank" href="https://playbackpress.com/books/cppbook/chapter/6/1">6.1 <code>vector</code></a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/cppbook/chapter/6/2">6.2 Passing a <code>vector</code> to a function</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/cppbook/chapter/6/3">6.3 Advanced features of <code>vector</code>s</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/cppbook/chapter/6/4">6.4 Reading from a file and storing in a <code>vector</code></a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/cppbook/chapter/6/5">6.5 Linear search and binary search</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/cppbook/chapter/6/6">6.6 Bubble sort</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/cppbook/chapter/6/7">6.7 Writing to a file</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/cppbook/chapter/6/8">6.8 Two dimensional <code>vector</code>s</a></p>
</li>
</ul>
<h3 id="heading-hands-on-practice-5"><strong>Hands-On Practice</strong></h3>
<p>Now that you have reviewed the guided code walk-throughs, write a program to read in whole words from a file and store them in a vector of strings. Create a simple text file (.txt) using your coding editor. Then add a few sentences of text to it. Strip any punctuation marks from the words and make them all lowercase letters. Only store a word in the vector if it is not already present.</p>
<h2 id="heading-part-7-structured-data"><strong>Part 7: Structured Data</strong></h2>
<p>This section describes how to use structured data types. Structured data types allow you to group related data together so that it can be passed around easily.</p>
<ul>
<li><p><a target="_blank" href="https://playbackpress.com/books/cppbook/chapter/7/1">7.1 Simple <code>struct</code></a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/cppbook/chapter/7/2">7.2 Hierarchical <code>struct</code>s</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/cppbook/chapter/7/3">7.3 <code>vector</code>s as members of <code>struct</code>s</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/cppbook/chapter/7/4">7.4 <code>struct</code>s with a <code>vector</code> of objects</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/cppbook/chapter/7/5">7.5 Calculus with <code>struct</code>s</a></p>
</li>
</ul>
<h3 id="heading-hands-on-practice-6"><strong>Hands-On Practice</strong></h3>
<p>Now that you have reviewed the guided code walk-throughs, write a program that has a struct to represent a cell phone. Every cell phone has a model name and manufacturer along with a camera with a mega-pixel resolution. For example, a user may want to store information about an Apple IPhone X with a 12 MP camera or a Google Pixel 4 with a 16 MP camera.</p>
<p>Your program will create three cell phone objects, fill them, and then add them to a vector. Lastly, print out the information about each cell phone on the screen.</p>
<p>Write a function that takes a cell phone object by reference and prompts the user to enter in the model, manufacturer, and camera resolution. Write another function that prints information about a cell phone. Write a function that takes a vector of cell phones and prints each one.</p>
<h2 id="heading-part-8-pointers"><strong>Part 8: Pointers</strong></h2>
<p>This section describes pointers in C/C++. A pointer is a variable that holds the address of another variable. Pointers are important because they allow us to use a special section of memory called the 'heap'. This section discusses the different types of memory that can be used in a program (global, local, and dynamic).</p>
<ul>
<li><p><a target="_blank" href="https://playbackpress.com/books/cppbook/chapter/8/1">8.1 Simple pointers</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/cppbook/chapter/8/2">8.2 Pointer to an object</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/cppbook/chapter/8/3">8.3 Vectors of pointers</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/cppbook/chapter/8/4">8.4 Arrays are pointers</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/cppbook/chapter/8/5">8.5 Passing data to functions with pointers</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/cppbook/chapter/8/6">8.6 Comparing pointers</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/cppbook/chapter/8/7">8.7 Three types of variables- global, local, and dynamic</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/cppbook/chapter/8/8">8.8 Dynamic variables example</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/cppbook/chapter/8/9">8.9 Dangling pointers and null pointers</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/cppbook/chapter/8/10">8.10 Dynamic array of students</a></p>
</li>
</ul>
<h3 id="heading-hands-on-practice-7"><strong>Hands-On Practice</strong></h3>
<p>Now that you have reviewed the guided code walk-throughs, write a program that will read a sequence of words from the keyboard and store them in a dynamic array of strings. Use the word 'quit' as the word that terminates the input. Print the words back to the screen in the order in which they were entered, each on its own line. Do not store the same word twice.</p>
<p>Up until now, the size of an array has been determined at compile time. Now that you know about pointers and about the keyword <code>new</code>, write a program which is not restricted to selecting an upper bound at compile time for the number of words which can be read in.</p>
<p>One way to do this is to use <code>new</code> to create arrays of strings on the fly. Each time an array fills up, dynamically create an array which is twice as large, copy over the contents of the existing array to the new array, and continue (remember to <code>delete</code> the original array). Start with an array of 5 elements.</p>
<p>Here is an example of the output:</p>
<pre><code class="lang-plaintext">Enter in some text and end with the word quit:
This lab asks you to write a program that will read a sequence of words from the keyboard and store them in a dynamic array of strings. Use the word 'quit' as the word that terminates the input. Print the words back to the screen in the order in which they were entered each on its own line. Do not store the same word twice. quit

Doubling Array from 5 to 10
Doubling Array from 10 to 20
Doubling Array from 20 to 40
Doubling Array from 40 to 80
1. This
2. lab
3. asks
4. you
5. to
6. write
7. a
8. program
9. that
10. will
11. read
12. sequence
13. of
14. words
15. from
16. the
17. keyboard
18. and
19. store
20. them
21. in
22. dynamic
23. array
24. strings.
25. Use
26. word
27. 'quit'
28. as
29. terminates
30. input.
31. Print
32. back
33. screen
34. order
35. which
36. they
37. were
38. entered
39. each
40. on
41. its
42. own
43. line.
44. Do
45. not
46. same
47. twice.
Press any key to continue . . .
</code></pre>
<h2 id="heading-part-9-object-oriented-programming"><strong>Part 9: Object-Oriented Programming</strong></h2>
<p>This section discusses object-oriented programming using classes in C++. A class is like a <code>struct</code>, except that in addition to collecting data, it also collects methods that work on that data. This is called encapsulation. It also discusses inheritance and polymorphism that make it easier to reuse code.</p>
<ul>
<li><p><a target="_blank" href="https://playbackpress.com/books/cppbook/chapter/9/1">9.1 Simple class</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/cppbook/chapter/9/2">9.2 A class with data members</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/cppbook/chapter/9/3">9.3 A class with objects for data members</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/cppbook/chapter/9/4">9.4 Common word analysis</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/cppbook/chapter/9/5">9.5 Student and course registration system</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/cppbook/chapter/9/6">9.6 Inheritance and polymorphism</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/cppbook/chapter/9/7">9.7 Shape inheritance hierarchy</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/cppbook/chapter/9/8">9.8 Inheritance and polymorphism in C++</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/cppbook/chapter/9/9">9.9 Copy Constructor Example</a></p>
</li>
</ul>
<h3 id="heading-hands-on-practice-8"><strong>Hands-On Practice</strong></h3>
<p>Now that you have reviewed the guided code walk-throughs, write a few programs:</p>
<h4 id="heading-problem-1-4"><strong>Problem 1</strong></h4>
<p>Problem 1 asks you to create a Date class to represent a date.</p>
<p>There should be an int for the day number, month number, and year number declared in the private section. Instead of having a setter for each of those, have one method called setDate(int m, int d, int y) that sets the date. You can have a getter method for each piece of data.</p>
<p>Add two constructors: one that takes no data and sets the date to 1/1/2000, and another that takes three ints to set the date.</p>
<p>Include a print() method that will print the date in this format: MM/DD/YYYY and a method called printLong() that prints in this format: <code>MonthName Day, Year</code>. For example, the first day of the 21st century should print <code>January 1, 2000</code>.</p>
<p>Include a method to add some number of days, months, and years to a Date:</p>
<pre><code class="lang-cpp"><span class="hljs-function"><span class="hljs-keyword">void</span> <span class="hljs-title">addDays</span><span class="hljs-params">(<span class="hljs-keyword">int</span> d)</span>
<span class="hljs-keyword">void</span> <span class="hljs-title">addMonths</span><span class="hljs-params">(<span class="hljs-keyword">int</span> m)</span>
<span class="hljs-keyword">void</span> <span class="hljs-title">addYears</span><span class="hljs-params">(<span class="hljs-keyword">int</span> y)</span></span>
</code></pre>
<h4 id="heading-problem-2-4"><strong>Problem 2</strong></h4>
<p>Problem 2 asks you to create some related classes for playing card games. The data needed to be stored for a card is a numeric value and a suit. A card is responsible for being able to display itself. For example, when we want to display a two of hearts, ten of diamonds, jack of clubs, or ace of spades, the output would look like this:</p>
<pre><code class="lang-plaintext">2 of Hearts
10 of Diamonds
J of Clubs
A of Spades
</code></pre>
<p>Next, create a deck class. A deck is a collection of fifty-two cards. Each card is unique. There should be a card with a numeric value from two to the ace in each of the four suits. The responsibilities of the deck class are that it must be able to shuffle itself and deal out some number of cards from the deck. To shuffle the deck, you will need to randomly move cards around in the deck. You can generate a random number in C++ using the rand() function.</p>
<p>When dealing out cards, the user will ask the deck for some number of cards. If there are enough cards in the deck, it should deal those cards out. Once a card is dealt from the deck, it cannot be dealt again from the same deck. The user will pass in a vector of cards and the deck will fill it with the number of cards requested. If there aren't enough cards in the deck, print an error message and then kill the program with an exit(0).</p>
<p>When creating a class, you always have to think about the data needed for the class and the responsibilities of the class. The data for the class should be private and an interface to the class should be provided.</p>
<p>Think about how each card and deck should be constructed. Write at least one constructor for each class. Write the card class first and test it in a driver program. Then work on the deck class.</p>
<p>To test the deck, create a deck object, ask for 52 cards, and print each of those cards to the screen.</p>
<p>Next, alter the program so that it will allow a person to evaluate the probabilities of getting certain poker hands. Poker is a card game played with a deck of 52 cards. In this program, you only need to handle the five card variety of poker. The program will repeatedly get groups of five cards from the deck and count how many times each hand occurs.</p>
<p>In most variations of poker, the precedence of hands goes like this:</p>
<pre><code class="lang-plaintext">Royal Flush - 5 cards that are a straight (5 cards in numeric order) and a flush (5 cards that are the same suit) from the 10 to the Ace.
Straight Flush - 5 cards that are a straight (5 cards in numeric order) and a flush (5 cards that are the same suit).
Four of a Kind - any 4 cards with the same number.
Full House - three of a kind (3 cards with the same number) and a pair (two cards with the same number).
Flush - any 5 cards of the same suit.
Straight - any 5 cards in numeric order.
Three of a Kind - any 3 cards with the same number.
Two Pair - 2 sets of pairs.
Pair - any 2 cards with the same number.
High Card in your Hand - if you don't have any of the above, your high card is the best hand.
</code></pre>
<p>You will need to create additional classes with more responsibilities than the Deck and Card classes.</p>
<p>Your program needs an 'evaluator' that can look at a collection of cards and determine the best hand that can be made from those cards. In order to determine probabilities, deal a great number of hands and keep track of how many times each hand shows up.</p>
<p>In other words, your program might create 100,000 collections of five cards to be evaluated. The evaluator will count how many times a royal flush comes up, how many times a straight flush comes up, an so on. Your program will show the probabilities as percentages of the likelihood of getting each hand.</p>
<p>Below is a driver to illustrate how to use the evaluator:</p>
<pre><code class="lang-cpp"><span class="hljs-function"><span class="hljs-keyword">int</span> <span class="hljs-title">main</span><span class="hljs-params">()</span>
</span>{
    <span class="hljs-comment">//five card evaluator</span>
    <span class="hljs-comment">//create a poker evaluator for 5 card poker</span>
    PokerEvaluator fiveCardPokerEvaluator;

    <span class="hljs-comment">//set the number of hands to play - one hundred thousand this time</span>
    fiveCardPokerEvaluator.setNumberOfHandsToPlay(<span class="hljs-number">100000</span>);

    <span class="hljs-comment">//play all the hands and track the statistics, then print the results to the screen</span>
    fiveCardPokerEvaluator.playAndDisplay();

    <span class="hljs-keyword">return</span> <span class="hljs-number">0</span>;
}
</code></pre>
<h2 id="heading-part-10-data-structures"><strong>Part 10: Data Structures</strong></h2>
<p>This section describes how to build some common data structures: a hash table, a binary search tree, and a graph. It also describes how to use the STL <code>unordered_map</code> class.</p>
<ul>
<li><p><a target="_blank" href="https://playbackpress.com/books/cppbook/chapter/10/1">10.1 Simple linked list</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/cppbook/chapter/10/2">10.2 Simple hash table</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/cppbook/chapter/10/3">10.3 More complex hash table</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/cppbook/chapter/10/4">10.4 STL <code>unordered_map</code></a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/cppbook/chapter/10/5">10.5 Binary search tree</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/cppbook/chapter/10/6">10.6 Graph adjacency matrix</a></p>
</li>
</ul>
<h3 id="heading-hands-on-practice-9"><strong>Hands-On Practice</strong></h3>
<p>Now that you have reviewed the guided code walk-throughs, write a program that includes a class which is equivalent of the <code>vector</code> called SafeArray. SafeArray has a method called <code>at</code> that returns the element at the specified position.</p>
<p>A SafeArray maintains a pointer to an array on the heap. Use the pointer to make the array grow and shrink with calls to <code>push_back</code> and <code>pop_back</code>.</p>
<p>The SafeArray will have a method called <code>size</code> that returns the number of items in it. Include a default constructor that sets the initial size of the underlying array to hold 10 elements. Include a destructor to <code>delete</code> the array when the SafeArray falls out of scope.</p>
<h2 id="heading-part-11-sqlite-databases"><strong>Part 11: SQLite Databases</strong></h2>
<p>This section describes working with a SQLite database. SQLite is my favorite Database Management System (DBMS), because it is powerful and easy to add to any program. This section assumes that you are familiar with relational database design and SQL.</p>
<p>The first program shows how to use the API to write and run SQL queries in a C++ program. In the second, some of the repetitive code is abstracted into a separate class. In the third, transactions in SQLite are explained and it shows that they can be used to ensure the ACID properties of a database:</p>
<ul>
<li><p><a target="_blank" href="https://playbackpress.com/books/cppbook/chapter/11/1">11.1 The C++ SQLite API</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/cppbook/chapter/11/2">11.2 An Object Oriented Auction Program</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/cppbook/chapter/11/3">11.3 SQLite Transactions</a></p>
</li>
</ul>
<h3 id="heading-hands-on-practice-10"><strong>Hands-On Practice</strong></h3>
<p>Extend the auction program from the second playback to include a method that prints the names and email addresses of all of the users who won an auction. Then write a method that prints an item followed by the names and email addresses of anyone who made a bid on the item.</p>
<h2 id="heading-comments-and-feedback"><strong>Comments and Feedback</strong></h2>
<p>You can find all of these code playbacks in my free book, <a target="_blank" href="https://playbackpress.com/books/cppbook/">An Animated Introduction to Programming in C++</a>. There are more free books here:</p>
<ul>
<li><p><a target="_blank" href="https://playbackpress.com/books/pybook">An Animated Introduction to Programming with Python</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/sqlbook">Database Design and SQL for Beginners</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/workedsqlbook">Worked SQL Examples</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/sqlitebook">Programming with SQLite</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/webdevbook">An Introduction to Web Development from Back to Front</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/cljbook">An Animated Introduction to Clojure</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/exbook">An Animated Introduction to Elixir</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/rubybook">A Brief Introduction to Ruby</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/flutterbook">Mobile App Development with Dart and Flutter</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/patternsbook">OO Design Patterns with Java</a></p>
</li>
<li><p><a target="_blank" href="https://playbackpress.com/books/wordzearchbook">How I Built It: Word Zearch</a></p>
</li>
</ul>
<p>Comments and feedback are welcome via email: <a target="_blank" href="mailto:mark@playbackpress.com">mark@playbackpress.com</a>.</p>
<p>If you'd like to support my work and help keep Playback Press free for all, consider donating using <a target="_blank" href="https://github.com/sponsors/markm208">GitHub Sponsors</a>. I use all of the donations for hosting costs. Your support helps me continue creating educational content like this. Thank you!</p>
 ]]>
                </content:encoded>
            </item>
        
    </channel>
</rss>
