Placeholder Image

Subtitles section Play video

  • Hello, world.

  • This is CS 50 Live.

  • My name is David Malin.

  • We're here to review your code today.

  • So see a safety zone.

  • Andrew and Colton are secretly sitting off camera here just in case I break anything since I'm on my own today, I'm told.

  • But thanks so much for all of your submissions of code by the Google form.

  • Glad to see so many people and so many familiar names and the twitch stream feel free to tune in by a discourse or other channels.

  • And we're ready to go today.

  • So the goal at hand is to provide some feedback on code, realized that reasonable people will disagree, including you with me.

  • So by all means don't take everything I say as gospel.

  • But at least give you my own perspective based on my own experience on what you could do differently or better in your particular code.

  • Perhaps when it comes to design or style, especially all right, so feel free to chat along in the chat window here, ask questions as we go.

  • But here we are.

  • So thanks to salt Eric, I think we called him some time ago.

  • We have this mission of an HTML based HTML based code here, a little something reminiscent of Zelda with a little bit of gypsum warm, if some style.

  • Ah, Latin.

  • So let's dive right in here.

  • Eric has said that he made this because he was bored.

  • That's a perfectly valid reason, I suppose, to write some code.

  • So let's see what he wrote.

  • Now here are five files Read me a true type file and a CSS file.

  • An HTML files on a job, a script file.

  • So, as before, weren't you begin?

  • Well, my eyes might gravitate initially to the read me, but we pluck that one off already.

  • So how about we take a look at index dot html instead?

  • Is really the entry point anything that's very Web based on girls tomorrow?

  • Three.

  • Yes, we do have a discord server, and the true kidneys has kindly pasted the Earl there, too, for us.

  • So here is index dot html.

  • Let's go ahead and take a look here at what Erik has done and see if we can't wrap our mind around what's going on here and ultimately, what we might do differently.

  • And hello, It's a Babbitt tonight, so of course.

  • Every Web page has a head section, as Eric does up here and then a body section, as he does appear.

  • At first glance, everything looks pretty neat and everything is nicely indented and it's very readable.

  • But I do see a few things that are perhaps worth commenting on.

  • So let's work our way from the top to the bottom.

  • So up here at the top, we have the doc type declaration, which indicates this is HTML five.

  • The latest version S O.

  • That is helps us orient as to what kind of features of hte e mail here we might use.

  • Now it's out.

  • Here, I think, is the first opportunity for some feedback online.

  • Six and seven.

  • What perhaps jumps out it folks here, Where might there be an opportunity to do things a little bit differently?

  • If you look at these, you'll see that Eric is using online 70 your L to a CD en So Cloudflare, very popular for hosting CSS files, HTML files, Java script files and the like, but he's included his own CSS above that, which is not bad in this case, because, as we'll see in a moment, there's not too much CSS going on in there.

  • But this could be a problem.

  • In general, you might want to adopt instead of habit of having any of your cdn assets at the very top and below those having your own custom CSS or your own custom Java script.

  • But why might that be?

  • Well, the whole point of CSS is cascading style sheets, the C in C.

  • S s.

  • And what cascade means is that any rules they come below others can potentially cascade or override those particular directives.

  • And so is my worry.

  • Here is that if there's some settings in the CSS files here, Eriks missed out on an opportunity to potentially override those settings by having his index that CSS file below.

  • So I might literally just swap line six and seven so that you have the ability to override those You could in fact, in rename as Sabina proposes Index Nazi SS to style dot CSS.

  • But that's completely I would say Ah, personal decision, because there are so few files in this particular example index dot html indexed out J s index dot CSS.

  • Honestly, this is a pretty good naming scheme because it makes clear to me.

  • The viewer.

  • What files?

  • Lineup?

  • Indeed, they're all somehow interrelated.

  • So let's take a look down below.

  • Here we see some classes in CSS, and if you've not heard of containers or had texts entered before and CSS classes, odds are that's coming from this Boma framework that Eric has used up here via the seedy end.

  • So we would have to read the documentation to know what those air doing, but thankfully, they're pretty self explanatory.

  • Odds are he's trying to center the text here and here.

  • He's trying to make this text size one.

  • As via this class here.

  • No, this is not a big deal in The browser's going to ignore it.

  • But there looks like a little sloppiness here, having an errant space before the word that shouldn't really be there.

  • And I kind of see this year in here, although here it's okay because you want him actually put these radio buttons a little to the side of these words.

  • Na'vi, Beetle and Link.

  • But there's definitely something incorrect.

  • Hear this?

  • I'm not loving.

  • This might just be a typo, but lying breaks should be an open tag or a start tag so open bracket B R and then either close bracket or keep the trailing slash in the tack.

  • But at the end, this here suggests that this is closed br stop e r.

  • And that's actually nonsensical because line breaks are either there or not there.

  • So I'm guessing this was a mistake Guessing that slash should be after the BR not before the br, but again in HTML five.

  • You actually don't need to close tags like that anyway, instead, so let's take a look down here.

  • We see another line break, probably a typographical error, so I'd move that slash to the end of the BR.

  • Then we have a button which looks good.

  • Then we have another container which looks empty.

  • I would probably get rid of this unless maybe it's gonna be used in the Java script file.

  • We'll see.

  • And indeed, here some mention of Java script.

  • So here's maybe some food for thought, like why put index dot Js at the bottom of the file?

  • Why not put it in the head of the section where we do sometimes in CS 50 where you might have done in some of your projects?

  • Is this good or bad he'll put a chime in with your thoughts.

  • But before we answer that, let's actually take a look it index dot Js and see what it's actually doing and see if it indeed does matter.

  • So I just hit back.

  • I'm gonna go to index dot Js.

  • And in here we see a whole bunch of JavaScript code at the top.

  • I seem tohave.

  • Ah, few different variables.

  • Beetle tech savvy text and link text.

  • The first of those are initialized.

  • Is JavaScript a raise here to just be a little careful?

  • This is more style than anything, but this probably shouldn't be there.

  • This maybe shooter shouldn't be there.

  • Depends on what might be a pending to this.

  • We shall see here we have a great random in function.

  • That's a nice abstraction.

  • Sort of giving us a name for functionality that we might like and then down here, what do we have going on?

  • Generate text.

  • A nice comment here queries all of the radio buttons and returns the selected values.

  • So here we have, indeed a loop that's gonna go ahead and figure out which of the radio buttons is checked.

  • I see that There's probably an opportunity to improve here.

  • It's very minor, and in the real world you're not going to notice the difference.

  • But the moment you find a radio button that's checked, you might as well break out of this four loop because you probably don't need to keep checking those same radio buttons because they're supposed to, by definition, be mutually exclusive.

  • All right, let's keep going.

  • I got a random into, presumably between one and 100 or zero in 100 here.

  • I'm checking for the value.

  • Good use of the identity operator, just good habit to get into.

  • And JavaScript Checking not just equals, equals but rather equals, equals equals.

  • It makes no functional difference here, but it checks to make sure that what you're comparing on the left not only equals the thing on the right, but is also identically tight.

  • So both of them, in this case, our strings that can matter in corner cases where you're comparing empty strings or zeroes or false values or false e values.

  • So keep that in mind.

  • Is your oko perhaps?

  • All right, let's see.

  • So there's definitely a little bit of messin this year, but this is perhaps objective, but maybe not.

  • So I'm seeing no space in between the if condition and this parenthesis.

  • No space between the same here.

  • But I am seeing spaces after the keywords like four.

  • So Oh, and indeed, here there is no space, so just a little bit of sloppiness doesn't really matter, Certainly to me.

  • Which one?

  • You D'oh!

  • But go ahead and at least be consistent.

  • Otherwise it looks like your code isn't quite ready, quite complete and no sense.

  • And colleagues of yours are friends of years having to get mired in some of the stylistic errors as opposed to really focusing on the codes correctness.

  • But otherwise I see some good structures here.

  • It looks like there's some pretty consistent code blocks here.

  • It looks like in each of these three conditions were doing a loop and checking the contents of some array.

  • The savvy text beetle text link text feels like there's probably an opportunity to factor this out, maybe to a function that does that, but takes as input the name of the array.

  • So I might keep that in mind.

  • And then down here, it's where we're putting our actual event listener.

  • So in short.

  • It seems like quite a bit is going on in this job script file.

  • So let's come back to that earlier question.

  • Why might we pull it index dot Js at the bottom of our html file and not in the head?

  • Well, I saw it mentioned here.

  • Let me scroll up in our chat.

  • Uh uh, Jeong gi proposes that it's good because the J S s or Java script is among the most heavy files and you want to load it last so the rest of the site loads first he asks another question.

  • Another feedback Here.

  • Um, no.

  • Everyone else is talking about twits right now, which is totally fine as well.

  • So that's pretty spot on Giovanna Egg.

  • Uh, this is a convention putting the JavaScript code at the bottom of your HTML file because if one the code is large, it might indeed take more than a few milliseconds to download, and that can block the rest of your Web page from actually rendering on the screen.

  • So it might.

  • You might see nothing.

  • Initially, your users might just see white empty boxes until the entire page and that code is loaded to putting at the very end means that the code is only gonna be loaded at the very end after everything else that's important to you has indeed loaded.

  • And then, too, if you were to put in the head supposed that that file we're not on my server index dot Js, but like on a CD en or 1/3 party server, which is especially the case for things like advertisements and add servers that could really slow your own site down.

  • And you might have no control over that.

  • So even the link that we had appear using the bullet CSS This one has to be there because it's CSS and CSS links.

  • Do you need to go in the head of a page by definition of html five but Java script, you can at least afford to put it later in the file and load it therefore, only at the very end.

  • So so great.

  • Great feedback there, and I think we're in good shape here.

  • So let's just take a look at one more file, perhaps the index that CSS file And here is where we have some reassurance that okay, probably doesn't matter.

  • The ordering of those two files and index dot html because there's not terribly much custom CSS here.

  • But indeed, we see that Eric has defined a default face using this true type file that is the fifth of the files in this repo and specified that his H one tag should have letter spacing of five pixels and font family of tri force.

  • But in general, your CSS should probably come after any libraries that you're using else.

  • You're just giving up control over the aesthetics unnecessarily and indeed So this is a code review for those of you have just tuned in, we've solicited code from folks by a CS 50 dot l y slash code review.

  • We just took a look at the first example from N a.

  • C L Eric on get hope here we have a few more that we're gonna take a look at.

  • And indeed, this is streaming on twitch on YouTube and on Facebook.

  • So feel free to chat with each other and chat with us by any of those mechanisms if you're watching live.

  • So let's go ahead here and let me see if I can't draw your attention to the code and question all of these air public repose by definition.

  • So if you'd like to go ahead here and perhaps Colton off camera can paste the Earl of this current repo into the chat.

  • Absolutely.

  • The truth.

  • Denise, we can go ahead and show that to you.

  • All right, so here we go.

  • Oh, and user men, too.

  • I see that you have heard that there is lazy loading libraries for JavaScript.

  • So that's indeed the case to you can use 1/3 party library that will actually go fetch as by Ajax, your JavaScript code and inject it into the document in the appropriate place.

  • That two addresses this issue and gives you more flexibility if you don't have complete control over where the tags are actually going in your Web page.

  • So thank you to Colton who's logged in here.

  • It's CS 50 TV for the your off that first repo.

  • Thank you, Eric, for contributing.

  • All right, so let's forge ahead.

  • And this one I think you'll find is a bit of a throwback.

  • Years ago, CS 50 Our introductory course used to use PHP at the tail end for our look at Web programming.

  • These days we use python But this brought back some memories for sure, because for quite a few years to reuse PHP, which is still a very popular language for Web programming.

  • In answer to your question, the Mr Distinguished.

  • If you submit your coat now, will we get to it?

  • Probably not today, just because we have quite a bit of interest from other folks that have submitted already.

  • But do still submit, and we'll weave it into, ah, future stream as well.

  • We hope so.

  • For those unfamiliar or less familiar with PHP.

  • Here we have a depository that has pretty representative structure.

  • They could do this in different ways.

  • Ah bin directory, where your binaries go, which is sometimes a miss no more, because the files in that directory aren't necessarily themselves compiled these days, as binary would imply zeros and ones.

  • But that tends to being where you're executed.

  • Bals are any scripts or such source.

  • SRC, of course, is where people tend to keep their source files, their source code, things that are actually core to the application and wind tests.

  • Of course, I'm sure you might put some test scripts, and then there's some other files in here.

  • Get ignore your unfamiliar.

  • That's a file you can maintain an agate depository to tell.

  • Get what files?

  • Not to push to some service, like get up dot com things like dot files or CONFIG files or personal files that you don't want to accidentally get caught up in version control composer dot Jason is X standard within the PHP community whereby you can specify what packages you want, this application to depend on and using the composer command.

  • Can you pull those dependencies down just like excuse me with pit or with Jim?

  • Can you do that?

  • Python and Ruby, respectively.

  • PHP unit dot xml is a common file for configuring your unit test.

  • So to speak, your actual test code.

  • And to do that text sounds like Michael Paul's To do this to himself here, though it looks like he's concluded this particular project 11 some years ago, in fact, so where to begin?

  • You know, the most interesting file at the top level of this repo looks like it would be robo phile dot PHP because there's no read me.

  • So unfortunately, we're going into this kind of blind, so let's see what robo filed a PHP looks like here.

  • So here we have projects.

  • Consul commands configuration for the Robo Task Runner, and we'll see some syntax that you might not be familiar with.

  • You might know about classes from Python.

  • PHP has classes as well.

  • See does not C plus plus.

  • Does you'll see that this extends?

  • Ah, package, really, or name space?

  • Starting with Robo in the class name they're in is called tasks kind of a weird syntax introduced a few years ago to PHP.

  • But it's their equivalent, really, to python packages were used that dot notation or Java packages.

  • That gives you the dot notation as well.

  • Let me scroll down here and provide some feedback now on the code.

  • If you're familiar with.

  • See, you might recall, this arrow operator is like the D reference operator and see and PHP.

  • It's not technically that, but similar and spirit.

  • It means go inside of some object and call some function or method or go inside some object and get out some data.

  • It looks here that Michael is using this to actually call a number of methods inside of this robo phile class or the task class that he's extending.

  • So stop on fail is one method task PHP unit token.

  • Isar test Parcher Test compiler test.

  • This is perhaps a matter of style in preference.

  • I personally find it a bit strange to put your chained method call on a separate line.

  • It looks like run is simply being called on Whatever they're to return, value is of this method task PHP unit.

  • So this isn't wrong.

  • It will still run no pun intended.

  • But it just feels like this line of code is so short already.

  • I personally would probably pull it up onto the same line so that I could just read things left to right top to bottom, But again teach his or her own here, let's scroll down here.

  • Interesting that we had seemed tohave.

  • The comments are switching between what I gather Spanish and English.

  • That's okay.

  • I would probably be consistent using one or the other.

  • It doesn't really matter which depending on who your user base is.

  • Same comments here about run sort of unnecessarily being on a line of its own.

  • But it looks like we just have a whole bunch of functions here.

  • Ultimately, that air testing the code that we're about to dive into, so we'll see that soon as well.

  • In here, this'd is fine, too.

  • This is in PHP using the operator, which allows you to concoct innate one string with another.

  • Lines like this are pretty common in PHP.

  • I personally find a little harder to read and might prefer to use variable interpellation whereby you actually use double quotes around your string and you actually have your dollar sign variable inside of that, double quoted String, and it will just get interpolated, so to speak, that is replaced with the actual value.

  • Of course, Michael seems to be using a function call here, and you can't do that trick in quite the same way.

  • But that's fine as well.

  • It's just a different approach, just kind of hard to read the format, I think when it's broken out a little bit like this, so this makes me a little nervous and would have to look at the code more closely to see if this is indeed a problem.

  • But it looks like this code is executive, so maybe that's actually executing a process called token Isar dot PHP.

  • A PHP script in the BIN directory and then another shell script, it seems called text compare earth dot Shh.

  • It's a little weird.

  • It seems to use one PHP file to execute another PHP file, as opposed to calling functions defined in it.

  • But it's a little too soon.

  • Thio have judgment until we've actually seen these files, but generally speaking executive or executing other files, you want to be careful because you have less control over of what codes getting executed.

  • If again, you're saying, execute this whole file as well.

  • All right, so let's take a look a little further.

  • Looks like more tests related code specific to the framework.

  • So let's go back and dive into that bin directory in the BIN directory.

  • We'll see a few different things here is that token Isar?

  • So let's take a look at this.

  • A token izer is typically a program that, uh, chops up a stream of text into what are called tokens, which might be individual letters or words or sort of meaningful grammatical units.

  • You might token eyes an English sentence into your individual words, for instance, but in programming, we, of course, have so much more so many more symbols, so token eyes means Thio returned to you one at a time.

  • All of the interesting chunks that are inside of your code that might be one or more characters.

  • All right, so let's see what we've got going on here.

  • We see some very common PHP conventions.

  • This is used by composer to auto load library files that you might want to use nice use of class here, presumably a jack token Isar, which would have to look at in another file, namely in this name space.

  • Here, here we seem to have some pretty clean code, except for the fact I'm not seeing a single comment.

  • And frankly, this file is long enough that I think this would probably benefit from a bit of explanation.

  • But otherwise it looks clean.

  • At first glance, let's go back and maybe look at Jack Compiler, which sounds like it's the guts of the program.

  • Jack Compiler.

  • Here, let's see.

  • This looks like it's a command line program.

  • We're seeing the usage information here, which is good.

  • PHP end of line.

  • This is nice because it's making it a little more resilience against platform.

  • So instead of just hard coating, backslash end or backslash are or backslash are backslash in which are different conventions on Lennox and on Mac OS and on Windows, you're asking PHP.

  • Use the PHP end of line character so you don't even have to think about that.

  • And now scrolling down to again Very nice code.

  • And it's not terribly long, but honestly, at least for someone coming into this cold like I am, some comments, I think would certainly help us explain what's going on.

  • So we don't just have to waste time actually figuring everything out.

  • Let's take another quick look, maybe in the source directory here.

  • And here is the essence of the program that I'm a little contrary to see another jack token Isar dot PHP.

  • I wonder if one of those really should have been with the other.

  • I'm not sure.

  • So let's take a look at main dot PHP, right?

  • Because in the absence of not knowing where to look, look for some familiar phrases index dot html main dot PHP or anything suggesting that this is an entry point, so I'll go ahead and dive into main dot PHP.

  • All right, here we have some unit test question.

  • Mark may be a bit of it to do.

  • They're here.

  • We have a class called Maine, and you'll see now, especially for unfamiliar with PHP, just hints of some of the features of PHP, the ability to define some kind of variable inside of the class that's protected, which has to do with its visibility, whether it's public or private or somewhere in between protected.

  • Here you'll see this convention of underscore Underscore construct, which is PHP is approach to a constructor function.

  • You might recall the in its method in Python, which is very similar in spirit, or the constructors that C plus plus and other languages have.

  • Scrolling down here would definitely love some some comments, but I think we could infer from this what's going on, although I see Oh, this might be Portuguese instead perhaps looks like are exceptions are alternating between English and that Portuguese eso, just as we saw with the comments earlier.

  • So let's see if we can't wrap your mind around this So again, I think it's just thematic like I'm finding the code to be pretty clean overall.

  • That helps, of course, that I know a bit of PHP, but I think definitely some commenting at this point as well.

  • So what, right didn't go through every single file?

  • Because I'm not sure we're finding particularly troubling trends or anything like that.

  • Why don't we give this one a good thumbs up?

  • And, Colton, if you wouldn't mind sharing in the chat if we haven't already, shall we take a look at something completely different and getting along way?

  • Feel free to ask questions are asked me to pause or slow down on any of these files were code as well.

  • All right, so next up we have an example of a game written in python implementing a deck of cards.

  • In fact, let me take a look at our description here.

  • Give me just one moment.

  • Our deck of cards.

  • This is a simple Python script that builds, shuffles and prints a deck of cards such that it is ready for expansion into a simple card game.

  • The focus here is on clean, clear style.

  • Martin Jane.

  • Welcome to the Stream as well.

  • His main questions for us here today are How is the formatting style?

  • Can it be wrapped into a class with some methods for uses, a module or their neater, more concise ways to structure the deck data.

  • Our main naming conventions acceptable.

  • Let's see if we can put up at least a few of those as we take a look.

  • Our volunteer here tonight does give a disclaimer.

  • No, this was made just for fun.

  • He was curious to see if he could.

  • He's pretty new to this, and that's fine, too.

  • If you're proposing and submitting your code to me or to Colton into any of the team here, you don't need to disclaim that you're new to this.

  • We expect as much.

  • So we're happy to help however we can.

  • And again, as always, take our own thoughts with a grain of salt.

  • The truth can ease.

  • Asks is a good practice to have at least one comment at the beginning of a file describing what it does.

  • No matter the file program length, I would say, probably not going to say yes to absolutely everything, especially if it's a configuration file or something that's rather self explanatory.

  • But yes, I think, at least certainly if you're making your coat open source.

  • If you're sharing it with a colleague or a friend, if you're submitting it to a course for a teacher to review.

  • I mean, anything that helps the human focus on the interesting work that you did without having to wrap their mind around what was the problem you were even solving?

  • Just tell them so that they can actually think harder about the code and not about the overarching goal off that code.

  • All right, so let's take a look at this.

  • Let me go over to our repo here for deck of cards dot pie on Dhere, we have what's called the gist on Get Hub.

  • This is sort of, ah, temporary file that you can create and share independent of repositories, but that has a bunch of other features as well, like commenting and revisions as well.

  • So here we go deck of cards dot pie.

  • I see a couple of imports at the top of the file.

  • That's great.

  • That's where they typically belong, giving me access to the random library and the time library or modules.

  • Here, I seem to be getting the local time and storing it in system time Date and then iterating over this system time date structure in order to get at various fields.

  • So I think a few comments here, it looks like we're setting ourselves up to use what's called a pseudo random number generator some function that's going to give us random numbers again and again and again and again, using some uniformed distribution of values between, typically some lower bound and some upper bound.

  • I say it's pseudo random, though, because if you've taken CS 50 or some other class or read up on pseudo random numbers, you'll know that computers can't really be random, right.

  • They could be programmed to do what you say, but they can't be programmed to just think of a number off the top of their head like we humans can.

  • So you actually have to write a program to generate random numbers.

  • And the way you do that is by writing code that takes as input at least one kind of seed initial default value.

  • Very often, that seat is like the current time, not in terms of hours or minutes, but probably in terms of seconds or milliseconds or microseconds or something along those lines, because why time is always changing.

  • So in this way, if you're running this deck of cards, program or file on now, or in five minutes or tomorrow that time value will be different.

  • And so the pattern of numbers your pseudo random number generator will generate will be hopefully different based on when you run the program.

  • So, therefore gives sort of the illusion of randomness, or at least the an approximation of a distribution of values that would otherwise be perceived as random.

  • But that invites the question.

  • What scene do you choose if you choose the same seed, like zero or one or 42 or 50 or anything else and you generate random numbers there after you're going to get the same random or pseudo random numbers again and again and again because they all start with the same seed.

  • So you want to see the change in what I see are volunteer here doing is kind of implementing his or her own seed value and long story short, just not necessary.

  • I'm guessing this code was inspired maybe by a tutorial or ah, post online, because there's some interesting mathematics going on here.

  • But this is the kind of thing generally in computer science and in programming, that you don't want to reinvent yourself unless you're feeling very comfortable.

  • And you want to solve some problem that someone else hasn't much better, much safer to use libraries out there where lots of other smart people and open source community, ideally, has all weighed in visually on the code and said, Yes, this code looks correct rather than reinventing these heuristics ourselves.

  • So long story short, none of this is probably necessary.

  • Actually, even this none of this is actually necessary beyond getting the local time if we need it, because the random Library and Python, the random package actually provides you with the ability to seed it for you.

  • So if I Google Python random and then let's type in, uh, just do that, see what results we get.

  • Random, random, random.

  • I want to get to the version three of Python.

  • So here we go generates pseudo random numbers, and you'll actually see if you read through this.

  • That random does come with a seed function that if you admit the value, it's gonna use the current system time.

  • And if we really dived into the documentation, you could see the Python has a secrets module were really care about certain cryptographic properties of randomness.

  • There's other code that other people have written so long.

  • Story short when it comes to implementing certain primitives, especially related to randomness or cryptography.

  • Generally speaking, I would rely on existing libraries rather than reinventing that wheel yourself.

  • All right, well, let's dive into some of the actual code here and see what it is we're looking at.

  • So this is a program somehow related to cards, and if you're familiar with a deck of cards, they have spades, diamond clubs and hearts, those in the different pictures that are on each of the cards.

  • Here we have a nice utilization of Unicode.

  • These characters do actually exist in Unicode, so even though you might not think you can do this, you can actually have Unicode characters in your code these days, assuming your interpreter or compiler supports it, which it should these days you can even have emojis, but that's a whole can of worms that we won't open today.

  • Here we see another list in python declaring all of the values that cards can have on a for a CE than 234 all the way through 10 than Jack, then queen, then king.

  • So these represent all of the numbers or the values that card might have.

  • And then down here, it looks like we're getting ready to have some counters T sweets and T values, which are, respectively, the number of suits and the number of values.

  • I'm guessing this was used here so that you don't have to ask the length function again and again how long something is.

  • It's a minor optimization.

  • It's find a store that value in a variable, but it's pretty efficient to ask a list and Python What its length.

  • ISS s o.

  • I wouldn't fret too much about that.

  • Great comments here throughout and only gets you to read through them if you'd like.

  • Colton is kindly pasted as our CS 50 TV accounts the Earl of this project.

  • If you'd like to follow along here, we see some creation of some topples.

  • It looks like inside of a list, some kind of array or matrix, via which we can actually compare cards and their values.

  • And then I see the place holders for a couple of more lists.

  • Deck, print and debt combined and deck shuffled.

  • The comments are pretty detailed here.

  • It looks like our volunteer's going to populate each of these lists with things like the values of the cards or the human friendly versions off the cards, the human pronounceable versions.

  • So this seems to be preemptive.

  • And indeed, here we go.

  • We have a bunch of loops now to build a pretty DEC, and by that I take it to mean that there's gonna be strings inside of these lists, like such and such a suit with this such and such value, so more of a ah, human friendly, English like description off that card, as opposed to just a or two or three or so forth here, though, is an opportunity, I think, stylistically or even design wise to factor this out.

  • It seems a little weird that we're still in the confines of this main program.

  • We've created a couple of lists.

  • Now we're have the code to fill those lists.

  • It feels like this is a nice opportunity for abstraction.

  • Give me a function that returns a list with all of these values, or do it in maybe a classes.

  • Eyes are volunteer, him or herself asked in the submission of the sexual code.

  • Just feels like we could clean this up rather than just doing everything from top to bottom because these air pretty distinct operations.

  • All right, so let me scroll down a little further.

  • Here's where the deck of cards is actually getting shuffled.

  • And here's one helper function.

  • It looks like print deck is gonna be a function that prints the entire deck in its shuffled order.

  • And so here we see some pretty fancy utilization of it oration, going head and printing out wth e deck of cards itself.

  • But that's that.

  • Alone, at least, is good.

  • Good encapsulation, although ironically, after going through all of this top level code and then introducing one method here, print deck, were just calling it immediately, which suggests we didn't necessarily even need to define this function.

  • But I think is our volunteer noted, if this file was meant to be used as a component for some other card playing game, then you'll probably want print deck to exist.

  • But you probably don't want to be calling the print deck function in case someone imports this function.

  • As with the import keyword and python, because the function might get called accidentally good to see some familiar names just to catch up on the stream here, Andre.

  • Nice to see you.

  • And Bella is well and a s a dodgy nice to see everyone as well.

  • And I see a question that just scrolled off my screen.

  • Let me scroll back up.

  • Here are the comments to detail there.

  • Is that possible I e should we worry about over commenting?

  • Asks the Mr Distinguished.

  • That's very valid concern.

  • I don't think we've crossed that line with these comments.

  • I think the fact that most of these comments are one or maybe five or so lines maximally is still pretty readable.

  • If it became unreasonable.

  • Well, frankly, that's an opportunity again to factor some of the code out and put it in a function and then document the heck out of that function, right?

  • You really can't go wrong documenting your functions explaining what your inputs are, what their outputs are, how you use them and the corner cases to be mindful of any exceptions that might be thrown.

  • So if you weren't a factor this out into separate functions to generate the shuffle deck and these human friendly strings, frankly, you could comment even more, I would say I think the risk that you're identifying is that when all of your code is together like it is in this one file at the moment those comments just push and push and push the code down and down and down soon of having more comments than code.

  • And it's just a little harder to wrap your mind around it.

  • It's hard to distinguish the code among the comments, so there's some inflection point there.

  • So yes, worry about over commenting if it's in line with everything else.

  • At that point, you should probably be factoring things out into functions and documenting things.

  • A little more module early might be some helpful advice there.

  • All right, S O Gerson Morrow, three.

  • Nice to meet you in the stream here.

  • Glad you got to hear about CS 50 through Naz.

  • Daily News here is actually a former student of mine in CS 50 and another course here at Harvard called CS 1 64 Software Engineering Course.

  • And he's certainly with his whole team, has gone off to do some amazing things, including visiting campus that one day and reminiscing with us about his time here on campus.

  • So D M SMTP high from India one AM here in Cambridge, Massachusetts, USA.

  • It's about 3 p.m. In the afternoon.

  • All right.

  • I think that leaves us with one more program to dive into here.

  • Let's take a look at what we've got in the form of this Reddit wallpaper bots will go ahead and pace the link to this in the chat.

  • If you'd like to follow along, some of you might like me spend a little too much time on Reddit reading or writing in this case here, we have a submission that's gonna do the following.

  • Let me go ahead and read its formal description and pull this up here on my screen.

  • So in this case here we have a reddit scraper that sets the background image based on what's trending on Reddit.

  • So this sounds like a really cool use of an A P I dynamite dynamic in that it's gonna change over time based on what's indeed trending on on on Reddit.

  • So let's go ahead and take a look at the actual repositories that we have here.

  • So this is from can deal for 411 Thank you for this submission as well.

  • So here we have Ah, read me, which is wonderfully detailed.

  • This is a great example of helping your users get on board, which is really quite cool.

  • Red paper, Wall Baht says what it is or bought for Reddick that gets top hot, sordid picture from a given subreddit and sets it as the background this will work.

  • Looks like on Windows, Mac OS and Lennox Prerequisites.

  • You need Python 36 installed, which is actually helpful.

  • Those of you familiar with Python in recent years know that it's been evolving.

  • Newer versions have new or features, and if you were in code that assume those features, your python code won't work on older version.

  • So helping people to know what version you want, if not the latest eyes quite helpful to ensure that people can actually engage with your code and use it as well.

  • All right, let's take a look here.

  • Here's some installation instructions.

  • So if you'd like to play along at home, you're welcome to follow these instructions.

  • Here it looks like you'll need a red.

  • It's a P I ke, essentially a client's idea in client secret so that this code can masquerade as you let me caution that you should not just go using any old code on the Internet, including code that we're taking a look at here because these air live repositories they can change over time and not to impunity of our kind volunteers today.

  • But you should always be.

  • We discuss and CS 50 a little bit skeptical of any code someone's just put on the Internet or encouraging you to run.

  • You probably want at least skim through it and make sure it seems to do what it says and doesn't have any scary remove ALS or e mails, fans or something like that.

  • So again, just always beware, whether it's with our examples or anything you find on the Internet that you shouldn't just trust something just because it's free.

  • Indeed, it could be doing any number of things.

  • So let's take a look here.

  • I'm not going to have a go ahead and install this on this particular machine because we're focus, of course, in the code review on the code itself.

  • But I'm gonna go ahead and scroll back up to the repositories and we'll see a different structure from before.

  • But where should my mind wander, so get ignores, get specific and keeps files in or out of the repositories.

  • License file is a convention on get hope that allows you to communicate in a standard way.

  • What open source library, if any You're providing your code with pip file here pertains, presumably to Pippen.

  • Any requirements that we might have for this particular project to read me, of course, is a get hub thing here.

  • And then we have bought a pie mein dot pie and requirements dot text, the last of which is also a particular to pip and any dependencies you might wanna have.

  • So I like I'm a little torn.

  • I kind of want to look at the body, but I kind of want to look at Maine.

  • So let's look at main first, cause that's probably my entry point here.

  • So here we go.

  • This seems to be ah, command line program that's going to actually kick start this.

  • Bought as best I can tell, I like this some very clean imports at the top here, and additional imports that is, uh, probably included in our requirements DOT text separated from the ones that presumably come with python bought.

  • Meanwhile, is separated by a white space to make a little more clear that it's not like the others.

  • It's indeed in the same directory, a module called bought dot pie.

  • So let's keep scrolling down here.

  • Looks like there's some kind of configuration going on here.

  • No comments, but I can perhaps glean from these function names.

  • Love the asking art down here.

  • It looks like when this main function is called, we're actually gonna see wallpaper bought on the screen, which is nice and fun.

  • And then down here, it looks like there's some kind of configuration being opened.

  • I'm actually being prompted, it seems, for the subreddit or the category or the bulletin board on Reddit.

  • If unfamiliar that you want to access.

  • It looks like here.

  • Now we're using this body library.

  • Actually, get a SUBREDDIT.

  • Which one will the one that's being passed in along with its name?

  • Here?

  • It looks like there's some kind of a P I call here that's going to get the picture post based on hotness, sorting by hot like what are the most people looking at up voting, clicking on and so forth?

  • This looks to be maybe just for the humans benefit to print out the title and the author of What It Is that was discovered.

  • A little progress message here with downloading really good use of exceptions here.

  • We don't spend time really and CS 50 these days on exceptions, but it's another approach to handling problems in code in See, You might recall that we tend to return value special values.

  • Maybe you return a negative value in cases of error or e o.

  • F or no, or something like that, depending on the function.

  • Well, the tricky part there is that if Bunches of things can go wrong, it's hard to know what went wrong.

  • If you could only return a value and it's a little knowing, have to look it up in a chart like with numeric codes.

  • So Python and PHP and other languages ruby and C plus plus in Java have exceptions.

  • Exceptions are a way of just giving up in the middle of a chunk of code, but with useful information saying this type of error happened.

  • So, for instance, Pythons Requests library, which does HDP requests over the Internet.

  • Getting more information from some website allows us, in this case to try to get the picture.

  • Your l in question here.

  • But if something goes wrong, it can raise an exception for the status.

  • If it's not a 200 status code, maybe it's a 400 something or 500 something.

  • This will throw an exception.

  • And that exception could be a request exception specific to this library.

  • And if that exception occurs, notice how our volunteer here has handled that exception.

  • Well, and frankly, Python doesn't make this super easy.

  • It tends not to be wonderfully clearly documented as to what exceptions can be thrown by functions.

  • Unfortunately, you kind of know sometimes only after the exception has happened, unless you really dig into the documentation and references online.

  • But this is a great approach to handling exceptions and being proactive about it.

  • Welcome toe, Bitter spec.

  • Better bits per sec.

  • A cz Well, a czar.

  • Other recent sub Carver's glad to have you here on the Stream s Oh, yes, Babak Night notes that David has a PhD in something like bots.

  • This is going to be interesting.

  • This is different type of.

  • But David studied bought net, which were clusters of malicious software triggered by viruses or worms on PCs that's collectively take over people's computers.

  • Otherwise known as Bob Nets.

  • This bought seems to be about specific to read it.

  • It's more of a robot or a program that has been written for good purposes, not evil.

  • But thank you, though, for the shout out indeed.

  • M Kloppenburg.

  • No, it's very different type of bots.

  • So let's go see this box top.

  • I'm very interested to see how this is all working.

  • So in bottom pie here we seem tohave ah, Class called bought exception which, indeed, per the comment there describes what might go, uh, what might be thrown when it raised when something wrong happens.

  • Get read it.

  • I seem to have a function here that uses my log in in the form of my client I d in secret.

  • Namely, those things you can sign up for for the read me that we glanced at a moment ago.

  • Notice another good use of exceptions, things that can go wrong here.

  • It seems that this underlying client p wrought out ready Excuse me, the library that we're using to actually connect to read its back end and throw certain exceptions client exceptions.

  • So we're catching those as well.

  • So really good error handling.

  • Otherwise, the user might actually see errors if this weren't caught in this way.

  • Get subreddit.

  • Looks like this is a way of using the module or the library.

  • It's actually go get information about a specific Reddit.

  • Given its name.

  • Justus.

  • We see right here.

  • Unfortunately, things can go wrong here, and apparently a type error is thrown in the event you pass an invalid name.

  • How do we know that?

  • I'm just inferring from the code here, but this library is probably documented somewhere, so we would know that as well.

  • And let's scroll down here, Get picture Post.

  • I really like the organization of this code because it's very hierarchical or chronological.

  • We're getting a read it we're getting We're getting the rennet logging in with my credentials.

  • I'm getting a specific subreddit and now I'm getting the picture posted that represents what's hot in that subreddit.

  • So here, too were flipping over or iterating over.

  • It looks like the subreddit having sorted earlier by what's hot.

  • I believe we're looking for the actual image in question and you hear my voice slowing down because now this is the first time in this whole code base where I'm really starting to try to figure this out.

  • I would really love one or more comments here, especially to help me understand when maybe each of these errors might happen, although I do see a commenter.

  • So here we were going doing so.

  • Well up until that point, I do think I certainly would benefit from a little bit of explanation as to what's going on here just because even though I could figure it out, it's gonna take me so much time to just read through every individual line when at this point in the story, really, I'm just trying to get a sense of things.

  • But code wise, everything's very nicely cleaned.

  • Noticed that this is a very clean approach to writing.

  • And if condition that actually has multiple sentiments, um, this I could go either way on I noticed that you've put the and, uh, key words at the beginnings of the sentence.

  • It might be a little cleaner to move those to the end of the previous line.

  • This way, each of the three Boolean expressions you're asking ah will line up on the left but that's a

Hello, world.

Subtitles and vocabulary

Click the word to look it up Click the word to find further inforamtion about it