Learning How To Learn About Widgets

To start making a widget, there is some prior knowledge that you need to have.  These prerequisites include being able to converse with a computer in JavaScript, understanding basic HTML, and having the patience to debug your widget.  If you need help with either JavaScript or HTML, these are some good websites to check out:
JavaScript and HTML
HTML
Some other things that may be beneficial in the widget making process are regular expressions and learning Python.  If you are interested in either, the following websites may be of some use:
Regular Expressions
More Regular Expressions
Python

Now, to get on with widgets themselves…
The most simply explained tutorial can be found at
Simple Widgets
This tutorial does go in depth with the explanations and it also allows you to download samples of the author’s widgets, which can be helpful if you need to debug your own. However, it does not deal with a lot of specifics, or advanced widget designs.  The website that I found to be the most useful for the more advanced designing was the apple page itself.  The tutorial can be found at
Advanced Widgets


These links are all great and are all extremely helpful, however they tend to leave out the little things that can sometimes throw the whole program.  That is what this page is focusing on, the nit picky details the other programs feel are not necessary to inform you of.

Nomenclature
When making my first widget, I followed the tutorial word for word, and I had everything in the right place and was get excited to see it pop up on my screen and say hello to the world.  Well, I clicked on the icon to open it and nothing would show up.  After my first experience with debugging, it was discovered that you must name your image “default.png”.  If you look at any of the widgets in your computer’s library, you will discover they all have the main image named “default”.
Secondly, if you want your widget to be added to the row of widgets that is on the bottom of the dashboard screen, you must place it in the widget folder in the library.  That is explained in the tutorials, however, they leave out that your icon must be named “icon.png” or it also will not work.  It will show up as the default widget icon.

The Conspiracy of Other Authors
(Okay, so it might just be a simple human error, but we’re going to call it a conspiracy anyways.)
When you are reading a tutorial and it there is a ton of code that they want you to type out and put into your own program, generally the best idea is to just type the code yourself, not copy and paste.  It may seem to take FOREVER, but sometimes the author of the page may make a typo and it will appear in your code if you simply copy and paste their code into your file.  Then you have to spend hours trying to find all the typos you never made and it winds up taking longer then it would have to just type it.  So the easiest idea is to just type the code out yourself.

Cross Reference
So, one tutorial may be great, and it will be super informative, but when you write out the code and open up your widget, you are faced with a blank dashboard staring back at you (or a disdainful, insolent widget that is refusing to co-operate and do what you want it to – not necessarily what you told it to do though).  If you have debugged your program a thousand times and done everything in your power to try and make it work, and none of it has, then the best idea is to simply cross reference.  Look into other tutorials, look at the codes of the widgets that are already programmed on the computer, ask people who are familiar with the style of programming.  The more ideas you have about a solution, the better your chances of getting a right one!

Visibility
No, I don't mean the weather or driving conditions, I am referring the settings on your widget that make your user able to see the information you are trying to provide.  If you have a dark colored background, don't use dark font, and vice versa.  This is not only for the sake of the user, but also for yourself.  When you are programming the widget to do something, and are spending forever debugging it, it is very aggravating to discover your first method was correct but you didn’t know because the text didn’t show up on the same color of background.  You need to check and make sure your text is set to a color that contrasts the background so you know when something is working, or not.  It can save a lot of debugging, time and frustration.  Also, in your CSS file, you need to make sure you set the position of your text to a place where you will be able to view it.  Again, if you don't, you will spend time trying to fix what may not be broken.

Multiple Indexes
If you need to make drastic changes to your HTML file (or any file for that matter) it is a good idea to keep the old copy, and make a new file to make changes on.  That way you won’t ever have to start all over from scratch.  The main thing to remember when you’re creating extra indexes is to remember to change the “main HTML” reference name on your “.plist” file, or it will open the old file and you may waste time searching for your mistakes, when you may not have any, but are simply using the wrong file.

TRIUMPH OVER THE WIDGET INSANITY!
After the excruciating ordeal of construction this widget, the first dashboard widget made in the Computer Science (that we know of), it is finaly over! The widget is alive and working, if you need a reference, you can download it here.
IT'S ALIVE! (The "Are You Late?" Widget)
HAVE FUN CREATING!!!