1-A-Day Web Design

22 May 2009 Recommendation

I recommend Active@ ISO Burner. Previously I used ISO Recorder by Feinburg, but it repeatedly produced worthless operating system DVDs for FreeBSD 7.2 and openSUSE 11.1. Plus, it was not able to verify after recording.

16 May 2009 How to Take Up Less Space on Your Web Page

Eliminate the extra margin around paragraphs.

p { margin: 0em; text-indent: 2em }

Adding the above CSS instructions will cause paragraphs to be indented but not separated by whitespace. It really saves a lot of paper and scrolling time.

14 May 2009

Thanks, God!

God, I love you, and I appreciate everything you have done for me and all of us. Please help everyone to become Christians. God, please save. I love you. In Jesus' name. Amen.

11 May 2009

After I wake up the computer, sometimes my cordless mouse takes a while to start working. I can just touch the keyboard and it will wake up the computer and work. Maybe I should wake the computer up with the mouse and then the keyboard won't work for a while.

I hope to be trying out Windows 7 after I build a new computer. The ingredients are an AMD Kuma 7750 X2, Asus M4A78 PLUS AM3 770/SB700 motherboard, Seagate 7200.12 640 GB hard drive, and a Cooler Master Elite 335 ATX Case, plus a 500 watt Cooler Master power supply. I will plan to add an NVIDIA 9600 GSO 768 MB graphics processor.

9 (10) May 2009 Not on Sunday

I'm updating my quad core computer to FreeBSD 7.2, using the same method as before. There are 11,019 patches to be downloaded, currently being downloaded.

I am also reorganizing my office, installing a Kodak ESP-3 printer ($89 from Wal-Mart, a great buy!) and a TrendNet TK-207K KVM (keyboard, video, and mouse) switch.

OK, in the time it took me to type that, and read the model numbers, all of the patches have been downloaded.

(Actually, I am writing this on Sunday, even though the date says . I don't believe in working on Sunday on purpose, but I am waiting for the drivers for the Kodak All-in-One printer to finish downloading. The Kodak download/support website must be extremely slow because only 107/267 MB have been downloaded after at least half an hour. Since I write this daily, but not on Sunday, pretend like today is yesterday.)

Updating FreeBSD is silly in the fact that I must read through 500,000+ bytes of removals and additions (could I really check them carefully?), without the opportunity to save them to a file and grep them, if I really was aware of a possible problem that might occur.

The problem with rebooting is that the network administrator has blocked the quad-core computer's MAC address. Last December I had a version of openSUSE (11.1) installed which nearly fried the network because for several weeks it requested a new IP address from the DHCP server at a rate of approximately one request per second. The silly people won't believe that it was the operating system's fault. They think the hardware was buggy, but I have been running FreeBSD since then with no problems. But I still have to manually change my MAC address in order to get on the network any time I reboot, like now while updating my system. Bother.

Also, my USB keyboard and mouse don't work right. Maybe it does have to do with the motherboard, which is a Gigabyte GA-MA78GPM-DS2H with a AMD Phenom X4 9750 OEM processor.

I the combo from Frys.com on September 5th, 2009 for $219.99 + $7.48 = $227.47. The processor arrived totally unusable with bent pins and no protective foam, just taped onto the top of the motherboard box. There was some kind of protection in the shipping box, but instead of being wrapped around the contents, the motherboard was just dumped into the bottom of the box and some insulation stuffed only on top. Me and my brother were able to get the processor to fit the motherboard by straightening the bent pins carefully with the blade of a pocketknife.

Ah, ha! At 10:12 PM my printer software is at last being installed.

The first print turned out blank white, but the second attempt produced a beautiful 4x6" print. Kodak kind of swindled me because I hoped to print an 8x10" print, but when I opened the free pack of 8x10" photo paper it really just contained 8x10" regular white paper, and only a few 4x6" pieces of photo paper. (I hate that emacs keeps turning my text green or white each time I type another " quote mark. Its HTML mode is very stupid.)

9 May 2009

I can't really think of anything to do or say.

8 May 2009

My supper is burning in the oven! But today I updated my computer to FreeBSD 7.2.

freebsd-update upgrade -r 7.2-RELEASE
# say yes to several questions
freebsd-update install
shutdown -r now
# then
freebsd-update install
shutdown -r now

I had to do this because I noticed bash was not working, and also /var/spool/mqueue had about 80,000 files in it of pure junk, using up all my inodes for that disk slice.

7 May 2009 Good Test Results

Some people I tutor had great test results today. My math class had a pizza and food celebration since today is our last day of class.

This is a function that dynamically shows prices for any elements of a form.

6 May 2009 Don't Focus, and other Usability Enhancements

One of the worst things you can do to a computer user is to move their cursor from where they are typing to another location on the screen. For instance, if I log out of Hotmail and try to type another web address into my browser, MSN's homepage shows up instead, and focuses my cursor onto the MSN search box. And my entire URL is ruined. Then when I click back to the location bar, the text is selected, so that it is all deleted when I try to continue typing. So I have to remember to carefully click twice, not too fast, or else it will be a double click. After clicking twice, then I can move the cursor to the end of what I just typed in. Finally, 60 seconds later, I am ready to bash in my entire $1,000 computer, sue MSN for one billion dollars, and shout bloody murder at the top of my lungs.

The same scenario happens millions of times every day to people. It has happened hundreds of times to me, most noticably after signing out of Hotmail, or before signing into Yahoo! Mail. In the case of Yahoo! Mail, my cursor is focused onto the login name while I am in the middle of typing my password. This ruins my login name, and ruins my password, plus it shows my password to anybody watching over my shoulder, and I have to enter everything again, with the same frustrations.

Other things that bug me are not being able to change my cart when I am at the end of an ordering process, or be able to re-enter coupons codes, etc. Walgreens has been overloaded today with photo customers due to an 8x10" free enlargement special for Mother's Day. I have tried about eight times to order my free enlargement. It was unable to respond to my search for the nearest store location, which ruined my order. Before that I had been completely unable to login to the photo center. Finally, I finished my order, but the coupon code I entered several hours before was no longer in my cart. So I had to cancel that.

My class ended at 8:20 pm, and it is 8:43. I still have required running to do tonight, have groceries to buy, food to make, everything to do, and I am still trying to Checkout from Walgreen's.

Moral of the story: don't offer a stupid $3 coupon that will cause a thousand customers to experience the worst day of their lives.

Technical moral of the story: give people more freedom in their online shopping carts so that maybe, just maybe, more of them could have finished their orders the first time through despite all the hangups, slow connections, and other delays.

P.S. Code that will make sure you don't focus after the user has started to type somewhere or clicked somewhere:

<input type="text" onfocus="self.donotfocus=1" />

...

onload = function() {
if (self.donotfocus)
return;
document.otherform.otherfield.focus();
}

P.P.S. My order did not work again. I am trying one more time...

Final update: 9:02 PM (and time is ticking while I'm typing). I completed my order successfully after giving up on the coupon.... WAIT NO, IT DIDN'T WORK. Even after agreeing to pay $3.23 (including tax) after trying all day to get my free photo, Walgreens.com still can't process my order. I have entered an infinite loop of this:

1. We're sorry, the pickup time previously indicated is no longer available. The revised order time is listed below
2. I click "Submit Order" again.
3. After about five minutes, the browser finally loads the page, returning me to Step 1 above.

Repeat the above loop forever.

5 May 2009

string = 'Jesus loves you!!!';
function doString(s) {
var i, f, n;
n = s.length;
s = s.split('');
f = function(x) { return Math.round(1000*Math.pow(-(x+1)*(x - n)/n/n, 2)); }
for (i=0; i<s.length; i++) {
s[i] = '<span style="font-size: ' + (16+f(i)) + 'px">' + s[i] + '</span>';
}
return s.join('');
}
document.write(doString(string));

4 May 2009 Fieldset

2 May 2009 Making Cool Borderless Centered Page

1 May 2009

jQuery is no good. It imports all sorts of intensive code, wastes bandwidth, and does many harmful things. All the articles I have read about it never teach anything, just show one some of the names of the functions, and then say "it's so great!"

30 April 2009

There has been no good sale today for computer components that I need to build the research computer. What I still need is a motherboard and case / power supply.

29 April 2009 Designing a New Computer

I'd like to design a new computer which can freely run many operating systems. My setup will be three computers:

• FreeBSD 7.2 Primary server, which runs cron jobs, keeps my data
• Windows Vista PC, for me to use Windows programs and Matlab
• Research computer, for me to install and test many operating systems

So anyway, the first component I have for the research computer is an nVidia GeForce 9600 GSO 768 MB graphics card. I ordered it from Frys.com for $79.99 - $40.00 MIR = $39.99. I am very interested in keeping track of the total.

I have ordered, but not received, a Samsung Touch of Color 26" monitor. Also, I have already acquired an AMD Kuma 7750 processor with a free bonus Seagate 640 GB hard drive, about two weeks ago. What I need now is a good case and a good motherboard, for a good price.

28 April 2009

27 April 2009 Green for Number

The following form input field will turn green if it contains a numeric value, white when empty, and red if it contains a non-numeric value. This is useful for providing visual form validation.

Source code

<script>
function visual_number_check(o) {
var s = o.style;
if (o.value.length < 1)
s.background = '#fff';
else if (isNaN(o.value))
s.background = '#f99';
else
s.background = '#9f9';
}
</script>
<form>
Enter a number: <input type="text" onkeyup="visual_number_check(this)" />
</form>

25 April 2009 As in...

The way you allow a form to submit files (for uploading) as part of its data, is to set the enctype attribute to multipart/form-data, i.e, enctype="multipart/formdata".

24 April 2009 Auto Search Box

How does one make an instant search filter, which selects matching topics automatically while the user types?

Simple! Just look at the source code for today and copy the match() and liHide() functions, and then use a form like this:

<form>
<b>Filter the list below by inputting desired keywords:</b>
<input type="text" onkeyup="liHide(this.value, 'resultsA')" />
</form>

<ul id="resultsA">
<li>Contents of first result</li>
<li>etc.</li>
<li>...</li>
</ul>

The search matching function is extremely intelligent, matching tokens anywhere in the sentence, in any order.

• Hi, this is my result.
• I love Ford cars
• And I love Chrysler cars,
• Bible verses, too, yoo-hoo!
• From ToGod.us, the best Bible search tool
• Which is where I obtained Genesis chapter 1, below.

Also, try it out on Genesis chapter one, verses 1-10:

1. In the beginning God created the heaven and the earth.
2. And the earth was without form, and void; and darkness was upon the face of the deep. And the Spirit of God moved upon the face of the waters.
3. And God said, Let there be light: and there was light.
4. And God saw the light, that it was good: and God divided the light from the darkness.
5. And God called the light Day, and the darkness he called Night. And the evening and the morning were the first day.
6. And God said, Let there be a firmament in the midst of the waters, and let it divide the waters from the waters.
7. And God made the firmament, and divided the waters which were under the firmament from the waters which were above the firmament: and it was so.
8. And God called the firmament Heaven. And the evening and the morning were the second day.
9. And God said, Let the waters under the heaven be gathered together unto one place, and let the dry land appear: and it was so.
10. And God called the dry land Earth; and the gathering together of the waters called he Seas: and God saw that it was good.

23 April 2009 Alert Messages, SSH, and Text Editing

How do you make alert messages?

alert('Hi, this is the alert message you want.');

Remember to place a backslash \ before any single quote marks that occur in the alert message.

I work on putty for ssh, and I use metapad for text editing, when not in Unix. In Unix I just use "ssh" for ssh and I use "emacs" for text editing. I have alias the command e="emacs -nw" to prevent the despicable Xemacs interface from starting.

22 April 2009 Computers and Hardware

Some of you may be wondering, "Hey, what computers do you use?" Well, in my office I have four, plus a laptop:

• Dell SC440 with 2 GB ECC Kingston RAM
• AMD 9750 Quad Core Homebuilt Gigabyte
• AMD 5600+ (old style with 1 MB L2 per core, 2 MB total) homebuilt Asus
• Dell Vostro 220s with the 2.4 Core 2 taken out and replaced with 3.0
• Acer laptop

21 April 2009 Operating Systems

What operating system should you install for reliability?

FreeBSD. I'm writing this on FreeBSD 7.0, and I am not disappointed. (Through PuTTY I am able to login from a FreeBSD 7.1 primary quad-core computer or a Windows Vista 3.0 GHz Wolfdale 45 nm secondary dual-core computer.)

  top
last pid: 62846;  load averages:  0.00,  0.00,  0.00   up 218+00:42:08 22:13:26
57 processes:  1 running, 56 sleeping
CPU states:  0.0% user,  0.0% nice,  0.0% system,  0.0% interrupt,  100% idle
Mem: 182M Active, 1498M Inact, 202M Wired, 75M Cache, 112M Buf, 40M Free
Swap: 988M Total, 92K Used, 988M Free

As you can see, my computer has been up 218 days, no problems. That's what FreeBSD means.

20 April 2009 Images and Figures

So in Latex you can do something like this to make images and figures, using the package command \usepackage{graphicx} and pdflatex to compile your PDF files.

\begin{figure}[htp]
\centering
\includegraphics[width=2in,height=2in]{img/1240271564-1-gi_1noise.png}
\includegraphics[width=2in,height=2in]{img/1240271564-2-gi_2noise.png}
\includegraphics[width=2in,height=2in]{img/1240271564-3-gi_5noise.png}
\caption{Inverse data $g_i$ superimposed with noisy data measurements}
\label{comparenoise}
\end{figure}

So what do you do in HTML?

<table align="center">
<caption>Inverse data <i>g<sub>i</sub></i> superimposed with noisy data
measurements</caption>
<tr>
<td>
<img width="200" height="200" src="2009/04-20/1240271564-1-gi_1noise.png" />
<img width="200" height="200" src="2009/04-20/1240271564-2-gi_2noise.png" />
<img width="200" height="200" src="2009/04-20/1240271564-3-gi_5noise.png" />
</td>
</tr>
</table>

Inverse data g_i superimposed with noisy data measurements

Yep, I'm using the cute box CSS from 17 April 2009.

18 April 2009 Playing Jokes on Your Friends

Try pasting the following "scriptlet" into your browser's location field:

javascript:void(document.designMode='on');

If your browser supports this type of rich text editing, then you will be able to click into elements of the web page and edit their contents. For instance, I put up a headline at MSN which stated that my officemate had been appointed to the position of finance chairman.

Of course, all the changes you make this way are not seen on any computers except your own, and when you reload the webpage, they will be gone. So enjoy your practical joking with JavaScript!

17 April 2009 Cute Little Boxes

How does one make a cute little box like this?

Solution:

1. Use the orange-arrow stylesheet to add the orange arrows, if you like them.
2. Use the CSS and HTML below.

<style>
.cat { border: inset 2px #cfc; margin: 1em }
.cat h3 { background: #cfc; margin-top: 0px; padding: .2em }
.cat p, .cat h4 { margin-left: 1em; text-indent: 2em }
</style>
<div class="cat">
<h3>Digital Camera Cards and Flash Drives</h3>
<ul>
<li><b>4 GB SDHC (secure digital high capacity) Card $20</b><br />
<i>(Compare at $40)</i>
</li>
<li><b>4 GB Flash Drive $15</b><br />
<i>(Compare at $30)</i>
</li>
</ul>
</div>

Enhancement:

On browsers that truly support CSS, currently everything except Internet Explorer versions before 8.0, you can add one more line of CSS to make it even more lovely. The following line of code will make the box truly a "cute little box" instead of being an ordinary block element that fills up the entire width of the page.

/* add this line of CSS */
div.cat { display: table }

(We are probably going to start using beautiful little boxes like this to display our examples from now on, but we're not promising, since it takes effort to make it so beautiful.)

16 April 2009 OurGrades.com Encrypted Gradebook

Today I took some extra time to program an amazing encrypted gradebook system. It was very intense, but I feel like, "I did myself proud, sir."

• OurGrades.com Home Page, 16 April 2009
• Sample Encrypted Gradebook

There are loads of code in it to enjoy.

15 April 2009 Easy Auto Clicks Collapsable Hierarchical Page Design

Check out this cool website design. It looks simple, but what is cool about it is the collapsable page system. If you click on any third-level heading, like "$99 Memory Upgrade Blowout," you will see that all the contents of that section will collapse, except for the title itself. Clicking on the title again will expand the section.

Amazingly, this is all done without any special modifications to the underlying HTML. In fact, the author just pasted in this JavaScript. Using the properties of Node.parent, Node.child, and Node.nextSibling, the script creates a function which will hide or show all other content in the section underneath the section's heading. Then this function is attached to the section's heading as the onclick() event handler. Very sweet!

old = onload;
onload = function() {
var h3 = document.getElementsByTagName('h3'), i;
for (i=0; i<h3.length; i++) {
var me, parent;
me = h3[i];
parent = me.parentNode;
me.style.cursor = 'pointer';
me.onclick = function() {
var x = this;
var closing = x.adclosed ? 0 : 1;
do {
x = x.nextSibling;
if (!x)
break;
if (!x.style)
continue;
x.style.display = closing ? 'none' : '';
} while (x != this.parentNode);
this.adclosed = closing ? 1 : 0;
}
}
if (old)
return old();
}

14 April 2009 Advanced Level JavaScript MD5 Message Digest Algorithm

• Secure authentication without using encryption
• Data fingerprint for verifying integrity of data transfers
• Storing passwords without exposing them to the possibility of being discovered

Authentication. A digest function e = d(m) is one which accepts a message m and produces a secure fingerprint of the message. The result e cannot be decrypted to produce the message m because there is not a one-to-one relationship between inputs of the digest function and outputs. Well, what's the use of something encrypted that can't be decrypted? This is the whole purpose! Just let us explain how it works and what it is useful for.

Suppose you want to perform authentication without using standard reversible encryption methods. Your server can produce a random combination X of 16 bytes and submit this to the client. The client then types in his password Y, but the password is not submitted directly to the server. Instead, the client's browser concatenates X to Y to obtain Z, and evaluates the digest function d(Z). The result R is submitted to the server. Since the server knows both the password and the random combination X, the server can also plug them into the digest function, just like the client did. If the result the server computed is the same as the result the client submitted, then the client is successfully authorized.

What is cool is that further encryption isn't needed. Even if someone can intercept the result R, they cannot find the password. Furthermore, R is useless to an attacker, because to perform another operation on the server, the authorization process is repeated. The next time, a different random combination is generated, and a different value of R is required.

Data verification. Data fingerprints to verify the integrity of downloaded information are an obvious application of message digest functions. Suppose you downloaded a file containing 1 MB of information. There is a chance that some of the data was corrupted, so you compute its fingerprint from a message digest function. If the fingerprint of the data you received matches the fingerprint listed at the software's home page, then the probability there is any error in your data is less than one to 10 with fifty zeros after it.

Storing passwords safely. If a computer stores passwords, there is the chance that an attacker can gain access to them. To prevent this from happening, an operating system can store the fingerprint of each password. Even if the attacker finds the fingerprint he cannot reproduce the password. Mathematically, there is still a chance to find another password which has the same fingerprint since message digest functions are never one-to-one. However, for the MD5 algorithm, the attacker would have to try an average of so many passwords, before he found one that worked, that it would be equal to ten to the fiftieth power. This is almost impossible, as it would take years of computer time.

MD5 program. A message digest algorithm is a computational procedure of computing an output e from an input m in such a way that the mapping d specified by e = d(m) fulfills the desired properties of a message digest function. One of the most popular message digest algorithms is the MD5 algorithm. It is much too complicated to show all the source code in the article, but we will show all that you need to know in order to use it.

<script src="http://www.myersdaily.org/joseph/javascript/md5.js"></script>
<script>
password = 'cherry';
fingerprint = md5(password);
d = document;
d.write(fingerprint);
</script>

Conclusion

The results shown are from Google Chromium running on a 2.79 GHz Pentium 4 with 512 MB of RAM (Dell Optiplex GX280 at a unversity computing lab). The JavaScript MD5 code tested here is very, very fast, unbeaten in many JavaScript MD5 speed tests over the years. Any MD5 algorithm is also useful for many needs of web developers.