{"info":{"_postman_id":"7179f23f-072f-42af-af3f-6d0dd0de7d52","name":"NewHacks 2023","schema":"https://schema.getpostman.com/json/collection/v2.0.0/collection.json","toc":[],"description":"<html><head></head><body></body></html>","owner":"25806974","collectionId":"7179f23f-072f-42af-af3f-6d0dd0de7d52","publishedId":"2s9YXfa2gr","public":true,"customColor":{"top-bar":"FFFFFF","right-sidebar":"303030","highlight":"FF6C37"},"publishDate":"2023-11-05T06:28:52.000Z"},"item":[{"name":"documents","item":[{"name":"upload","id":"5b8db679-c670-4c12-9f5b-b0326a565626","protocolProfileBehavior":{"disableBodyPruning":true},"request":{"method":"POST","header":[],"body":{"mode":"raw","raw":"{ \"texts\": [\"foo\", \"foo\", \"foo\", \"bar\", \"bar\"],\n    \"courseName\": \"topic1\"\n}","options":{"raw":{"language":"json"}}},"url":"http://127.0.0.1:5555/documents/upload","urlObject":{"protocol":"http","port":"5555","path":["documents","upload"],"host":["127","0","0","1"],"query":[],"variable":[]}},"response":[{"id":"a298ea6b-2621-4b15-be4b-8e04d256e7a1","name":"Success","originalRequest":{"method":"POST","header":[],"body":{"mode":"raw","raw":"{ \"texts\": [\"foo\", \"foo\", \"foo\", \"bar\", \"bar\"],\n    \"courseName\": \"topic1\"\n}","options":{"raw":{"language":"json"}}},"url":"http://127.0.0.1:5555/documents/upload"},"status":"OK","code":200,"_postman_previewlanguage":"json","header":[{"key":"Server","value":"Werkzeug/3.0.1 Python/3.11.1"},{"key":"Date","value":"Sun, 05 Nov 2023 03:03:22 GMT"},{"key":"Content-Type","value":"application/json"},{"key":"Content-Length","value":"48"},{"key":"Access-Control-Allow-Origin","value":"http://localhost:3000"},{"key":"Connection","value":"close"}],"cookie":[],"responseTime":null,"body":"{\n    \"response\": \"Embeddings uploaded successfully\"\n}"}],"_postman_id":"5b8db679-c670-4c12-9f5b-b0326a565626"}],"id":"1f28865f-5ed1-4243-95b6-b20a5520886a","_postman_id":"1f28865f-5ed1-4243-95b6-b20a5520886a","description":""},{"name":"chat","item":[{"name":"Get-Response","id":"bda4d848-ab47-4ac3-8f19-5fe7126f8832","protocolProfileBehavior":{"disableBodyPruning":true},"request":{"method":"POST","header":[],"body":{"mode":"raw","raw":"{\n    \"query\": \"What is the name of this course?\",\n    \"courseName\": \"CS105\"\n}","options":{"raw":{"language":"json"}}},"url":"http://127.0.0.1:5555/chat/get-response","description":"<p>Takes in a query for a specific course and returns a response from searching the Vector Database. Will respond \"I don't know\" if unsure.</p>\n","urlObject":{"protocol":"http","port":"5555","path":["chat","get-response"],"host":["127","0","0","1"],"query":[],"variable":[]}},"response":[{"id":"8b0901aa-cec1-4cb6-9686-85ddcc554c7a","name":"Success","originalRequest":{"method":"POST","header":[],"body":{"mode":"raw","raw":"{\n    \"query\": \"What is the name of this course?\",\n    \"courseName\": \"CS105\"\n}","options":{"raw":{"language":"json"}}},"url":"http://127.0.0.1:5555/chat/get-response"},"status":"OK","code":200,"_postman_previewlanguage":"json","header":[{"key":"Server","value":"Werkzeug/3.0.1 Python/3.11.6"},{"key":"Date","value":"Sun, 05 Nov 2023 05:51:20 GMT"},{"key":"Content-Type","value":"application/json"},{"key":"Content-Length","value":"35"},{"key":"Access-Control-Allow-Origin","value":"http://localhost:5555"},{"key":"Connection","value":"close"}],"cookie":[],"responseTime":null,"body":"{\n    \"response\": \"Exploring Computing\"\n}"}],"_postman_id":"bda4d848-ab47-4ac3-8f19-5fe7126f8832"}],"id":"4f96beef-0581-4614-bceb-dbbfa625c536","_postman_id":"4f96beef-0581-4614-bceb-dbbfa625c536","description":""},{"name":"Transcribe","id":"8681241f-3ec7-49d9-a9e0-e7dbcbf3cd27","protocolProfileBehavior":{"disableBodyPruning":true},"request":{"method":"DELETE","header":[],"body":{"mode":"raw","raw":"{\n    \"yturl\": \"https://youtu.be/vAoB4VbhRzM?si=CIoEglIDIvGkRt9R\"\n}","options":{"raw":{"language":"json"}}},"url":"http://127.0.0.1:5000/v1/transcribe","description":"<p>Transcribe a YouTube video</p>\n","urlObject":{"protocol":"http","port":"5000","path":["v1","transcribe"],"host":["127","0","0","1"],"query":[],"variable":[]}},"response":[{"id":"ed746887-3734-49c1-a14c-332b9543e1cd","name":"Success","originalRequest":{"method":"POST","header":[],"body":{"mode":"raw","raw":"{\n    \"yturl\": \"https://youtu.be/vAoB4VbhRzM?si=CIoEglIDIvGkRt9R\"\n}","options":{"raw":{"language":"json"}}},"url":"http://127.0.0.1:5000/endpoint/transcribe"},"status":"OK","code":200,"_postman_previewlanguage":"json","header":[{"key":"Server","value":"Werkzeug/3.0.1 Python/3.11.0"},{"key":"Date","value":"Sat, 04 Nov 2023 19:52:05 GMT"},{"key":"Content-Type","value":"application/json"},{"key":"Content-Length","value":"3265"},{"key":"Connection","value":"close"}],"cookie":[],"responseTime":null,"body":"{\n    \"transcription\": \" Firebase, a suite of tools for building apps and managing infrastructure on top of Google Cloud Platform. It was founded by James Tamplin and Andrew Lee in 2011, after they discovered that developers were using their chat software to manage non-chat application data. This inspired them to create a real-time database, a JSON database, that automatically stays in sync with your front-end application. It was later expanded to support user authentication and website hosting to act as a complete back-end as a service. In 2014 it was acquired by Google, where it was further expanded with serverless computing via Cloud Functions, push notifications via Cloud Messaging, and other Google services like Analytics and AdMob. In 2017 Google acquired Fabric from Twitter and also launched a new document database called Firestore to support a wider range of applications. Most importantly though, Firebase provides software development kits for virtually every platform to manage and scale this infrastructure with little to no back-end code. To build a full-stack application right now, create a free Firebase project, then open up some code for your favorite front-end platform. Install the Firebase SDK, then connect it to the cloud with your project credentials. Once initialized, you can start interacting with your back-end resources. First, we might want to know if the user is logged in or not. We can listen to the current user with the onAuthStateChanged function. The user will be null at first, but we can log them in with their Google account using the signInWithPopup function. Now that we have a user logged in, we might want to store something in a database. We can make a reference to a document in Firestore, then write JSON data to it while making a reference to the current user's user ID. But the amazing thing is that we can listen to updates to that data in real time by simply referencing the document using the onSnapshot function. Anytime the data changes on the server, it'll be reflected in the UI with zero latency thanks to optimistic updates out of the box. But that doesn't seem very secure. How do we control who has access to the database? Firestore security rules allow you to define access control logic in a simple readable format with common expression language. You can do almost everything from the front end, but when you do need to run server-side code, Firebase Cloud Functions provides a tightly integrated serverless backend. Not only does it allow you to create HTTP endpoints, but functions can also be triggered in the background based on events that happen in your project, like writes to the database, user authentication events, file uploads, and many others. When developing locally, Firebase has an emulator suite to run and test your code in a mock environment. When it's time to deploy, run the Firebase Deploy command to push your code to the cloud and allocate infrastructure to run it at any scale. This has been Firebase in 100 seconds. If you're ready to build a serious app with Firebase, I can think of no better place to learn than Fireship.io, the web app I built with Firebase to teach Firebase. Thanks for watching, and I will see you in the next one.\",\n    \"uuid\": \"vAoB4VbhRzM\"\n}"}],"_postman_id":"8681241f-3ec7-49d9-a9e0-e7dbcbf3cd27"},{"name":"Add","id":"e1129879-f0b4-4348-8add-c16c6fb37015","protocolProfileBehavior":{"disableBodyPruning":true},"request":{"method":"POST","header":[],"body":{"mode":"raw","raw":"{\n    \"yturl\": \"https://youtu.be/nOeh-WP4Xf0?si=n6ohMtTx3NQpZRL1\",\n    \"course\": \"CS105\"\n}","options":{"raw":{"language":"json"}}},"url":"http://127.0.0.1:5555/v1/add","description":"<p>Add a new video to a course. This function will transcribe the video, embed, and store files to the Redis database.</p>\n","urlObject":{"protocol":"http","port":"5555","path":["v1","add"],"host":["127","0","0","1"],"query":[],"variable":[]}},"response":[{"id":"a9aede68-3a59-41b4-a102-661811d2df6e","name":"Fail","originalRequest":{"method":"POST","header":[],"body":{"mode":"raw","raw":"{\n    \"yturl\": \"https://youtu.be/KuLxqrdmais?si=8tLwtpdw7QIpQoFM\",\n    \"course\": \"CS105\"\n}","options":{"raw":{"language":"json"}}},"url":"http://127.0.0.1:5555/v1/add"},"status":"BAD REQUEST","code":400,"_postman_previewlanguage":"json","header":[{"key":"Server","value":"Werkzeug/3.0.1 Python/3.11.0"},{"key":"Date","value":"Sun, 05 Nov 2023 03:08:09 GMT"},{"key":"Content-Type","value":"application/json"},{"key":"Content-Length","value":"35"},{"key":"Access-Control-Allow-Origin","value":"http://localhost:5555"},{"key":"Connection","value":"close"}],"cookie":[],"responseTime":null,"body":"\"Video has already been processed\""},{"id":"cbf37573-b164-4bad-bedd-d2c89d8e9a53","name":"Success","originalRequest":{"method":"POST","header":[],"body":{"mode":"raw","raw":"{\n    \"yturl\": \"https://youtu.be/TiipidPdVw4?si=Qqcl_FF3maWZILRg\",\n    \"course\": \"CS105\"\n}","options":{"raw":{"language":"json"}}},"url":"http://127.0.0.1:5555/v1/add"},"status":"OK","code":200,"_postman_previewlanguage":"json","header":[{"key":"Server","value":"Werkzeug/3.0.1 Python/3.11.0"},{"key":"Date","value":"Sun, 05 Nov 2023 03:14:21 GMT"},{"key":"Content-Type","value":"application/json"},{"key":"Content-Length","value":"10414"},{"key":"Access-Control-Allow-Origin","value":"http://localhost:5555"},{"key":"Connection","value":"close"}],"cookie":[],"responseTime":null,"body":"{\n    \"course\": \"CS105\",\n    \"summary\": \"In this video, we will discuss how to compress music. We will learn about the MP3 format and how it uses psychoacoustics and Huffman encoding to reduce the size of music files. We will also compare MP3 to other audio formats such as AAC and WMA.\",\n    \"title\": \"Stanford CS105: Introduction to Computers | 2021 | Lecture 3.3 Digital Music: Compress that Music\",\n    \"transcript\": \" Welcome to Exploring Computing. Today's video is digital music. Part 3, compress that music. As I suggested in the last video, even though CD audio allows us to store music digitally, that's not actually what most of you are listening to. Now, if the standards were developed right now, it's possible we just stick with CD audio. But because the internet music standards were actually developed 20 years ago, back when your parents were in college, it turns out that there are some issues with CD audio. The problem with CD audio is that CD audio takes up a lot of space. How much space does it take? Well, let's take a look here. Suppose we have a five-minute song, and we're trying to send this through the internet. Let's say, for example, your parents are in a band. There's this new music called punk rock. They create this great punk rock five-minute song, and they want to send it home to their little brother or little sister. So what they're going to do is they're going to go ahead and record that five-minute song, convert it to digital using the techniques we just talked about a little bit earlier. And then the question is, how large is that file? Well, let's go ahead and do the math here. Five minutes times 60 seconds per minute times 44,100 samples per second times two channels, one for the left and the right speaker. So remember, we always have to double that if we've got two channels, times 16 bits per sample. And so it turns out, if we calculated this all out, it takes about 50 and 1 1⁄2 megabytes. Now, that doesn't sound horrible by today's standards. But again, going back to 20 years ago, when your parents were in college, they're going to send that through the internet to their little brother or little sister at home. And the question is, how long is your little brother or little sister going to take to download that brand new five-minute punk rock song? Well, it turns out it's going to take about five hours. And the other little piece of information that you may be missing is that the telephone back then was used for both the internet and for voice. And you had to choose which one you were using it for. So for five hours, well, the little brother or little sister is downloading that five-minute song. Nobody else can use the telephone. So clearly, this is a problem. And so the solution is MP3 files. And we're actually going to be talking about MP3 files in this video. But I do want to mention that there are several other formats that are very closely related. So if you're listening to music on an Apple device that you bought from iTunes, that's probably going to use AAC. And if you're possibly listening on a Windows device, you might be using WMA. Both the AAC and the WMA standards follow very closely on MP3. So almost everything I'm talking about here with MP3 is going to be very similar in terms of the other audio formats that you might be using. There is a newer format that's quite different that doesn't bother doing as much compression. And we'll talk about that in the very last video of this series. OK, so we've got a problem, which is that our music is taking up too much space. We need to reduce the amount of space it takes so that we can transfer these files around on the internet in a reasonable amount of time. So what are we going to do? Well, what we're going to do is we're going to perform a number of different steps to reduce the amount of space this audio file takes. The first thing we're going to do is we're going to perform a fast Fourier transform. I don't want to go into the mathematical details on this. To be honest, I didn't like doing fast Fourier transforms in college. And that's one of the reasons why I stopped being an electrical engineer. I'm now a computer scientist. But the basic idea behind a fast Fourier transform is any sound wave, or any wave for that matter, can be broken down into constituent parts where each of the parts is a single frequency. So we might have a song playing. And we might be able to break that song down into, oh, here's a 60 hertz wave. Here's a 80 hertz wave. Here's 120 hertz wave. They all have different amplitudes. But when they all combine together, that's what we're actually listening to. So we're going to go ahead and perform this fast Fourier transform and determine what the individual constituent frequencies are. Now what we're going to do is we're going to use something called psychoacoustics to eliminate some of these frequencies. So psychoacoustics is the science of how humans actually listen to sound. So it turns out there's a bunch of sounds we just don't hear. Most notably, we probably all know that there are certain frequencies that are just too high pitched for us to hear. So for example, a dog whistle works because when you blow a dog whistle, there's a very high pitched, high frequency sound that comes out of it. And the dogs can all hear it. But the humans can't because it's too high for humans to hear. There's also other tricks that we can use to eliminate certain sounds from our information. So for example, if there's a loud sound and then there's a much softer sound that's in a nearby frequency, humans just will completely ignore the softer sound. So what we're going to do is we're going to use our psychoacoustics, and we're going to start tossing out part of this music. Now one thing to note here is we are losing information. So previously when we talked about compressing images, we talked about compressing using the JPEG technique. We talked about compressing using the PNG technique. Remember, the PNG technique was lossless. No information was lost. We were able to reduce the amount of space those files took, but we were able to completely reproduce the bitmap image that we started with. In contrast, the JPEGs lose information, and the MP3s are going to work similarly. So one way of thinking about it is, suppose I take Beethoven's Fifth, the original CD audio sound, and I perform the psychoacoustic analysis on it. If I perform this well, hopefully the music will sound exactly the same to me, but think about my poor dog here. My dog's listening to the original CD quality sound. There's these beautiful high-frequency tones, and I don't hear any of that, so I go ahead and toss them out. I replayed the music in its new MP3 format, and my dog is like, what did you do? What happened to all those beautiful high-frequency notes? They're all gone. All right, so we are losing information here. We're not done yet, though. There's another step we need to take, and that's called performing a Huffman encoding. Now, I don't want to go into the details on this, but the basic idea here is that a Huffman coding looks for sequences which appear frequently and sequences that don't appear very frequently. What it's going to do is it's going to store the sequences which appear frequently in less space than the sequences that appear infrequently. I like to show this by analogy. So many of you may be familiar with at least the concept of Morse code, and so probably the most famous Morse code message is SOS for save our ship. So you can imagine the Titanic's there. The Titanic's hit an iceberg, and it's sinking, and they're transmitting this message using Morse code while Rose and Jack are freezing out in the water. And so the message is SOS, save our ship. And the famous symbol for SOS in Morse code is dot, dot, dot, which stands for S, dash, dash, dash, which stands for O, and dot, dot, dot, which stands for S. So they'd be translating dot, dot, dot, dash, dash, dot, dot, dot, and then they would just repeat that. So how is this relevant to our discussion? Well, it turns out in Morse code, we can obviously transmit all the different letters, but the amount of space it takes to transmit a letter varies depending upon the frequency of the letter. So the letter E, that's a super common letter. And so we're going to transmit an E just with a single dot. And A, that's pretty common, too. So we're going to transmit an A by a dot, dash. In contrast to Q, that doesn't show up very often. So we're going to transmit that in a dash, dash, dot, dash. And so a Q will take four times as much space or take four times as long to transmit as an E. And so the Huffman encoding is going to do something very similar with our music here. OK, so we performed our psychoacoustic analysis. We've done our Huffman encoding. We have a new version of our song. It's stored in this MP3 format. Let's take a quick look at how much space the MP3 is going to take as opposed to the original CD audio. The first thing we need to remember is that MP3 is a lossy format, just like JPEG. And just like JPEG, the amount of loss can be set. So I can decide I really want this to sound as close to pristine as possible, or I can decide I'm going to be listening to this in the gym. So I really don't care how good the quality is. It's going to be a very noisy listening environment anyway. So some common settings are 128 kilobits per second and 192 kilobits per second. There are some others that you can use as well. Let's assume that we are using our 128 kilobits per second. We've got our 5-minute song, 60 seconds per minute, 128 kilobits per second. That gives us 38,400 kilobits total for our 5-minute song. And then I need to divide that by 8 bits per byte. And that's going to give us 4 and 1⁄2 megabytes. Now, remember, our original CD audio song was 50.47 megabytes. We're able to listen to the exact same music in 4 and 1⁄2 megabytes by converting it to an MP3. So you can see we've saved a huge amount of space at a potential loss in quality, where, again, we have at least some control over the quality loss. In the next video, I want to explicitly look at the relationship between analog and digital. This is something we've been kind of dancing around with all throughout last lecture and this lecture. And it's a really key topic. So I want to spend some time explicitly looking at it.\",\n    \"uuid\": \"TiipidPdVw4\"\n}"},{"id":"2515d2a0-1fb3-4b76-8753-9c3a676d9a26","name":"Success","originalRequest":{"method":"POST","header":[],"body":{"mode":"raw","raw":"{\n    \"yturl\": \"https://youtu.be/HLdDvQym5xk?si=lPtcqDY3Jg4wzsS3\",\n    \"course\": \"CS105\"\n}","options":{"raw":{"language":"json"}}},"url":"http://127.0.0.1:5555/v1/add"},"status":"OK","code":200,"_postman_previewlanguage":"json","header":[{"key":"Server","value":"Werkzeug/3.0.1 Python/3.11.6"},{"key":"Date","value":"Sun, 05 Nov 2023 04:33:34 GMT"},{"key":"Content-Type","value":"application/json"},{"key":"Content-Length","value":"10858"},{"key":"Access-Control-Allow-Origin","value":"http://localhost:5555"},{"key":"Connection","value":"close"}],"cookie":[],"responseTime":null,"body":"{\n    \"course\": \"CS105\",\n    \"summary\": \"In this video, we will learn how to format links. We will learn about pseudo classes and how to use them to style links.\\n\\nWe will also learn about the different colors associated with links and how to change them.\\n\\nFinally, we will learn about some of the other pseudo classes that are available and how to use them.\",\n    \"title\": \"Stanford CS105: Introduction to Computers | 2021 | Lecture 8.3 Linking Webpages: Formatting Links\",\n    \"transcript\": \" Welcome to Exploring Computing. Today's video is Linking Webpages, Part 2, Formatting Links. So in the last video, we took a look at linking different web pages and what our options are when using links. In this video, we're going to take a look at how you can format your links. And along the way, we'll learn about pseudo classes, which can be used for quite a number of other formatting purposes in addition to links. So you've all probably seen a link that looks like this. This is the standard appearance of a link. It's underlined, and it's blue. So let's first take care of that underline. So if you want to play around with the underline, that's actually controlled by the text decoration style property. And you can get rid of it by setting text decoration to none. So here I've got a rule that says, hey, all anchors. And remember, these are being created by a href, so that's an anchor tag. All anchors, turn the text decoration off. You should be cautious about this, though, because people see that underline and they think it's a link. Also, as a side note, a related note, be cautious about underlining things that aren't links, because people are used to things being underlined as being links. So they're going to try and click on it like, why is this thing not working? This website's busted. All right, so if you decide you don't like that underline for your links, now you've got an issue where you've got a bunch of things that you know are links on your web page, but how does the user know that they're links? So here I've got a bunch of colored words, and are these links? Are they not links? Which of these are links? It's really hard to say. And so, 160 students, we'll talk about this later in the quarter. We've got a lecture on human-computer interaction. And there's what's sometimes referred to as an affordance, which is a way of saying your user interface should make it clear to the user that there's some sort of interaction that can occur. And ideally, it should give you a sense of what interaction can occur. And so a common example of this is we've all been, we've had those glass doors. And if there's a push bar on there, it's very clear that you're supposed to push it. And if there's a handle that's easy to grab, that's generally a sign that you should pull it. So those are called affordances. They're something that the human brain looks at and says, oh, I see how I'm supposed to interact with this. And by removing the underlines here, you've basically removed the affordance that's telling people that, oh, that's a link. I should go ahead and click on it. So be cautious. All right. You can also, if you want to gussy them up, you can go the other direction and be like, hey, I don't want just an underline. I want an overline and an underline. So it turns out you can do this by just setting text decoration and putting both overline and underline with a space between the two. And that'll create this effect you're seeing here. OK, another thing that happens with links is the links are different colors, right? So we've seen the standard links. They're pretty boring. So if you don't want to use the standard links, I think that totally makes sense. But we have seen these all before. So I'm going to start off with these for now. We've got these standard links. And if you've played around with the web for a while, you probably realize that that first article, that's a link to another web page. And the second one is a link to another web page, but I've already visited that other web page. It turns out that there's a third color associated with links. I don't know how many people actually realize this. I don't think I did until I started playing around with the back end, learning how to actually make the web pages. But there's a third color where you actually click on the link while you are currently pressed down on that link with the mouse. And I assume the same thing happens with a finger. Although I haven't really noticed it with a finger. But if you are actively pressing down before you release the mouse, and presumably before you lift your finger, it actually changes to a third color. So there's a standard color, there's a visited color, and then there's a color while actively clicking on the link. So there's a problem with this. And the problem is, how are we going to do this? How are we going to create these colors? So one thing you can imagine is, I can have one class for links that I haven't visited and a second class for links that I have visited. So dot link, hey, the color's blue. Dot visited, the color's purple. But the problem with this is, OK, here's the HTML for that. I've got the two links, and one of my markers class equals link and one of my markers class equals visited. But the fact that somebody has visited a page actually varies from one person to another. So unless I serve up different versions of my HTML file to different people, depending on whether or not they visited links, this does not work. I can't have class equals visited. For some people, if they have visited that page before and class not having visited for other people, I can only serve a single version of the HTML file. And so there's no way to distinguish whether an individual person has visited that or not. So this seems to be kind of a problem. I mean, it would be really nice if I could do this. And so it actually turns out the solution basically does look like this, but it's a little bit different because the computer automatically adds this sort of what it refers to as a pseudo class. So it acts as if there's a class on these anchor elements, either link or visited, depending on whether the person has visited that web page or not. But it's sort of added internally by the web browser. And so I serve up just, when my web server copies the HTML file to people, it does not have marked whether it's visited or a regular link because it doesn't know. And then when the person gets that file, their web browser sort of figures out. It's like, oh, I see that's the link. Oh, that link, you've actually visited it. So that's going to fit in this pseudo class visited. I'm going to pretend it is as if there was a class equals visited on it, even though it's not actually in the original HTML source. This one, you haven't visited, so I'm just going to assume that I'm going to act as if this is class equals link instead of the class equals visited, even though, again, none of those are actually present. It's as if there was a class on it, but the class is not actually on the elements. It's something that the web browser is dynamically working out on its own. And we're going to distinguish between real classes and pseudo classes because the pseudo classes are going to have colons in front of them instead of dots in our style sheet. So here I've got three pseudo classes, colon link, colon visited, and colon active. So colon link, that's going to be the pseudo class when I have a link on my web page and the user has not visited that link before. Colon visited, that's going to be the pseudo class associated with an a tag if there's a link on there and the user has actually visited it. And then colon active, that's going to be the pseudo class associated with an a tag when somebody is actually actively clicking on it. Now, when you actually write these out for your style sheet, you actually want to put the a in front of this. So a colon link, a colon visited, a colon active. So we're combining the fact that, hey, I want this to apply to anchor tags, and I don't want to just apply to any anchor tag. I want this to apply to anchor tags where we've got that active pseudo class colon visited or where we've got that active pseudo class colon active. Why do we need to put the a colon there? It turns out there's a bunch of pseudo classes, and some of these actually work on different elements. So just using the example we've got here, a colon active, that's the color when somebody clicks on a link. There's also a button colon active where somebody clicks on a button and you want the button to change color. If we were to just say colon active, it would not be clear to the web browser whether this applies to link colors or to button colors or to both. And I think it would actually just use it for both, but that may not be what you want. So definitely put the a colons in front. And so here's the example again. I've changed the colors because who wants to use the standard blue and purple. So we can see, so I've got my links, and you could say, I'm saying, if I've got a link, normal link, that should appear in red, visited link, that should appear in green, and active link, that should appear in blue. There are a bunch of other pseudo classes. There's actually quite a few. Here's some of the fancier, handier ones. So there's a first child and a last child. So let's say you have a list of items and you want to do something different with the first item in the list. Maybe you want that first item in the list to have a bit of extra margin in front of it. Or maybe the last child, you want to put a line underneath the last item. And so these are going to, you're going to be able to use these on your elements. So you're going to be able to use these in your style sheets to select particular elements. And then there's the nth child. So nth child 3 that says, hey, here's a style rule, but I only want it to apply to the third element of this list of elements. Or let's say you're trying to do zebra striping on a table. That's where you've got some sort of a table and every other line is a different color. So you've got a bunch of dark gray lines and a bunch of light gray lines. It looks a little bit nicer. It's a little bit easier for people to tell what's going on with the table. You can do that using the nth child odd and nth child even. And so that would be a rule where you say, hey, every odd element in this table, I want to use this particular style. And every even element on this table, I'm going to use this other style. So those are pseudo classes. So that's it for our discussion on links. We've learned quite a bit more about links from the HTML side. And we also learned a bit about styling them. And this idea of pseudo classes can come in handy in a bunch of other places as well. All right, I'll talk to you soon. Bye.\",\n    \"uuid\": \"HLdDvQym5xk\"\n}"}],"_postman_id":"e1129879-f0b4-4348-8add-c16c6fb37015"},{"name":"Notes","id":"4697e354-6c8c-4f59-8d78-6e183ddc06c0","protocolProfileBehavior":{"disableBodyPruning":true},"request":{"method":"POST","header":[],"body":{"mode":"raw","raw":"{\n    \"course\": \"CS105\"\n}","options":{"raw":{"language":"json"}}},"url":"http://127.0.0.1:5555/v1/notes","description":"<p>Retrieves all processed videos for the specified course. Responds back with the YouTube video ID as key and summary/title as values.</p>\n","urlObject":{"protocol":"http","port":"5555","path":["v1","notes"],"host":["127","0","0","1"],"query":[],"variable":[]}},"response":[{"id":"910281b0-fd56-41f4-a371-f626fbfb0259","name":"Success","originalRequest":{"method":"POST","header":[],"body":{"mode":"raw","raw":"{\n    \"course\": \"CS105\"\n}","options":{"raw":{"language":"json"}}},"url":"http://127.0.0.1:5555/v1/notes"},"status":"OK","code":200,"_postman_previewlanguage":"json","header":[{"key":"Server","value":"Werkzeug/3.0.1 Python/3.11.0"},{"key":"Date","value":"Sun, 05 Nov 2023 03:42:46 GMT"},{"key":"Content-Type","value":"application/json"},{"key":"Content-Length","value":"507"},{"key":"Access-Control-Allow-Origin","value":"http://localhost:5555"},{"key":"Connection","value":"close"}],"cookie":[],"responseTime":null,"body":"{\n    \"course\": \"CS105\",\n    \"notes\": [\n        {\n            \"TiipidPdVw4\": {\n                \"summary\": \"Stanford CS105: Introduction to Computers | 2021 | Lecture 3.3 Digital Music: Compress that Music\",\n                \"title\": \"Stanford CS105: Introduction to Computers | 2021 | Lecture 3.3 Digital Music: Compress that Music\"\n            }\n        },\n        {\n            \"nOeh-WP4Xf0\": {\n                \"summary\": \"Stanford CS105: Intro to Computers | 2021 | Lecture 3.4 Digital Music: Digital Data vs. Analog World\",\n                \"title\": \"Stanford CS105: Intro to Computers | 2021 | Lecture 3.4 Digital Music: Digital Data vs. Analog World\"\n            }\n        }\n    ]\n}"}],"_postman_id":"4697e354-6c8c-4f59-8d78-6e183ddc06c0"},{"name":"getCourseList","id":"b8f84c79-b464-464f-b28b-799556dc2a61","protocolProfileBehavior":{"disableBodyPruning":true},"request":{"method":"POST","header":[],"url":"http://127.0.0.1:5555/v1/getCourseList","description":"<p>Gets a list of all courses in database.</p>\n","urlObject":{"protocol":"http","port":"5555","path":["v1","getCourseList"],"host":["127","0","0","1"],"query":[],"variable":[]}},"response":[{"id":"239e8363-e559-4871-b076-85ce84125426","name":"Success","originalRequest":{"method":"POST","header":[],"url":"http://127.0.0.1:5555/v1/getCourseList"},"status":"OK","code":200,"_postman_previewlanguage":"json","header":[{"key":"Server","value":"Werkzeug/3.0.1 Python/3.11.0"},{"key":"Date","value":"Sun, 05 Nov 2023 06:59:09 GMT"},{"key":"Content-Type","value":"application/json"},{"key":"Content-Length","value":"29"},{"key":"Access-Control-Allow-Origin","value":"http://localhost:5555"},{"key":"Connection","value":"close"}],"cookie":[],"responseTime":null,"body":"{\n    \"courses\": [\n        \"CS50\",\n        \"CS105\"\n    ]\n}"}],"_postman_id":"b8f84c79-b464-464f-b28b-799556dc2a61"},{"name":"addCourseList","id":"eff3f39d-c608-424b-9f78-0c8ce4cdf7a1","protocolProfileBehavior":{"disableBodyPruning":true},"request":{"method":"POST","header":[],"body":{"mode":"raw","raw":"{\n    \"course\": \"EECS1022\"\n}","options":{"raw":{"language":"json"}}},"url":"http://127.0.0.1:5555/v1/addCourseList","description":"<p>Adds a course to the database. Will return an error if the course already exists.</p>\n","urlObject":{"protocol":"http","port":"5555","path":["v1","addCourseList"],"host":["127","0","0","1"],"query":[],"variable":[]}},"response":[{"id":"f796f6a6-9954-4e4e-95cc-3aed6f85244a","name":"Fail","originalRequest":{"method":"POST","header":[],"body":{"mode":"raw","raw":"{\n    \"course\": \"CS50\"\n}","options":{"raw":{"language":"json"}}},"url":"http://127.0.0.1:5555/v1/addCourseList"},"status":"BAD REQUEST","code":400,"_postman_previewlanguage":"json","header":[{"key":"Server","value":"Werkzeug/3.0.1 Python/3.11.0"},{"key":"Date","value":"Sun, 05 Nov 2023 07:01:43 GMT"},{"key":"Content-Type","value":"application/json"},{"key":"Content-Length","value":"41"},{"key":"Access-Control-Allow-Origin","value":"http://localhost:5555"},{"key":"Connection","value":"close"}],"cookie":[],"responseTime":null,"body":"{\n    \"message\": \"Not added, exists or wrong\"\n}"},{"id":"8da5781c-dad8-4c25-aa93-1bab34d5a529","name":"Success","originalRequest":{"method":"POST","header":[],"body":{"mode":"raw","raw":"{\n    \"course\": \"EECS2011\"\n}","options":{"raw":{"language":"json"}}},"url":"http://127.0.0.1:5555/v1/addCourseList"},"status":"OK","code":200,"_postman_previewlanguage":"json","header":[{"key":"Server","value":"Werkzeug/3.0.1 Python/3.11.0"},{"key":"Date","value":"Sun, 05 Nov 2023 07:04:27 GMT"},{"key":"Content-Type","value":"application/json"},{"key":"Content-Length","value":"22"},{"key":"Access-Control-Allow-Origin","value":"http://localhost:5555"},{"key":"Connection","value":"close"}],"cookie":[],"responseTime":null,"body":"{\n    \"message\": \"Success\"\n}"}],"_postman_id":"eff3f39d-c608-424b-9f78-0c8ce4cdf7a1"}]}