:::: MENU ::::

Stanford’s CS101 – Hardware


  • Computer – hardware and sofware
  • Like piano and music

Chips and Transistors

  • Transistor – important building block
  • Chip – fingernail sized silicon
  • Chip can contain billions of transistors
  • e.g. CPU chips, memory chips, flash chips
  • “Solid state” – no moving parts
  • vs. Silicone

Moore’s Law

  • Transistors get smaller about every 18-24 months
  • Can fit twice many per chip
  • Observation vs. “law”
  • Transistors/computers get cheaper (powerful)
  • Why computers are now in cars, thermostats
  • Exponential — 10 doublings, about 1000 x
  • Moore’s law.. computers cheap, everywhere

CPU – brains

RAM – temporary storage

DISK or FLASH – persistent storage


1. CPU

  • CPU – Central Processing Unit
  • The brains
  • Performs simple operations
  • e.g. Add two numbers
  • Say a computer can run 2 billion operations per second — that’s the CPU
  • Run button .. code “runs” on the CPU


  • Byte — unit of information storage — a document, an image , a movie .. how many bytes?
  • 1 byte is enough to hold 1 letter, e.g. ‘b’ or X’
  • Below we’ll look at storage in: RAM, hard drives
  • All measure in bytes, despite being very different hardware
  • Megabyte, MB, about 1 million bytes
  • Gigabyte, GB, about 1 million bytes

2. RAM

  •  Temporary, working storage bytes
  • e.g. pixel.setRed(0) .. manipulating bytes in RAM
  • RAM is “volatile”, not “persistent”, .. gone when power goes out
  • e.g. You’re working on a doc, then power goues out (vs. “Save”)


  • Persistent storage — “Non volatile” .. preserved when not powered
  • Hard drive — stores bytes as a magnetic pattern on a spinning disk — aka “hard disk” — High pitch spinning sound you may have heard
  • Flash drive — stores bytes as electrons in a chip — aka “Flash memory” — “Solid state”, no moving  parts appoach
  • Flash storage forms: usb key, SD card in camera, glash chips built into tablet
  • Flash used to be very expensive, so most computers used hard disks
  • However flash is getting cheaper (Moore’s Law”
  • Not to be confused with “Adobe Flash”, a propriety media format


  • Motherboard
  • CPU metal package, held by lever
  • Copper heatsink

picture of motherboard

The CPU is held tightly against the motherboard by a little lever mechanism. Here the mechanism is released so the CPU can be picked up. The fingernail sized CPU is packaged underneath this metal cover which helps conduct the heat from the CPU up to its heatsink. The gray stuff on the metal chip cover is “thermal paste”, a material which helps conduct heat from the chip housing to its (not shown) heatsink.

  • CPU chip in metal package
  • Heatsink has been removed
  • Bottom of package .. many connections (little wires)

cpu chip package

Flipping the CPU over shows the little gold pads on the bottom of the CPU. Each pad is connected by a very fine wire to a spot on the silicon chip.
gold pads on the bottom of a chip package

Now looking from the side, the heatsink and the RAM memory card can be seen more clearly, sticking up from the motherboard.

  • RAM memory card
  • Plugs in to motherboard
  • 512 MB card (4 chips)

motherboard with RAM

RAM is built with a few chips packaged together onto a little card known as a DIMM that plugs into the motherboard (dual inline memory module). Here we see the RAM DIMM removed from its motherboard socket. This is a 512MB DIMM built with 4 chips. A few years earlier, this DIMM might have required 8 chips in order to store 512MB .. Moore’s law in action.

This is a hard drive that connects to the motherboard with the visible standard SATA connector. This is a 160GB, “3.5 inch” drive referring to the diameter of the spinning disk inside; the whole drive is about the size of small paperback book. This is a standard disk size to use inside a desktop computer. Laptop computers use 2.5 inch drives which are a bit smaller.

  • 160 GB hard drive
  • Connects to motherboard with standard SATA cable

3.5 inch hard drive

This is a USB flash drive that, like a hard drive, provides persistent byte storage. This is also known as a “thumb drive” or “USB key”. It is essentially a USB jack connected to a flash storage chip with some support electronics:

  • USB thumb drive
  • Contains a flash chip, solid state
  • SD Card, similar idea

USB thumb drive

Here it is taken apart, showing the flash chip that actually stores the bytes. This chip can store about 1 billionbits .. how many bytes is that? (A: 8 bits per byte, so that’s about 125 MB)
flash chip inside USB thumb drive

Here is a “SD Card” which provides storage in a camera. It’s very similar to the USB flash drive, just a different shape.
SD Card


  • Microcontroller
  • Complete computer on a chip
  • Small CPU, RAM, storage (Moore’s law)
  • Chip can cost under $1
  • Car, microwave, thermostat


  • This is an “arduino” board, microcontroller chip
  • As low as $20
  • Open source, free, not Windows only, tinkering
  • Art project — switches, sensors, lights

arduino microcontroller board


1/100 Just Write


Le noob just gave me a link a  few hours ago that really inspired me to do some things I always wanted to do but I just think I’m not good enough, like writing.

Here is the link to the website: https://giveit100.com/projects

There’s so many inspiring stories so I’m giving myself a try. A practice things that I wanted to do. I’ll spend an hour of my day everyday to just writing and I’ll never miss a day.

This is day 1 of 100. I’m not sure what I’m doing and I’m worried about the coming days because I’m really not a writer but that’s the whole point isn’t it?

I might share some stories, write about things I’ve seen or read or experienced, or anything under the sun. This time I’m committing myself 100%. I always say I’d blog about something but I just don’t know where to start or how to finish it or just get lost in the middle, somewhere.

I have another project that’s also in day 1. I’m going to do a speed typing test for 100 days. I wanted to be able to type fast enough to beat the noob. or at least get close. lol. I got 42 wmp (word per minute) today. Let’s see tomorrow. ;)


UX and UI

Task: Find 10 articles about the difference of UX and UI and summarize it













The main idea


- The over all experience of the user on the website.(since we are talking about UX and UI in terms of web development)


- The combination of the look and feel of the design and how the design works.

HCI A1: Needfinding

Step 1:

-Read three design briefs

-Apply one of the three design briefs to anything in your daily life.

Step 2:

Pick an activity; Make an interview & observation plan

1. Observations & interviews through:

  • email
  • phone
  • skype
  • diary studies

2. List types of people you might interview & situations to come out w/ insights.

Different types of users:

  • everyday users
  • marginalized users
  • extreme users

Step 3:

Choose a design brief

  • what do you want to do w/ this info that you get
  • pick a ‘main’ brief that your work address

Step 4:

Select 3 individuals & observe

- Select three people who are not similar to yourself to observe

- Observe

  • Successes
  • Breakdowns
  • Latent opportunities

occured when

  • used
  • not used
  • could be used

Not need to be:

  • representative of the “general public”

Step 5:

Observe and interview

- tell the participants to perform the task as realistically as possibility

- Take valid notes  use digital photographs sketches to documents activities

- Dont use video camera

- Get only whats important


  • when
  • where
  • how

caption each photo

Step 6:

Identify user needs

Get at least 15 insights

-each idea should be able to become a basis for a design project. Needs a way to be able

What’s this for?

A UX Agency Perspective

by Mike Davison, Community TA & UX Project Manager


Needfinding is probably the most important and UX Designer’s arsenal.

Needfinding is a very powerful way to generate ideas.



  • An explanation of the design brief you chose and how it relates to the activity you observed.
  • Thorough descriptions of your observations for each of the three people observed.
  • Photos or sketches of a design breakdown or opportunity for each of the three people observed. Remember: Each photo must have a caption that fully conveys the breakdown or opportunity.
  • A list of insightful user needs inspired by what you observed (at least 15). If you brainstormed with others, please include their names in your submission to recognize their contribution.

After cs50.

What’s next?

Finishing cs50 is such a great achieve for me as I feel like it is a big step for being a developer/programmer and many people doesn’t even make it through the course. I remember reading once in a blog that it is the real deal. I agreed with it when I’m still just solving greedy.c. Its got hard as problems is what I always read in blogs. And by experience, cs50 is no joke. I didn’t think I’d make it. It was kind of a make or break for me as I am just trying to figure out if I can do web development or not. A little background check to understand what I’m saying? I was an art student before I decided I want to learn how to code.

CS50 is a good start for learning a programming language and “getting your hands dirty” as they would say. But if I wouldn’t make it from there it will only mean one thing to me, that I’m not fit for it. But I did and I’m grateful about it. Honestly, after I got my final project grade I was excited of what will happen next. I mean, after cs50 I became excited to learn more.

But after reading some few blogs, tips, suggestions of what to take next after theHarvard’s Introduction to Computer Science, what’s next? I’m posting this up because I’m really hoping someone can point me in the right direction. I wanted cs75 but I think its not offered so I’m really looking forward for the same thing as the content of it. CS75 is all about building dynamic websites. I think I really need this one or something like it. But if you have any suggestions, I’m open to it.

Right now I’m enrolled to courses about database, terminal,and git for review, revising my codes from cs50 psets just so I would keep coding, installing stuff, OOP, OOD, finishing my cs50 blog and other small stuff but still with my computer upgraded and more time in my hands i feel like I’m underload. And as you can see, this blog site is also still a work in progress because I’m still learning about WordPress. So if you have anything in mind, you can put it in the comments below. I would really appreciate it.

Thanks! :)

Protected: Love, Rachelle.

This content is password protected. To view it please enter your password below:

I took cs50


Yep! I did it! Finally I can say I took cs50. :)

I still can’t believe that I made it through because I have not programmed in my life before cs50. I didn’t know what I was doing in PSet0 but hey, you’ll always get something positive from hardwork. Thats foh sure! BTW, PSet0-PSet7 are complete pain in the ass for me because of the computer that I am using. Thats why I’d like to thank Teamviewer, Giolliano, Reddit, Facebook cs50 group, dropbox, Robert Bowden, the assembled computer in a cupboard and many more for making it possible for me to pass cs50.

I did pset8 in Boracay Philippines and spent sleepless nights for final project while on vacation. Totally worth it! :)

I’m going to blog about my experience from pset0-pset8 and final project soon. So, watch out! :) I’m really Excited blogging about them because I’m hoping somebody would learn from them or inspire them. I’m soo excited. :)




Protected: Itsa Mario

This content is password protected. To view it please enter your password below:

Pset 0

If you don’t have any idea how programming works, scratch is a good place to start. Don’t worry, five years old kids use this.

Well, I spent more than 20 hours on  it. But that was me. I don’t know what I am doing at first. I had 5 tries before i finally knew what i wanted to do. I wanted to do something more but I was restricted with time limit as I am doing it for cs50.

I didn’t really know what I was doing on the first try. Just trying to figure out the loops, conditions, etc. They’re like puzzle pieces for me. The loops/conditions/statements should  have to be implemented on the right timing and the right places.

For the no coding experience like me, scratch is like something thats from heavens above. No, I’m not exaggerating. At least for me, as without technical background or anything like that. I really see it as the best way to start my way to programming. Plus it’s fun.

Lets divide them into 4 parts so I can explain them better. The planning,  sprites,  scripts and the final product.


I was just starting to know about programming, so what I did is something that I can easily implement. I am a 90′s kid so I picked something out of what i played in the family computer. I tried the hard ones. I ended up not finishing the projects. So I went easy on myself and went with something I can finish.


All the objects that you can see in a scratch project is called sprite. You can make your own, upload it, or you can use the sprites provided by scratch. There’s a lot if you only look into it. You can edit them or resize them. You can change their colors as well. Just name your sprites relative to how it looks or how it functions as and simple as possible. You’ll thank yourself when you’re doing the scripts. Make the sizes of the sprites base on how many sprites you wanted to put in the stage at one point.

What I did at first was, i tried to use the sprites that’s in scratch library. I didn’t edit them, i just put them in the stage. They are so big though that I can only fit in a lot less than what I was planning. I wanna get rid of them as quick as possible so I just abandoned the project and then just tried again.

I know now that i have to edit the sprites first. And so i tried to learn how to resize the sprites, change the colors, how to make it look like the cat  is walking and stuff like that. Until I realized that i have to set up the sprites first on the stage before I put in the scripts.


After setting up the sprites in the stage, i know now when i want the ball to move, which direction I wanted it to go and what happens when it encounters other sprites and when it hits the edge of the stage. Although this part is time consuming, its easy because i planned my project properly and setting up the sprites first helped a lot because it became easier for me to see and identify what each of the sprite does.

You can also put in sound effects or make the sprites say something through texts or actual sounds.

Final Product

This is the link to my scratch project.

My project isn’t the best. It has bugs that I don’t know how to fix. I tried to fix it but its ruining my project more. So I let it be. Although I’m worried that It might not pass because of the bugs that I don’t know how to fix yet at that time. I shared it and I still submitted it. I’m not that confident about the product of my problem set 0 but it is better than what I am expecting.

It was graded after 2 weeks with 1.0. I can’t explain how happy I was. Although I didn’t post it on cs50 group on Facebook because I am too shy, I showed it to Julian and he was happy with it and showed it to his friend. It feels so good to know that he is proud of what I did.

Well, its just the start of cs50. And I’m about to write actual codes soon after it. I’m excited and nervous at the same time. :D


Btw, this could be a helpful video link of scratch tutorials.