CS50
The ivies: replete with free online learning environments
I must first thank MIT for creating a programming environment that is beyond beginner-friendly; the software is more of a virtual, animated, coding-for-dummies. I have a feeling scratch is often over-looked by eager minds looking to break into the art of programming; when I first tried to teach myself I also dived head first into the online crash courses and tutorials for beginners that promise to make you fluent in a language overnight. However, as CS50’s intro course gives no choice, I finally came around to experimenting with the cartoon cat and the many different sprites and fun animations. It is a wonderful way to start.
I must also thank Harvard for making sixty of their very own courses available for free online. I would highly recommend their CS50: Introduction to Computer Science for anyone remotely interested in the discipline. It is taught in good taste, with enough explanation and time spent with the fundamentals of programming to appeal to those without any prior experience, but it is also paced well and more advanced students can raise each project to whatever level they like.
Here is a ridiculous and rudimentary but appropriate interactive that marks project 0 of the course.
ps. I can’t embed any code on milarobins.com because I don’t pay for those priveleges, so apologies for this lame ole link:
~/ (submitted problem sets via GItHub)
The you-tuber that helps me through each problem set. 11/10 recommend.
Some Thoughts & Logic Gleamed Throughout:
Q: Why the hell did they make us use C for the first 5 weeks?
A: Begrudgingly, I admit this is a wise teaching strategy. C isn’t as popular these days because languages like python and Javascript are higher-level, more concise, and thus powerful. However, if you can understand the logical and maneuver the clunkier syntax of C, you will be pleasantly surprised and more empowered when you finally discover the others.
Python: finally bringing real meaning and purpose to the “tab” key
SQL! Handy for querying in csv , tsv, and other databases and table formats
There is so much data out there, being competent in analysis (computer-aided I mean) is extremely underrated
CS50 Wrap Up
From Prof’s notes in 1996:
What is a function? Instructions in code that do the work for you.
Arguments? Information that’s passed from one function to another to have something done by or performed on it.
An algorithm is a precise sequence of steps for getting something done.
Programming can be explained as the process of taking an algorithm and putting it into a language a computer can process. You’re really only “coding” human thoughts into a computer, and usually optimizing for time/space/manpower in the meantime
Part of design that is important, and two things that are necessary in code: precision and correctness
What is goal of computer science?
INPUT –> *insert our programming* –> OUTPUT
(Goal is to produce something with these outputs)
Up to you how to represent that something and the processes that transform input
72 73 33 = HI (we have agreed on what numbers represent what letters, same systems created for binary, hexadecimal, and many other systems. Predetermined to make information sharing and transfer possible, or at least more efficient).
What are cookies? Little pieces of information that websites plant on your personal devices when you visit the page that track your data and send relevant info from browser (you) to server (the website host)
Incognito doesn’t mean you’re private within that window, it just means in relation to your other windows, and other browsing history where cookies are stored, you are private. When you close an incognito window, the cookies from your browsing are cleared
All computer’s have unique addresses (IP or internet protocol addresses)
Using AI and the tools of machine learning, photo, audio, video, and other forms of media can be used for identification (this data is wonderfully useful… but can also be scraped by ANYONE)
Tools available outside of CS50 IDE:
Python.org & its interpreter
Xcode used on mac’s for developing an iOS project: developer.apple.com/xcode
CS50 Web Track
How does the internet work?
Computers send and receive data using standardized protocols for ease and efficiency, making the web searches, messaging, etc possible.
One of these popular protocols is called the TCP/IP = Transmission Control Protocol / Internet Protocol
(These are the protocols that determine how computers communicate over the internet)
Recipients & Senders have unique IP addresses #.#.#.# is the standard form that work in the same way that a physical address might when sending snail mail
The four numbers in an IP address range from 0-255 (the number should sound familiar in binary. Each number in binary is 8 bits and all are 1s = 32 bits in an IP address) this means only 4 billion devices can have a unique IP address on the internet at the same time
IPv4 is running out of unique addresses!
IPv6 allows for 128 bit IP addresses to fix this issue
How to sort the messages that a computer is receiving?
Distinguish the packets of information that computers receiving by assigning different numbers
Port numbers!
Common port numbers are:
21 for FTP (a file transport protocol allows for file transfer files over the internet)
25 for SMTP (commonly used for email)
80 for HTTP (for sending messages in the form of web pages)
IP addresses are also appended with a port number to specify what kind of information you are sending to which computer
How to map the URLs which users type into their browsers with the numeric addresses that computers use?
DNS (Domain Name System) = a mapping between URLs with their corresponding IP addresses with port numbers
DNS is a bunch of servers that exist on the internet that store check databases of IP addresses when people query a URL on the web
HTTP = hypertext transfer protocol – hypertext is short for HTML , hypertext markup language
What is inside of a web request?
GET (a request method for a webpage) / whatever specific page from ‘root’ / version of HTTP being used
Host: (which www.example.com from server?)
Status codes accompany HTTP transactions to specify how the request-response was resolved
200 OK
301 Moved Permanently
403 Forbidden
404 Not Found
500 Internal Server Error
What is the content of the webpages that makes the display we see on every webpage?
View -> Developers -> View Source (can see the HTML source code of google homepage for example)
<!DOCTYPE html> (header for every single html file)
<html lang =“en”> (a tag that starts the content of the webpage, the text file is written in English)
<head>
<title>
Hello!
</title>
</head>
<body>
Hello, world
</body>
</html>
Html is composed of opening and closing nested tags that and interrelated
After writing an html file, you have to “serve” the webpage using some sort of web-server
As complexity increases: tables, plug-ins, colors, images, audio, etc etc gets built in
Img tags don’t have a closing, and it is good practice to include “alt” and then caption for those users with slow internet connection, or if the image fails to load
<img src=“image name.image type” alt “the caption of the image”>
One huge part of the internet is links
<a href=“link itself”>What you want link text to display</a>
(Note the security concern from links not having to match the text on display!)
If someone copies the html source code from a certain website, they can fool people into opening their own files!
Headings, paragraphs, and several other tags exist
Tables have table rows and table rows have cells which contain the actual data
<tables><tr><td>cell#</td> etc
HTML really just describes the structure of a page while CSS works with the style of fonts, coloring, borders, spacing, etc
Forms are also made possible through html
Forms take parameters that signify what it should do, ex when you are trying to search for something on google
The action of the form is where it is submitted and the method that you specify is usually “get”
q=“whatever user types in”
HTML has a lot of elements! Just google it
CSS, adding style and aesthetic pleasure to our webpages through additional attributes to an html page
CSS = cascading style sheets
Simply add a style attribute within an html tag to start writing CSS
Anything nested within a body element (or any parent tag) will inherit style attributes that you code in CSS
You can add multiple CSS attributes to the same html elements just remember : then ;
OR use a <style> tag after the HTML element you want to format and close it when you are done with the CSS code </style>
EX
<title>
Hello!
</title>
<style>
h2
{
text-align: center;
background-color: grey;
}
This specifies which sections take what formatting, but that way all the CSS code shows up in the same place on your html file, instead of scrolling through the content of each section
Can give a CSS style a class title in the header tag which standardizes the type of style format to be reused, that way you don’t have to repeat CSS code
.title is the notation for this in CSS : the . Signifies that a class will follow, and title is whatever you gave your class
Can give sections multiple classes, just separate with a space
There are three main ways to include CSS filing in your webpage:
Inline styling (not very efficient clear design, gets crowded)
Style section to header (more efficient, can work in “bulk”, but still makes a long file
Separate CSS styling into a different file completely (using a separate styles.css file that contains all of your styling, and link it to your index.html file in the stop using <link rel=
stylesheet” href=“styles.css”>
One of the most popular CSS libraries is called Bootstrap: full of prewritten code that makes your website look pretty. To use bootstrap, simply copy and paste a url into the head of your html file as a link rel
Explore their website and documentation to find different components to take advantage of, along with tons of sample code that describes what their code will do with your formatting
JavaScript a programming language that web browsers can interpret and understand in order to add complexity and interactivity to webpages
How to initialize variables in JavaScript versus C (they are very similar languages)
In C: int counter = 0;
In JavaScript: let counter = 0;
Much of the syntax for declaring and changing variables, conditions, loops, and functions is the same between the two languages
The structure of a website with nested elements can be thought of as a graphical tree, where each nested element is expressed as a child of a node in the tree. AKA the Document Object Model (JavaScript is able to manipulate and change the DOM without having to refresh the page)
How to add JavaScript to a page?
Using a <script> tag inside of our <head> tag
To reference html elements in JavaScript code, you must give it a unique id
How do you update website information or displays?
Add a <div> to page!
Use document.querySelector() which can be appended with different things such as innerHTML and different values
An anonymous function is one that doesn’t need a name, but perhaps is just being set equal to some sort of variable that is then called on click
To troubleshoot with your JavaScript in your browser always open the developer view!
JavaScript also reads from top to bottom so you sometimes have to debug by rearranging the order of code, just as you might have to do in C
this.value gives you access to any selected value given from a set of options in your webpage
What about more automated ways of updating your webpage?
JavaScript is very satisfying once you start to get familiar with it!
JS also gives access to geolocation service features, and you can use a JS function to access the location, then you can use the html function document.write() to print them out onto your webpage
Creating your “homepage” using these three Languages:
HTML: to create the structure of the webpage. Organizing some combination of headings, paragraphs, images, etc
CSS: to style the page with color, font, borders, backgrounds, sizing, and more to determine what the particular elements will look like
JavaScript: to make the web page more interactive, allowing us to write some code so the user interaction with the webpage can be dynamic
Use at least four HTML pages (in addition to the index.html)
You should be able to navigate easily between the different pages
How to create a link between one page to another? <a href = “page.html”>click here</a>
Use at least 10 different of these html tags! (Paragraphs, headings, tables, etc. look online at documentation!
Add some style to your webpages with CSS:
Use at least 5 different CSS selectors to stylize particular html elements (all of the paragraphs, headings, or tables all standardized in some way)
example
{ include all of the CSS properties here
}
Or use this notation to specify a certain class, which you can apply to any number of html elements
.example {
}
You can also give certain elements a special id and style this way
#example {
CSS
}
Make sure to change at least five different properties!
Size, color, background, borders, etc
Leverage CSS libraries that already exist! Incorporate bootstrap
Bootstrap just lists a bunch of different components you can include in your website, and copy the code that you add to your html to include these elements in your webpage
Don’t forget to use Javascript for alerts, style changes, or any other dynamic features
http servers return static html content to users when refreshed
In practice, the internet relies on much more dynamism
Social media sites return html back to users that contains the most recent content for their feeds
How do you control your content to make sure it is the most recent and constantly updated?
Write your own servers to listen for requests and respond autonomously with the html we want
How do you send dynamic data that is stored within your web application?
Use Flask: a python based framework that makes it easy to set up a web server that listens and responds to requests
You can execute flask run in terminal to run on a particular web server (url will be generated)
HTML can be incorporated into python to change the display of html content
Flask allows us to separate styling code into template files
Import render_template to return specific template files as opposed to hard coding your displays
Python function enables variables to be passed through html files (previously all content was static, with nested tags within elements being the most complex inputs)
To insert a condition in html code:
{% insert condition here %}
insert action
{% else %}
insert other action
{% endif %}
You can also have the python web application respond with content based on user input using a <form> in html
As a side note: you can always reference your terminal window for an error message that may or may not be helpful if your flask webpage returns an internal sever error
