Videos!

I made us an account at vimeo, which is like youtube, but not as big, and also I like the interface way, way better. I uploaded some demo videos there to embed in blog posts, because uploading video to blogger isn't working right now. ANYWAY, I will add a link to the our page on vimeo to the right hand side ----->

And I'll email you the login.

Web Form Tips by Layla

Here are some tips for making web forms. I welcome your feedback!

1. keep form names lowercase: Generally, I try to do this. Every once in awhile I have to work with a system that is case sensitive, and having to know the cases in my filenames is most annoying.

2. Keep pages short: You don't want to have users scrolling much. One page in a word document does not need to take up one web form. You can break it up into nice, user-friendly chunks.

3. Make text readable: don't user oversaturated colors, don't make the text to small, and put lots of whitespace - the reading equivalent of breathing room.

blank solution

Dave & I were modifying a solution the other day because it needs multiple projects, and the default project needed to be renamed and not be in the root of the solution. We started over by making a blank solution. Then I started thinking that it was probably best it we started ALL of our new web application projects in Visual Studio as blank solutions, from now on. Watch the attached movie for details.


How To Make a New Blank Solution in Visual Studio 2005 from CRHCDataCenter on Vimeo.

New Office extension

Hey guys,
This just came to my attention so I thought I'd mention it as a heads up - if you've built anything that takes uploads, and you check the extension, you might want to account for the new Office extensions (docx, pptx, etc).

UPDATE:

The server needed some configuring so that one's browser could handle these new Office 2007 extensions (see this article). Don has handled it but just a heads up if you ever encounter that links to these extension don't work, this might be the culprit.

case statement

Access has an IIF statement, SQL has the case. Want to display your bit data as "yes" or "no"? Enter the case statement! Example:


SELECT thisVariable, thatVariable,
CASE
WHEN likesApples = 1 THEN 'yes'
WHEN likesApples = 0 THEN 'no'
WHEN likesApples = 2 THEN 'not sure'
else 'not answered'
END AS appleVariable
FROM thatTable


organizing your stylesheet

UPDATE (7/12/09): Having read Andy Budd's CSS Mastery, I favor the structure he demonstrated. I highly recommend that book by the way. See sampleCSS.css in the resources folder of our repo.

----------------------------------

Organizing a css file is something we should probably think a little more about. I have tried various ways. If the stylesheet is very clearly organized you not only make it easier to read and modify, but also to debug later. Here is a sample I found online of a stylesheet for a free wordpress theme. I like the way the author organized their styles.

Do you have a good example? Blog about it! ;)

ARTICLES ON THE TOPIC ---> links at the bottom.


/*
Theme Name: statement
Theme URI: http://www.blogohblog.com
Description: The "Statement" WordPress theme has been built by Blog Oh! Blog and comes under a Creative Commons License.
Version: 1.0
Author: Jai Nischal Verma
Author URI: http://www.blogohblog.com
*/

/*+++++++ BODY +++++++*/
* { margin: 0px; padding: 0px; list-style:none; text-decoration:none; }
body { font-family: Arial; font-size: medium; color: #4d4b4c; background: #fff url(images/bkg.gif) repeat-x; }

/*+++++++ H1,H2,H3 HYPERLINKS +++++++*/
h3 { padding:10px 0 10px 0; font-size:14px;}
a:link { text-decoration: none; color: #006666; border: 0px;}
a:active {color : #006666; border: 0px;}
a:visited { color :#006666 ; border: 0px;}
a:hover { color:#333333; border: 0px;}
a:focus { outline: none;}
.clear { clear: both; }

/*+++++++ MAIN +++++++*/
#wrapper { width: 1000px; margin:auto; }
#frame,#content { width: 975px; margin:auto; }

/*+++++++ TOP +++++++*/
#header { height: 106px; width: 1000px; }
#logo { float: left; width: 210px; padding-top:30px; padding-left:10px; }
#logo h1{text-indent:-10000px;}
#logo h1 a{display:block; background: url(images/logo.gif) no-repeat; height:63px; outline:none;}
#topleft { float: right; height: 106px; width: 630px; }
#searchbox { float:right; width: 233px; height: 36px; background: url(images/s.gif) no-repeat; margin:20px 5px 0 0; }
#searchbox #s { float: left; margin: 4px 0 0 6px; border: 0; width: 200px; background: none; color:#999999; }
#searchbox #go { float: right; margin: 3px 4px 0 0; width:18px; height:18px; }

/*+++++++ NAVIGATION +++++++*/
#nav { float:right; padding-right:10px; margin-top:10px;}
#nav ul { }
#nav ul li {display:inline; height:35px; line-height:35px;}
#nav ul li.current_page_item a { background:url(images/navbg-acho.gif) repeat-x; color:#fff; }
#nav ul li.current_page_item a:hover{background:transparent;color:#fff;}
#nav ul li a { color:#fff;float:left; text-transform:uppercase; padding:0 0 0 20px;}
#nav ul li a:hover{background:none;color:#dadada; text-decoration:none;}

/*+++++++ INFOBAR +++++++*/
#infobar { height: 30px; width: 975px; line-height:30px; font-size:11px; margin-bottom:15px; }
#browse { float: left; width: 570px; background:url(images/folder.gif) no-repeat 0 6px; padding-left:22px; }
#rss { float: right; height: 30px; width: 383px; background:url(images/feed.gif) no-repeat right; }
#rss p { padding-right:22px; text-align:right;}

/*+++++++ ENTRY +++++++*/
#left { float: left; width: 570px; }
.entry { width: 540px;
padding:4%;
background:#fff;
border:1px solid #dadada;
margin-bottom:10px;
line-height:140%;
font-size:0.9em;
color:#4F5B5F;
}
.entry h2 { font: bold 1.3em "lucida grande",georgia,"Myriad Pro","Myriad Set","Myriad Apple",Myriad,Helvetica Nueue,Arial,Verdana,Sans-serif;letter-spacing: -1px;margin-bottom:0; margin-top:0;margin-left:-8px;}
.entry h2 a { color:#327489; }
.entry h2 a:hover {color:#B80EA2;}
.entry p { padding-bottom:10px;}
html>body .entry ul { padding: 0 0 0 30px; padding-left: 10px; }
html>body .entry li { margin: 7px 0 8px 10px; }
.entry ul li:before { content: "\00BB \0020"; }
.entry ol { padding-left: 2em; margin:0;}
.entry ol li { background:#fafafa; list-style-type: decimal; line-height: 120%; font-size:0.9em;}
.entry img {margin:0 10px 10px 10px;}
img.centered { display: block; margin-left: auto; margin-right: auto; }
img.alignright, img.alignleft { padding: 11px; margin: 7px; display: inline;background:#EBE5EF; border:1px solid #C7BBD0; }
.alignright { float: right; }
.alignleft { float: left ;}
.allinfos { font-size:0.7em;font-family:georgia;font-style:italic; height:20px; padding-bottom:1.4em;margin-left:-8px;}
span.date {font-weight:bold;font-family:'lucida grande';font-style:normal; }
span.comments { background:url(images/comment.gif) no-repeat; padding-left:20px; }
span.category { background:url(images/posted.gif) no-repeat; padding-left:20px; }
.navigation { width: 540px; padding:10px; line-height:140%; font-size:11px; }
.entry p a {color:#9C0F6F;}


/*+++++++ SIDEBAR +++++++*/
#sidebarbottom { float:right; width: 400px; }
#right { float:left; width: 400px; }
#topsidebar { width: 380px; padding:0 10px 0 10px; border:1px solid #dadada; background:#fff; margin-bottom:10px; }
#lsidebar h2 { font-size:15px; margin-bottom:10px; color:#4c4c4c;}
#rsidebar h2 { font-size:15px; margin-bottom:10px; color:#4c4c4c; }
#lsidebar { float:left; width:160px; padding:5px; border:1px solid #dadada; background:#fff;}
#rsidebar { float:left; width:195px; padding:5px 10px 5px 10px; border:1px solid #dadada; background:#fff; margin-left:8px;}
#sidebarbottom ul{ margin:10px auto 20px;}
#sidebarbottom ul li{}
#sidebarbottom ul li ul{}
#sidebarbottom ul li ul li{display:block; background:url(images/bullet.gif) no-repeat 0 0; padding-left:24px; padding-bottom:5px; border-bottom:1px dotted #dadada;}
#sidebarbottom p{padding:0 5px;}
#lsidebar li, #rsidebar li {font-size:0.8em;}

/*+++++++ COMMENTS +++++++*/
.postmetadata { padding:5px; background:#feffe5; }
#commentform p { padding-bottom:10px;}
#commentform #author { border:1px solid #dadada; height:20px; width:200px; }
#commentform #email { border:1px solid #dadada; height:20px; width:200px; }
#commentform #url { border:1px solid #dadada; height:20px; width:200px;}
#commentform #comment { border:1px solid #dadada; height:200px; width:500px;}
.commentlist cite { background:#f9f9f9; padding:5px 5px 5px 10px; }
.commentlist cite a { color:#333;}
.commentlist .ctext { background:url(images/doth.gif) repeat-x bottom; font-size:11px;}

/*+++++++ FOOTER +++++++*/
#footer { background: #222222 url(images/footer.gif) repeat-x; width: 100%; margin:15px auto 0px; height:100px; font-size:10px; }
#foo { background:url(images/foobg.gif) no-repeat right; width: 955px; margin:auto; padding:10px; height:80px; color:#fff; }
#foo a:link { color : #FF9900; border: 0px;}
#foo a:active { text-decoration: underline; color : #FF9900; border: 0px;}
#foo a:visited { color : #FF9900; border: 0px;}
#foo a:hover {color: #FFFFFF; border: 0px;}
#foo ul { float:left; margin-top:10px; }
#foo ul li {display:inline; height:35px; line-height:35px; font-weight:700;}
#foo ul li.current_page_item a { background:url(images/navbg-acho.gif) repeat-x; color:#fff; }
#foo ul li.current_page_item a:hover{background:transparent;color:#fff;}
#foo ul li a { color:#fff;float:left; padding:0 20px 0 0;}
#foo ul li a:hover{background:none;color:#dadada; text-decoration:none;}

/**************** Misc *********************/
acronym, abbr, span.caps { cursor: help; }
acronym, abbr { border-bottom: 1px dashed #999; }
blockquote { margin: 15px 30px 15px 10px; padding-left: 20px; border-left: 5px solid #ddd; }
blockquote cite { margin: 5px 0 0; display: block; }
.center { text-align: center; }
hr { display: none; }
a img { border: none; }
pre {border: solid 1px #9a9a9a;color: blue;margin: 10px;padding:10px;background: #f3f2ed}
code {font-size:1.0em;color: #000}

/**************** Gallery *********************/
.gallery {text-align:center;}
.gallery img {padding:3px;}
.attachment {text-align:center;}
.attachment img { padding:5px; border:1px solid #999999;}
.imgnav {text-align:center;}
.imgleft {float:left;}
.imgleft img{ padding:5px; border:1px solid #999999;}
.imgright {float:right;}
.imgright img{ padding:5px; border:1px solid #999999;}


- 5 Tips for Organizing Your CSS
-Tips from Doug Bowman

Firefox add-ons: source code viewing tools

Two helpful tools for viewing the source code of any pages:
View formatted source: https://addons.mozilla.org/en-US/firefox/addon/697
View source chart: https://addons.mozilla.org/en-US/firefox/addon/655