bash and unix commands: lesson #2

1) counting words

cat /usr/share/dict/words | wc -l

2) counting characters

cat /usr/share/dict/words | wc -c

3) replacing the ‘enter’ or ‘newline’ with comma

cat /usr/share/dict/words | tail -7 | tr '\n' ','

4) replacing more than a single character

cat /usr/share/dict/words | tail -7 | sed 's/Zy/Baaa/'

Social Drawing HTML5 Canvas Part 1/5

Agreeing on the product

C. is the Product Manager and I’m the engineer.

Here it the minimal viable product

Name: social-drawing
–  A simple canvas to draw
– A color palette on top with 7 colors
–  neon colors palette
– to be able to change color
–  be able to move the mouse
–  click and move to draw
– need a eraser or white color
– Fill – maybe
– Brush size – maybe
– be able to save

Getting Started

Using CSS, HTML5, Javascript is the best programming language because they are ubiquitous, easy, lots of tools and sample and best of all it’s interactive

Tools for editing: I chose to use Emacs to edit the files, and C. was ok to learn it.  You can use Aqua Emacs, Text Edit, Notepad++ (Windows)

Use the browser for viewing, so Firefox, Safari or Chrome would work

I chose to use git and to host the site and the code

Getting to a working version ASAP so the kids don’t loose attention

First version:

We typed this up while riding BART and the indentation is not pretty, but we got a working version up with a few kinks

See the demo of version 0.1

See the final version

Social Drawing
<canvas id="canvas" width=500 height=350>

var ctx;

  function init()
    var mouseX;
    var mouseY;
var canvas = document.getElementById("canvas");
if (canvas && canvas.getContext)
 ctx = canvas.getContext("2d");
canvas.addEventListener("mousemove", onMouseMove, false);
var radial = ctx.createRadialGradient(370, 60, 0, 370, 60, 70);
ctx.strokeStyle = 'lime';
ctx.lineWidth = 10;
ctx.lineCap = 'round';
ctx.lineJoin = 'round';

ctx.lineTo(500, 350);



  onload = init;
function onMouseMove(e)
    mouseX = e.clientX-canvas.offsetLeft;
    mouseY = e.clientY-canvas.offsetTop;
    ctx.lineTo(mouseX, mouseY);


Next Step: Fixing the funky mouse action

Binary Numbers: Lesson 1

Crepe at Home
Crepe at home

This morning C. and I were eating crepes with hazelnut chocolate and she asked me what this means? “10001001” I think she must have seen it somewhere on a piece of paper or an advertisement. I’ve always found it difficult to talk to her about what my job as a software engineer is, so I decided to use this a chance to get her more interested in computer science.

This is beginning of my attempt to start a series on educating kids on computer programming.

Computers are pretty simple machines, they do what humans tell them to do, no more. On the basic level, the computer has a brain, the CPU that is made of millions of transistors which has only 2 states, either on or off.

The 1 means it’s on, 0 means it’s off

Humans count using decimals 0123456789, computers count with binary. 0/1

Let’s start counting like a computer, turn on our binary brain. The numbers are all in binary.

0 is the number zero
1 is the number one
10 is the number two
11 is the number two plus the number one which is three
100is the number four
101 is the number five
110 is the number six
111 is the number seven
1000 is the number eight
10000 is the number sixteen
100000 is the number thirty two
1000000 is the number sixty four
10000000 is the number 128
100000000 is the number 256

Then I started just asking her some random numbers like what
101, 110,10001 and she seem to enjoy it, great.

We started walking to the ZipCar to drive to Berkeley for school and I was explaining to her about pixels on the computer monitor. The typical monitor is 800 pixels across and 640 and each pixel is represented by a byte for each color. A byte has 8 bits. We have 3 colors RBG. Red, Green and Blue.

To make a color dot on the screen the computer has to turn on bits. So for the red part of the pixel, if all the bits are turned on R = 1111111, the pixel would be red. If R and B are both all turned on, the dot would be purple. R=11111111, B=1111111.

C. then asked what is a computer language. I said a computer language is a very limited set of vocabulary that allows humans to talk to the computer and tell the computer what to do. Most computer languages have only about 40 words, much simpler than the French and Chinese that C. is learning.

C.: “Can I tell the compute to blow dry my hair?”
Tony: “Sure, let’s try it”

While C. was in the back of the car seat, I told her, if we were to do it in JavaScript, this would be how we will tell the computer

var purpleHairdryer = new HairDryer();

var, new are the only vocabulary words we used.

Before I left her at school, she asked me to give her at least 5 vocabularies from JavaScript.

I gave her var, new, for, do {} while, alert

Then I said goodbye and we’ll do more programming on Sunday. That was a fun morning. I drove back to San Francisco to catch my Yahoo! bus.

Note to self, there are plenty of links out there about teaching kids to program

Scratch from MIT looks interesting

More links:

This is a series that documents my daughter’s curiosity to learn about computer programming

Update 12/14/2010 : This post has also been published on the Yahoo! Contributor Network