I just came across this little jem. 

http://www.pictaculous.com/

This site allows you to upload an image and then presents you with a color palette to use in coordination with the image.

This is useful for web design, but also photoshop.

Enjoy

What makes many windows system admins cringe?  BATCH FILES  Well, truth is they are not for the faint of heart.  But batch files are just way too handy. 
I just was presented by a colleague a problem of renaming a file to incorporate the date in the filename.  Kindof a handy thing to do in coordination with other batch type tasks.  Well, I wish I'd figured this one out, but thanks to the internet I have a cute little command that can be added to batch files or run from the command prompt to incorporate the date into a filename. 

Here are the pieces. 

1.  GET THE DATE - If you type "echo %date%" into a command prompt you will get a lovely presentation of the date.  This is an environment variable.  All environment variables are precedded and followed by a %. Today looks like "Thu 04/02/2009"

2.  FORMAT THE DATE - This is what got me... the date has slashes in it.  Pretty much a no no for a filename, so we need to strip out the important info from the %date%.  Well, there is a convention for extracting bits of a blob of text.  In the date environemet variable we can follow the word date with a colon (:) a tilde (~) and two numbers separated by a comma to indicate the start position and number characters to extract from the larger bit of text.  For example: if we want just the month from the day ("Thu 04/02/2009") we type the following. 
%date:~4,2 

the result is...
04

This is the result of skipping 4 characters and capturing the next 2. 
Yipee! we have the month... following the same idea we can get the day, and year also.
 (come on you know you want to open up a command line and give it a try...)
Lots more information on this page...http://www.dostips.com/DtTipsStringManipulation.php

3.  RENAME THINGS - The rename command is much simpler to deal with than the date formatting.  All you need to do is type RENAME or REN followed by two parameters.  First is the filename as it is currently, and then the filename you want it to be.  Like this...

REN nate.txt sexy.txt

Ya, all of you reading this are having error messges flash in your brain.  Remember to place each parameter in double quotes if there happen to be spaces in the file name or path to the file.

4.  PUT IT ALL TOGHETHER - Ok well put all those pieces together and we now have the tools to rename a file called happy.txt to 2009-04-02happy.txt by using the folloing command...

REN happy.txt %date:~10%-%date:~4,2%-%date:~7,2%happy.txt

This works by concatenating the year, month, day, and other text in the target filename.
Year = %date:~10%
Month = %date:~4,2%
Day = %date:~7,2%

Give it a go!

I wanted to open this up, so please comment or email me  (nmcclena@esu10.org) your favorite developer tool that is incorporated into a browser.  I'm just playing with "web developer" tool bar for firefox from Chris Pederick (http://chrispederick.com/work/web-developer/) and it has some nice tools to help troubleshoot your web code. 

Add your favorites here.

Recently I did a little study to investigate options for a solid printing foundation from a website.  I did a lot of research and had fun investigating the w3c's css standard for alternate media types.  Although I came to the conclusion that for rock solid printing, there is no alternative to PDF, I learned that there is considerable browser support for print media.  With that said. the most valuable concept I gathered from my research was that it is quite easy using css to make an entire site much more printer-friendly. 
Let me give my definition of printer-friendly.  The ultimate would be complete control of the margins on the page and placement of all objects on the page and meaningful page breaks.  Because of different browser implementations of the print media standard, this is a complete pipe dream.  With that said, I consider printer-friendly to be a way to print the main content of a web page without cluttering up the printed page with web navigation or cute stuff.   
Ok, enough yacking... 

There are several ways to accomplish a different css application to page elements based on the media type.  One can actually make 2 distinct .css files, one for web and one for print.  Then in the page head create the link to each one.  Another method is to include a block of css in the existing css file and enclose it in a @media print{} style rule.  Either way, browsers are smart enough to use the correct css for the media it is trying to present.  I found the best way to test this is by using the print preview option available in most modern browsers. 

Here is an example.  For a simple page with a menu block on the left and a content area on the right, we might have an html block that looks like this...

<div class=page>
    <div class = menu> Menuy things </div>
    <div class = content>  Content Stuff </div>
</div>

A typical css file might set the layout for the menu to be on the left and the content in the middle using a style like this...

.page {width:500px; }
.menu {width:200px; float:left; }
.content { width:300px; }

But by adding another set of styles we can hide the menu for print media like this...


@media print
{
.page {width:7in; }
.menu {display:none; }
.content { width:7in; }
}

This style will only be applied for printing.  The main differences are that the menu class has display:none; which hides that block and I use inches as units rather than pixels.  I like to specify the width to avoid things that extend off the right hand of the printed page.  Again, double check by using the print preview feature in your browser.

Try it out yourself with this code.

Enjoy

I've had fun making dumb little programs for fun.  The inspiration for this came from the need to host a gathering where some group games were to be played.  So knowing that I could project my screen from my laptop I created this game to have a little fun.  It is a very basic version of hangman or Wheel of Fortune.  I've zipped up the source code and exe in this attached file.  Let me know if you have any suggestions. 

WordPuzzle.zip

Note:  Requires .NET Framework 2.0 or greater.

Below are the videos for the HTML portion of the techs class. 

Segment 1 - Tools
 
Visual Studio - https://downloads.channel8.msdn.com/
Edit Plus - http://www.editplus.com/ 
Eclipse - http://www.eclipse.org/

Segment 2 - HTML intro
 


Segment 3 - Class project

Nate's Sample Project - http://www.caffeinatedcoding.org/examples/todo/todo.htm
Brian's Sample Project - http://www.caffeinatedcoding.org/examples/ilikeswitchfoot/index.html
Adam's Sample Project - http://www.caffeinatedcoding.org/examples/rockpaperscissors/index.html


Segment 4 - Headings
 

Segment 5 - Attributes
 

Segment 6 - Lists
 

Segment 7 - Breaks
 

Segment 8 - HTML Origins - Who came up with all this anyway?
 
W3C - World wide web consortium - http://www.w3.org/

Segment 9 - Links
 

Segment 10 - Images
 


There are lots more things to explore in HTML, but the previous vidoes cover the most common things. 

I figured out this way to implement a log file for an application by using an xml file and adding it to the final compliation.  

In the solution add a new xml file.
In the properties of that file, there are 2 things to set, the build action and the copy to output direcotry.

Make sure the build action is Content
Make sure the Copy to Output Directory is Copy if newer

The settings for the "copy to output directory" are "Do not copy", "Copy Always" and "Copy if Newer"
The do not copy option doesn't put a file into the final build directory, and if this is selected, a relative reference to the file cannot be obtained.  The copy always option copies the file as it exists to the build directory for every build, and therefore will delete any changes you made programmatically.  This is not desirable when you are testing.  The copy if newer allows for only copying the file over if the original file has changed and therefore has a newer timestamp. 

These settings ensure that the file is copied to the bin/debug folder on a build.  Then one can reference the xml file in a relative manner so the path need not be known.

Here is an example of a routine to open a log file and append an entry. 

Public Shared Sub AddEntryToLog() 
    Dim xmlDoc As New System.Xml.XmlDocument() 
    xmlDoc.Load("Logs.xml") 
    Dim objElement As Xml.XmlElement = xmlDoc.CreateElement("entry") 
    objElement.InnerText = "Added a log entry."
    objElement.SetAttribute("date", "4/2/2008") 
    xmlDoc.SelectSingleNode("logs").AppendChild(objElement) 
    xmlDoc.Save("Logs.xml")
End Sub

Here is the log file with the entry from above.


<?xml version="1.0" encoding="utf-8"?>
<!-- Logs of reminders sent.-->
<logs>
<entry date="4/2/2008">Added a log entry.</entry>
</logs>

Here is a sample project that can be used as an example for the TECHS class.

http://www.caffeinatedcoding.org/examples/todo/todo.htm

When you enter text into the textbox and once you hit enter(firefox only) or tab, then the page starts a list with the text that was entered into the textbox.  If you don't like the item in the list, click on the text and it is removed.

This is kindof a dumb thing, but it demonstrates how html, CSS, and Javascript can work together.
Below is the code...

For fun put it into a page on your computer and play with it.  Who cares if you screw it up, you can always come back here and get it again.

<html>
<head>
    <title>To Do List </title>
    <style type="text/css">     
<!--
        .inputbox { width:800px; height:100px; text-align:left; vertical-align:middle;  color:#ffffff; font-size:20pt;}
        .listbox { border:1px; border-style:dashed; background-color:#665533; }
        .list { color: #002277; background-color: #665533; font-family: Corbel, Arial Black, Arial; font-size: 30pt;}
        .listitem {  background-color:#774499; width:90%;}
        .listitem-alt {  background-color:#550077; width:90%; }
        body { background-color:#775500; }
        input { font-family: Corbel, Arial Black, Arial; font-size: 30pt; color:#669944; }
--> 
         </style>
</head>
<body >

    <script language="javascript" type="text/javascript">
  <!--
  var blnAlternate;
  
  function AddItem()
   {
   var lstToDo = document.getElementById("lstToDo");
   var txtItem = document.getElementById("txtAddItem");
   if (txtItem.value != '')
       {
           var lstItem = document.createElement("li");

           if (blnAlternate == true)
         {
                   lstItem.innerHTML= "<span class='listitem-alt'  onclick=RemoveItem('" + txtItem.value + "')>" + txtItem.value + "</span>" ;
                         blnAlternate = false;
                        }
     else
         {
           lstItem.innerHTML= "<span class='listitem'  onclick=RemoveItem('" + txtItem.value + "')>" + txtItem.value + "</span>" ;
                         blnAlternate = true;
                         };
     
           lstToDo.appendChild(lstItem);
            txtItem.value='';
           focus=txtAddItem;
          
       };
  
   };
   
  
  function RemoveItem(strItem)
  {
      var lstToDo = document.getElementById("lstToDo");
      for (index=0;index<= lstToDo.childNodes.length;index+=1)
      {
      var lstItem = document.createElement("li");
      lstItem = lstToDo.childNodes[index];
     
      if (lstItem.innerHTML.indexOf(strItem) > 0)
          {
              lstToDo.removeChild(lstItem);
          };
      };
  }
  //-->
    </script>

    <div id="divAddBox" class="inputbox">
    Build your own todo list<br />
    Enter items in the box below and they will appear in the todo list.
        <input type="text" id="txtAddItem" onchange="AddItem()" />
    </div>
    <div id="divList" class="listbox">
        <ol id="lstToDo" class="list"></ol>
    </div>
</body>
</html>

I just wanted to try this trick.  I was looking at google calendar stuff...
http://code.google.com/apis/calendar/

So in there using the calendar helper, I'm putting my calendar onthis page...

"It's not what you know, its knowing where to find what you don't know" - Nate

Probably the most interesting thing about working in the computer industry in general is that you most of the time have to find what you need to know, not just take a class and be endowed with information to take you through.  We have compiled a list of some resources that you may find helpful.

Suggested Text Editors for Web Development...

• Visual Studio 2008 - https://downloads.channel8.msdn.com/
• Eclipse - http://www.eclipse.org/
• Dream Weaver - http://www.adobe.com/products/dreamweaver/?ogn=EN_US-gntray_prod_dreamweaver_home
• Edit Plus - http://www.editplus.com/
• Notepad - Windows
• TextEdit - Apple

Suggested Image Editors

• Photoshop - http://www.adobe.com/products/photoshop/family/
• Paint .NET - http://www.getpaint.net/

This is a list of some places we use for online reference when we are coding.

Coding for fun - http://blogs.msdn.com/coding4fun/
    A place to see interesting projects that people have done as hobby coders.

W3Schools - http://www.w3schools.com/
    Excellent resource for many of the web technologies needed to build.

MS Visual Studio Express Beginner Developer Learning Center - http://msdn2.microsoft.com/en-us/beginner/default.aspx
    A nice place to get started for novice developers, or just the curious.

tlbox - http://www.tlbox.com/
    This site has many tools (little helps) in most common web languages that assist in web development.

Free programmer reference ebooks for many different languages.

• Computer-Books.us - http://www.computer-books.us/
• 2020ok - http://2020ok.com/
• TechToolBlog - http://www.techtoolblog.com/archives/195-free-online-programming-books
• eBookLobby - http://www.ebooklobby.com/index.php?cid=6

Programmer Tutorials - http://www.programmertutorials.com/