Thursday, December 10, 2015

My peaceful tree

I hope we can code this scene in my high school class next week. This version is SVG. We can convert it to HTML5, then finally create a Swift app.

Tuesday, December 1, 2015

Reno Erat Rudolphus: Christmas CD 2013

This one has classical, pop, techno, piano, children, and even bluegrass.



Nicolaus Esterhazy Sinfonia1The Virgin Mary Had A Baby Boy
Andy Williams2Kay Thompson's Jingle Bells
Golden Guitar Project3White Christmas
DJ Santa Claus4Silent Night
Nicolas Spencer5My Favorite Things/Carol of the Bells
Straight No Chaser612 Days of Christmas
Jack Jezzro7Deck the Halls
Nicolaus Esterhazy Sinfonia8Carol of the Bells
Stephen Miller9O Come O Come Emmanuel
Nicolas Spencer10The First Noel
The Clarke Family11Angels We Have Heard On High
The Cedarmont Kids12The Virgin Mary Had A Baby Boy
Nicolas Spencer13Thou Didst Leave Thy Throne
Simhah Chamber Collegium14Angels We Have Heard On High
Ray Conniff15The Little Drummer Boy
James Beuregard and Keri Taylor16I Cannot Tell
Jason Gray17Easier (Song of the Wisemen)
James Beuregard and Keri Taylor18Infant Holy, Infant Lowly
Nicolas Spencer19Brahms Lullaby




Sunday, November 29, 2015

A Red-Nosed Christmas: Playlist 2002

This playlist has some 60's artists like Percy Faith, Ray Conniff, and Andy Williams interspersed with techno tracks, comedy, and (I hope) food for thought.



Percy Faith1Joy to the World
Percy Faith2Do You Hear What I Hear
Guitar3It Came Upon A Midnight Clear
Ray Conniff4Little Drummer Boy
Andres Segovia5Greensleeves
Trans-Siberian Orchestra6Christmas Canon
Anne Murray7Christmas in Killarney
Trans-Siberian Orchestra8Revenge of the Sugar Plum Fairy
Techno Mix9Jingle Bells
Dean Martin10Rudolph the Red-Nosed Reindeer
Jimmy Buffett11Run Rudolph Run
Big Bad Voodoo Daddy12Rockabilly Christmas
Elvis Presley13Santa Bring My Baby Back
Roy Zimmerman14I Tawt I Taw Ol' Tanty Claus
The Chipmunks15The Chipmunk Song
Cheech and Chong16Santa Claus and His Old Lady
Nat King Cole17Chestnuts Roasting
The Foremen18Buy War Toys For Christmas
Andy Williams19Some Children See Him
Randy Stonehill20Christmas Song for All Year 'Round



Quirky Christmas: Christmas Playlist 2001

Only my family and closest friends know that many years, I like to create a Christmas CD to share. This playlist is the first Christmas CD I put together (and arguably the best). I believe it is from 2001, because it seems to reflect the events of 2001.

https://www.youtube.com/playlist?list=PLoqipQPAfFOoNm0QNCGVpDA29emp9ukKS

Larry Norman1Christmastime
Tom Lehrer2A Christmas Carol
Frederick Fennell3Sleigh Ride (Leroy Anderson)
LA Guitar Quartet4Nutcracker - Overture (Tchaikovsky)
LA Guitar Quartet5Nutcracker - March (Tchaikovsky)
LA Guitar Quartet6Nutcracker - Russian Dance (Tchaikovsky)
The Roches7Hallalujah Chorus (Handel)
Handel8Concerto a Due Cori
John McCutcheon9For Unto Us A Child Is Born (Handel)
Mannheim Steamroller10Do You Hear What I Hear
Mannheim Steamroller11Away In A Manger
Pierce Pettis12Miriam
Bruce Cockburn13Cry of a Tiny Babe
Kathy Mattea14Straw Against the Chill (Bob Franke)
Dennis Lee15Jesu, Joy of Man's Desiring
David Massengill16Jesus the Fugitive Prince
John McCutcheon17Christmas in the Trenches
John Lennon18Happy Xmas Was Is Over
Bing Crosby & David Bowie19Peace On Earth / Little Drummer Boy





Friday, November 13, 2015

Animated Adobe Icons

We are doing these icons in the high school class. We have not finished the last icon yet. We are drawing them in SVG. We are animating them using JavaScript.






Sunday, October 25, 2015

Reformation Day

A long time ago, my company sent me on business trips to western Minnesota to install electrical equipment. On one of those trips, I met a nice gal of good Minnesota Norwegian stock and asked her out to a music concert at the college in Fargo, North Dakota.

Being a good Minnesota Lutheran, she told me about her church in Moorhead. (There are so many Lutheran churches in Fargo and Moorhead, I'd never be able to remember now which one it was.) I had the privilege of visiting there the following Sunday, the last Sunday of October.

Reformation Sunday is not only a day to remember the events of 1517 Wittenberg, but also a time to celebrate with a grand midwestern potluck. Had I known ahead of time, well, I'd still not have been able to cook up anything in the motel room. But the little old ladies of the church welcomed me warmly and introduced me to their favorite potluck dish: lutefisk. "You'll either love it or hate it," they said. "It's like fish flavored jello," they said. How could I possibly turn this down? Fortunately, they didn't give me a lot!

After the potluck, I visited this nice gal and her family at her home, and we took turns playing the piano. It was a wonderful afternoon.

On another occasion, one of the electrical workers invited me to his home for lunch, and they served me corn freshly cut from their very own property.

After visiting Minnesota several times, I decided that the good Lutherans of Minnesota are far and away the friendliest people I've ever met. If they have any of the Lake Wobegon quirks, I never noticed.



Monday, October 19, 2015

Random Artwork

Refresh the page to see a different design (or click the button below).

This one uses HTML5 Canvas, so it works on iPad. In class, we used SVG, which doesn't render properly on iOS devices using Safari.



Tuesday, October 13, 2015

Ten Commandments of Human Relations

1. Speak to people. 
There is nothing as nice as a cheerful word of greeting.

2. Smile at people.
It takes 72 muscles to frown, only 14 to smile.

3. Call people by name.
The sweetest music to anyone's ears is the sound of his own name.

4. Be friendly and helpful.
If you want friends, you must be one.

5. Be cordial.
Speak and act as if everything you do is a joy to you.

6. Be genuinely interested in people.
You can like almost everybody if you try.

7. Be generous with praise...
and cautious with criticisms.

8. Be considerate with the feelings of others.
There are usually three sides to a controversy: Yours, the other person's, and the right side.

9. Be eager to lend a helping hand.
Often it is appreciated more than you know.

10. Add to this:
a good sense of humor, a huge dose of patience and a dash of humility. This combination will open many doors and the rewards will be enormous.

Wednesday, October 7, 2015

Connect the Dots

One of my high school students did paper-and-pencil artwork that looks like this. I wrote this program that we may code together in class. When you connect the dots, the result is a parabola curve along the bottom edge. 

The SVG version does not work with iPad because Safari iOS does not like inline SVG elements. So the following code uses HTML5 canvas. The JavaScript calculations are the same, but the drawing routines are different.


How many lines?
What color?

How to start learning computer programming

People often ask me, "How should I start learning computer programming?" Specifically, what programming language should one start with?

Many programming languages are difficult to learn. C++ is a powerful and widely-used programming language, but I would seldom suggest that someone learn C++ first. Some do, and some do it well, but there are easier languages. Java is similarly difficult. Objective-C is a nightmare; I'm glad Apple replaced it with Swift, but don't let the name fool you ... you won't learn even Swift quickly unless you already know another programming language.


Tuesday, October 6, 2015

Resistor Standard Values

Suppose we want to establish a sensible set of standard values for resistors. Of course, this was done many years ago. But sometimes it is instructive to recreate the thought process of engineers from the past. We learn something about their thought process that we might apply to our own engineering challenges today.

Supposed we want to establish a set of standard resistor values between 10 ohms and 100 ohms. Our first thought might be to space them out equally: 10 ohms, 20, 30, 40, 50, 60, 70, 80, 90, and finally 100 ohms. This way we cover all the values between 10 and 100 with equal tolerance: 10 ohms either way.

But is it really equal spacing? The difference between 10 ohms and 20 ohms is 100 percent! 20 ohms is twice as big as 10 ohms. Don't we need another resistor in between those? Like maybe 15 ohms?


Resistor Color Code Calculator

Select the three color bands that appear on your resistor:

Saturday, October 3, 2015

Efficiency

One of my favorite books was always Cheaper by the Dozen. (It inspired a hit 1950 movie, but the book had no relation to the recent Steve Martin comedy.) The book is about Frank and Lillian Gilbreth and their 12 children. The Gilbreth parents were efficiency experts who examined the smallest movements of even their own children, looking for ways to reduce the number of motions. This was decades before the recognition of repetitive motion injuries caused by computer use and other fine muscle movements.

One story I found particularly interesting was about how Frank had courted Lillian. Frank apparently encountered bricklayers at the home of Lillian's parents, and suggested how they might do their work more efficiently. The skeptical workmen watched as Frank quickly laid out a row of bricks and mortar in expert fashion.


Friday, October 2, 2015

SVG code template

Use this code to get started using SVG:

<svg width='600' height='400' viewBox='0 0 600 400'
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink= "http://www.w3.org/1999/xlink">

    <!-- the clipping paths and masks will go here -->

    <defs>
    </defs>

    <!-- the shapes and stuff will go here -->

    <rect x='0' y='0' width='600' height='400' fill='beige' />

</svg>

Radial gradients:

http://www.w3schools.com/svg/svg_grad_radial.asp

Thursday, October 1, 2015

HTML code template

Here is a template for the minimal complete HTML page. If your page doesn't have all these elements, you should edit your page to include all of them. When you start a new page, you can copy and paste this code to get started.
<!DOCTYPE html>
<html>
<head>
    <!--
    YOUR NAME HERE, date, project name, class, etc.
    -->
    <meta charset='utf-8' />
    <title>My Web Page</title>
    <style type='text/css'>
    /* styles go here */

    </style>
</head>

<body>
    <h1>My Web Page</h1>
    <!-- page content will go here -->

    <script type='text/javascript'>
    // scripts will go here

    </script>
</body>
</html>

Add this line in the <head> section if you use responsive design:
    <meta name="viewport" content="width=device-width"/> 

Here is the code for a bullet list:
<ul>
    <li>Mission College
    <li>Ohlone College
    <li>Gavilan College
    <li>Cabrillo College
</ul>

Here is the code for a table:
<table>
    <tr>
        <th>Key</th>
        <th>Command</th>
    </tr>
    <tr>
        <td>Cmd-Space</td>
        <td>Spotlight</td>
    </tr>
    <tr>
        <td>Cmd-S</td>
        <td>Save</td>
    </tr>
</table>

Here is an excellent tutorial on HTML tables (thank you to the student who linked this to your page):

http://www.w3schools.com/html/html_tables.asp


Tuesday, September 29, 2015

String Functions

Strings are sequences of characters. They are useful for storing data and also for accepting user input, whether it be from a terminal command line or a web form.

I find these particular string functions indispensable in my own web programming. I'm sure there are many other frequently-used string functions.

ActionC++PHPJavaScript
Split a string into an array of stringsexplodesplit
Compare stringscomparestrcmp< or >
Find a character within a stringfindstrchrindexOf
Get length of stringsizestrlenlength
Find a string within a stringstrstrstrstrindexOf
Convert a string to hexadecimalstd::hextoString(16)
Get a substringsubstrsubstrsubstring
Convert string to floating pointatoffloatvalparseFloat
Convert string to integeratoiintvalparseInt
Upper case first charactertoupperucfirsttoUpperCase
Trim white spacetrimtrim
Replacereplacestr_replacereplace
Regular expression replacecpreg_replacereplace
Determine if string is a numberis_numeric!isNan

There are also a few useful functions that relate to single characters only, but they are usually used in the context of string processing.

ActionC++PHPJavaScript
Get the ASCII value of a characterchrfromCharCode
Determine if character is a digitisdigitctype_digitparseInt and slice
Determine if a character is upper caseisupperctype_uppercompare with toUpperCase


Sunday, September 27, 2015

ASCII Character Set

Hex Decimal Octal



Decisions Using the Switch Statement

You can also make decisions using the switch statment. It looks like this:

switch (exponent) {
    case 0 :
        // do nothing
        break;
    case 1 :
        input = input * 10;
        break;
    case 2 :
        input = input * 100;
        break;
    case 3 :
        input = input * 1000;
        break;
    default :
        // do nothing
        break;
}

The above code implements simple exponentiation for languages that do not support it natively. Note that each case is an integer. The general rule is that the different cases must be types that can be converted to integer at compile time. The computer science term for such types is "enumerable." Integers, characters, and enumerations would be valid here. (An enumeration is just a way of giving names to different integers, like constant literals.) Characters are valid enumerable types because they can be considered a restricted set of integers. For example, the letter 'A' evaluates to the integer 65. See the ASCII character set for more information.

Friday, September 25, 2015

Programmer's Code Editor

It is always a good idea to use a good programmer's text editor for any kind of code development. Important features of a programmer's text editor include:
  • Syntax code coloring
  • Language-aware auto indent and formatting
  • Strict text file save with line ending options
If you are doing PHP or JavaScript programming and you don't need an IDE but you do need an editor, I recommend NotePad++ for Windows, TextMate for Mac, and Brackets for either Windows or Mac. I no longer recommend TextWrangler because it does not have language-aware formatting.

Please, never use a program like NotePad, WordPad, Microsoft Word, or TextEdit to edit code. They do not have the proper options to safely save your files as strict text. They also do not have code coloring or auto indent.


Integrated Development Environment (IDE)

If you are learning C++, Java, Swift, iOS programming, or Android programming, it is helpful, and maybe necessary, to use an integrated development environment (IDE) to write, debug, and test your programs.

An IDE contains all the traditional programming needs in one package:
  • Code editor
  • Debugger
  • Simulator
  • Project management
  • User interface development

Thursday, September 24, 2015

HTML Entities

These are some HTML entities I have used on this blog or use from time to time. This is not an exhaustive reference. These are just the ones I found most useful.

Beware: not all browsers support all these entities, especially the UTF-8 shapes. I have found this particularly true on mobile browsers.

EntityAppearanceName


Decisions and Branching

We must have a way for the program to make a decision, and then execute different code based on the decision. If the number is less than 10, we do one thing, otherwise we do something else. If the object is a rectangle, we obtain the area by multiplying its width by its height; but if the object is a circle, we obtain its area by multiplying its diameter by π.

Indeed, I would venture a guess that the majority of the time, popular computer programs are making decisions. (This is less so for scientific programs that do extensive numerical computations.)

The Resistor Color Code

I use this color code as an example in my classes for writing branching clauses, loops, and functions.

0Black
1Brown
2Red
3Orange
4Yellow
5Green
6Blue
7Violet
8Gray
9White

The color code works like this: there are (at least) three color bands on the resistor. The first band indicates the first digit in the resistance. The second band indicates the second digit. The third digit is a multiplier. 

So, for example, if the bands were Yellow, Violet, and Orange, this translates to 4, 7, and 3. The  resistance value would be 47 × 1000 or 47 K Ω.

The computation would look like this:

R = ((10 * a) + b) * 10 c

where a, b, and c are the translated values of the three color bands, in order.


Foundational Programming Concepts

I teach three programming classes. There are several concepts that I must teach in all my classes because they are so foundational. Once you have mastered these concepts in any programming language, it is easy to transfer the knowledge to other languages.

Wednesday, September 23, 2015

Typing the Apple Symbol

After seeing my post how to type the command key / cloverleaf symbol, someone asked for a similar post how to draw the Apple symbol.

As a digression, this is a story I heard. In the early days of Apple, when Susan Kare was designing icons for the first Macintosh operating system, they used the Apple symbol on the keyboard command key, so she put the Apple symbol in all the menus for keyboard shortcut. When Steve Jobs saw this, he something to the effect of "Apples everywhere, too many apples!"

Look now in the File or Edit menu of your Mac, and see all the keyboard shortcuts there. Imagine if these were all Apple symbols! Now you can imagine why SJ was taken aback.

So Susan Kare looked for a distinctive but non-threatening symbol, and she found the cloverleaf symbol in a book of symbols used on Swedish maps to indicate a point of interest while traveling.

Anyway, beware how you use the Apple symbol. As a solid symbol, instead of an outline, it can be imposing. In an HTML document (web page), you can type the Apple symbol by adding this HTML entity to your code:

&#63743;

It should look like this:


If you need to type the Apple symbol into a word processing document or other document on your Mac, the keyboard shortcut is Option-Shift-K.


Creating Colors with UIColor

The UIColor object lets you store colors and also set colors on objects in your storyboard. The UIColor object comes with some colors built in:


ColorRGB HexSample
UIColor.blackColor()000000
UIColor.darkGrayColor()555555
UIColor.lightGrayColor()aaaaaa
UIColor.whiteColor()ffffff
UIColor.grayColor()808080
UIColor.redColor()ff0000
UIColor.greenColor()00ff00
UIColor.blueColor()0000ff
UIColor.cyanColor()00ffff
UIColor.yellowColor()ffff00
UIColor.magentaColor()ff00ff
UIColor.orangeColor()ff8000
UIColor.purpleColor()800080
UIColor.brownColor()996633

However, there is also a UIColor method init() that lets you specify a custom color that is not in the list above. For example, supposed you wanted to use the color Chocolate, which is not in the above list. The RGB hex values for Chocolate are #D2691E. You could create this color with the following method call:
view.backgroundColor = UIColor.init (
    red: 0.82, green: 0.41, blue: 0.12);
Note that we have to convert the hex numbers to equivalent floating point numbers in the range 0.0 to 1.0 first. If you have the hex colors but not the floating point equivalents, you can build the math into your function call:
view.backgroundColor = UIColor.init (red: CGFloat(0xD2)/255, 
                                   green: CGFloat(0x69)/255, 
                                    blue: CGFloat(0x1E)/255);

Here is a link to the Apple documentation of UIColor.


Boolean Logic

Boolean logic is a way of describing relationships between ideas that can have the truth values TRUE and FALSE. We describe these relationships in a diagram called a truth table:

xyx OR yx AND y
FalseFalseFalseFalse
FalseTrueTrueFalse
TrueFalseTrueFalse
TrueTrueTrueTrue

Here is an example of boolean logic. Suppose we have a set of colored shapes. We might ask two kinds of questions. If we choose one of the colored shapes, we might ask: is it blue and a circle? If we choose a blue circle, it is blue and also a circle. If we choose a yellow circle, it is not blue and a circle, because it is yellow (not blue). If we choose a blue square, it is not blue and a circle, because it is a square (not a circle). So whatever shape we choose must satisfy both the requirements, that it be both blue and also a circle.

Tuesday, September 22, 2015

Useful Keyboard Shortcuts

These keyboard shortcuts are useful when working on the Mac. You can avoid using the mouse or trackpad, and save your wrists a lot of pain.

Windows has similar shortcut keys, but they use the Control key instead of the Command key.

⌘ Space Spotlight
⌘ Tab Switch application
⌘ S Save
⌘ D Desktop
⌘ Z Undo
⌘ X Cut
⌘ C Copy
⌘ V Paste
⌘ , Preferences
⌘ R Refresh
⌘ W Close Window
⌘ L Edit URL
⌘ N New file
⌘ F Find/Search
⌘ G Search again

Blogger lets you type HTML tables into the HTML tab, and it lets you add styles to your tables too.

Typing the Command Key (Cloverleaf) symbol

In an HTML document (web page), you can type the cloverleaf symbol by adding this string to your code:

&#8984;

It should look like this:


Make sure you include the ampersand, the hash (pound or sharp sign), and the semicolon at the end.

In a word processing document, such as Microsoft Word or Apple Pages, you need to go to the symbol insert function, and look for "point of interest" symbol. It is unfortunately not called the cloverleaf symbol, and you can't search for it within a word processing document that way.

In a pinch, you can always just search Google for cloverleaf symbol to get this information.


Running Windows on Mac

Running Windows on Mac is frustrating for two reasons. One, Windows itself is inherently frustrating if you are a Mac user. Two, the emulation software (Parallels, Fusion, Virtual Box) is slow.

Don't forget that in order to run Windows on a Mac, you must pay for the emulation software, and you must also pay for a legal copy of Windows. For the same price, you may be able to buy an inexpensive Windows laptop.

Which is more frustrating? Running Windows on a Mac, or running Windows on an inexpensive and possibly underpowered machine? Only you can decide. But be aware that you do have options.

If you use Windows relatively infrequently, running it on you Mac may be more economical.

Here are some reasons why I have Windows installed on my Mac:
  • To test my web sites on Internet Explorer.
  • To use Excel and PowerPoint functions that are not available in the Mac versions.
  • To compile C# code on Visual Studio.
  • To help my students who are running Visual Studio or WAMP on their Windows computers.
Here is some software you can run without actually installing Windows:
  • The Mac versions of Word, Excel, PowerPoint, and Outlook.
  • MAMP (the Mac equivalent of WAMP).
  • Eclipse or ADT for compiling Java programs and Android apps.
  • Mono for running C# code from the shell.

Blogger lets you insert styles and scripts

Click a color well to change the color of this text.

Red #ff0000
Orange #ff8000
Yellow #ffff00
Green #00ff00
Cyan #00ffff
Teal #008080
Blue #0000ff
Violet #ff00ff
Purple #008080
Black #000000
White #ffffff
Gray #808080

 

Macs I've known and loved

PurchasedModelComments
1985Mac 512KMy first Mac. Later upgraded to 512KE then Mac Plus.
1991Mac IIsiSJSU bookstore.
1992Powerbook 100Price Club (Costco).
1994Powerbook 165cMacWarehouse.
1997Performa 6400Ugly computer. Bought from Small Dog Electronics.
2003Power Mac G4 MDDPowerful computer at the time. Bought from Mac Pro in San Jose.
2005Powerbook G4 AluminumBeautiful computer. Mac Pro in San Jose?
2009MacBook Pro 15”Tech Restore in Concord. My first Intel Mac. I needed it to run Windows.
2012Mac MiniA little powerhouse.
2013MacBook Pro Retina 13”I use it for PowerPoint and teaching my classes.
2014iMac RetinaThe retina screen is beautiful.

This cool Tableizer web site lets you create an HTML table from spreadsheet data or tab-delimited data and you can then insert the HTML into your web site. In Blogger, you must paste the resulting HTML into the HTML tab on your post, not the Compose tab.


My advice for buying a Mac

I first compiled this information in 2012 to help some friends who wanted to buy Macs. I updated it in early 2014 to help some students who were taking a class in Mac/iOS programming. (Such requires use of a Mac; it cannot be done on a PC.) Now I'm updating it again.

This is what entitles me to give this advice: I have used many different Macs since 1985, and I buy about one every other year, so I've been doing this for a long time. I have bought both brand new and refurbished. I have opened almost every Mac I've ever owned to upgrade it (except the new ones that can't be opened.) I am stingy, so I always look for the best deal and the best strategy.  

[1] Your friend who works at Apple may be able to get you a discount. However, Apple employees are inundated with such requests from their friends, and they have a limited number of discounts to use, so employees usually reserve the discounts for their family members.


[2] Don't be afraid to buy a refurbished Mac. Apple sells them for about 15% less than list price. A refurbished computer has been returned to a tech who checks everything and fixes what may be broken. Many new computers ship with problems or even DOA. A refurbished computer has been checked a second time beyond the normal factory testing. (This is true of other computer brands besides Apple too.) Be careful: you may be buying last year's model.