CS50 & Note to Self
Tags: computerscience, cs50, python, c
Published: 2022-05-08 21:36:21

At the beginning of this year, I was pondering what new programming languages and frameworks I should learn. Harvard and MIT both provide great courses on Introduction to Computer Science. I decided to take on the Harvard’s [CS50: Introduction to Computer Science](https://pll.harvard.edu/course/cs50-introduction-computer-science?delta=0).

---

#### Table of Contents
1. [Why CS50?](#chapter-1)
2. [Note to Self](#chapter-2)

---

### Why CS50? <a name="chapter-1"></a>

I always wanted to learn a low-level programming language such as C. CS50 first few weeks materials were introduction to the [C programming language](https://en.wikipedia.org/wiki/C_(programming_language)), and sorting algorithms (bubble, merge and selection). I have to say, trying to solve sorting algorithms in modern languages (for example, JavaScript and Python) is much easier compared to C! On top of that, C’s utils function feels a bit cumbersome. `malloc`, `realloc` and/or `free` should be explicitly defined for memory allocation (heap vs. stack). Nonetheless, C (as well as any subsequent low-level programming language) usually gives better time and space complexity when solving algorithms. 

Second part of the CS50 curriculum includes Python, SQL, HTML, CSS, JavaScript and Flask. The goal is to introduce rudimentary back-end and front-end framework. Python characteristic attributes remind me of Ruby’s terseness, Ruby was my first programming language. Both Python and SQL ([SQLite3](https://www.sqlite.org/index.html)) eventually become the curriculum’s back-end stack while HTML, CSS and JavaScript performing as the front-end stack. [Flask](https://flask.palletsprojects.com/en/2.1.x/) is the web framework, and I had the chance to learn and implement [Jinja](https://palletsprojects.com/p/jinja/) template engine. 

This course was a bit more strenuous than I anticipated! First half of the curriculum was not easy to follow. However, I am glad that I successfully completed the course — so I can enjoy my Summer time. But first, I have to do some Spring cleaning. 😎

Here is my repo on CS50’s weekly assignments. I had so much fun on their first week’s assignment with [Scratch](https://scratch.mit.edu/). 😆

{% embed https://twitter.com/fentybit/status/1487605006563823618 %}

{% github fentybit/cs50 %}

---

### Note to Self <a name="chapter-2"></a>

Note to Self is my CS50’s final project. It is a simple to-do application that allows users to log their tasks. First time user would be required to register, and returning user needs to log in. The Minimum Viable Product (MVP) of Note to Self is for the user to be able to log chores along with corresponding level of priorities. User will be prompted to record their first task. 

![first-time-user](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/phdy7z5v5xj1dozqi5bf.gif)

I created two tables on `users` and `todos` with basic schema. Each user has many tasks, and each task belongs to a user. The `user_id` foreign key indicates the two tables’ relationship. 

```sql
CREATE TABLE users (
  id INTEGER PRIMARY KEY AUTOINCREMENT NOT NULL,
  username TEXT NOT NULL,
  hash TEXT NOT NULL
);

CREATE TABLE todos (
  id INTEGER PRIMARY KEY AUTOINCREMENT NOT NULL,
  user_id INTEGER NOT NULL,
  priority INTEGER NOT NULL,
  title TEXT NOT NULL,
  description TEXT
);
```

It took me sometime to get used to Jinja templates on my local IDE, my VSCode linters automatically re-format. I learned from [Stackoverflow](https://stackoverflow.com/questions/60175608/visual-studio-code-and-jinja-templates) that I had to add `"emmet.includeLanguages": {"jinja-html": "html"},` to my `settings.json`. 

Basic validations on `/register`, `/login` and creating a `/new` task are provided. On `/register`, user would have to include username, password and username should be unique (no duplication). `/login` requires both username and password. A `/new` task requires priority and title. Otherwise, the user will not be able to proceed further.

![validation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nq5yyuh2b7fxylrmcsmb.gif)

I included a logic where as the user logs a new task, the one with higher priority will always comes first (descending order). ☆☆☆ tasks will come before ☆☆ tasks. 

![main](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7woi2xxmesoynipl3ia0.gif)

Note to Self was completed in 3-day timeframe from implementing JavaScript, Python, SQL and Bootstrap library. Future cycle of product development as follows:

- Edit. User can only create and read. Ideally, we would like edit and delete functionality.
- Quick Find tab. Over the time, user will have many tasks, and it gets troublesome when the user needs to immediately access a specific task entry. A search bar to quickly type event title and access the journal entry would be useful.
- Current task entry allows priority, title and description attributes. Each entry should have more functionality for the user, such as weather, scheduling, sharing capability, image upload and so on.
- Create a toggle track for dark mode. 😎

{% github fentybit/NoteToSelf  %}

External Sources:
[Bootstrap](https://getbootstrap.com/)
[Giphy](https://giphy.com/)
[Jinja](https://jinja.palletsprojects.com/en/3.1.x/)


***
<center>[**fentybit**](https://fentybit.me/) | [GitHub](https://github.com/fentybit) | [Twitter](https://twitter.com/fentybit) | [LinkedIn](https://www.linkedin.com/in/fentybit/)</center>