Archive for the ‘Web Development’ Category.

Creating a QUnit Test Project in Visual Studio 2010

You may want to Unit Test your JavaScript code and one library to do this with is QUnit.

QUnit is based on the idea of opening a web page to run your JavaScript tests. So here is how I create a new QUnit project in Visual Studio.

This article assumes that you have the following installed already:

  • Visual Studio 2010 or later
  • The NuGet Add-in for Visual Studio

Step 1 – Create a Visual Studio Project

  1. Open Visual Studio.
  2. Go to File | New | Project.
  3. Select ASP.NET Empty Web Application.
  4. Give the project a name:
    Note: For this walk-thru, I named mine QUnitExample
  5. Click OK.

Step 2 – Import QUnit

Method 1 – Using NuGet

This step requires internet access.

  1. Right-click on your Project and choose Manage NuGet Packages.
  2. Search for QUnit and locate QUnit for ASP.NET MVC.
  3. Click Install next to QUnit for ASP.NET MVC.
  4. Click Close.

You should now see a folder called Content with a QUnit.css file and a folder called Scripts with a QUnit.js file.

Note: The NuGet package had old files, so I had to update them manually following Method 2.

Method 2 – Just downloading the files

If the NuGet package is not up to date, you may want to download the files manually. Follow the steps above to get QUnit through NuGet and if it doesn’t work, download the latest files from the QUnit web site and replace the ones NuGet added to your project with the latest ones.

Step 3 – Create an HTML file to display test results

  1. Right-click on the project and Choose Add | New Item.
  2. Find and choose HTML Page.
  3. Give the page a name.
    Note: I named mine QUnitTestResults.htm.
  4. Open the QUnitTestResults.htm file for editing.
  5. I made the DOCTYPE tag simpler in line 1:
  6. Enter something in the Title: Line 4.
    Note: I called mine QUnit Test Results.
  7. Add a Link to the qunity.css file: Line 5.
  8. Add a script in the body that calls the qunit.js file: Line 8.
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>QUnit Test Results</title>
  <link rel="stylesheet" href="/Content/qunit.css">
</head>
<body>
  <div id="qunit"></div>
  <div id="qunit-fixture"></div>
  <script src="/Scripts/qunit.js"></script>
  <script src="/Scripts/tests.js"></script>
</body>
</html>

Step 4 – Create your first QUnit Test

  1. Right-click on the Project and choose Add | New Folder.
  2. Rename the folder to TestScripts.
    Note: I like to keep the test scripts separate from the other scripts.
  3. Right-click on the TestScripts folder and Choose Add | New Item.
  4. Find and choose JScript File.
  5. Give the JavaScript file a name.
    I named mine ExampleTests.js.
  6. Open the ExampleTests.js file for editing.
  7. Add a test method to the ExampleTests.js file.
test("hello test", function () {
    ok(1 == "1", "Passed!");
});

Note: This test is straight from the QUnit home page.

Step 5 – Add the Tests to your HTML file

  1. Open the QUnitTestResults.htm file for editing.
  2. Add a script in the body that calls the ExampleTests.js file: Line 9.
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>QUnit Test Results</title>
  <link rel="stylesheet" href="/Content/qunit.css">
</head>
<body>
  <div id="qunit"></div>
  <div id="qunit-fixture"></div>
  <script src="/Scripts/qunit.js"></script>
  <script src="/Scripts/tests.js"></script>
  <script src="/TestScripts/ExampleTests.js"></script>
</body>
</html>

Step 6 – Run the tests

  1. Right-click on the QUnitExample project and choose Set as StartUp Project.
  2. Right-click on QUnitTestResults.htm and choose Set As Start Page.
  3. Click Debug | Start Debugging.

Step 7 – Start testing your JavaScript files

Now you probably want to recreate this project in as an additional project to your production solution (if you haven’t done this already).

It is time to start testing your JavaScript file. If you add the script to your project as a link, then you don’t have to maintain two copies of it.

  1. Right-click on the Scripts folder and choose Add | Existing Item.
  2. Browse to the JavaScript file that you want to test and select it but don’t add it yet.
  3. Click the down arrow next to Add and choose Add as link.
  4. Right-click on the TestScripts folder and Choose Add | New Item.
  5. Find and choose JScript File.
    Note: My file is called MySample.js.
  6. Give the JavaScript file a name.
    Note: I named mine MySampleTests.js.
  7. Open the ExampleTests.js file for editing.
  8. Start adding tests.

Conclusion

This method allows for rudimentary testing of your JavaScript. However, it does not integrate with Visual Studio, or Code Coverage, or Gated Check-ins. So there is a lot more work that needs to be done.

Changing ol and li html tags to have “Steps” and Hanging indent.

Let’s say you want to have a list of items. However, you want the word “Step” before each number in the list. You may be tempted to not use the ol and li tags and just write the list.

Step 1 – Do something.
Step 2 – Do something else.

However, it will be obnoxious to type “Step” every time. The list doesn’t scale either. If the list gets long and you want to reorder the list, or even add a step, you have to change every number. Also, what if you want a hanging indent? How are you going to do that?

Well, just use these CSS classes.

ol.Steps {
  counter-reset: section;
  list-style-type: none;
  padding: 0;
  padding-left: 55px;
}

ol.Steps li {
  text-indent: -55px;
}

ol.Steps li:before {
  counter-increment: section;
  content: "Step " counter(section) " - "; // Change to ": " if you like
}

Here is some sample html:

<ol class="Steps">
  <li>The first thing to do.</li>
  <li>The second thing to do.</li>
  <li>The third thing to do. However, this step is really, really long. In fact, it is so long that the instructions to do this step wrap all the way into multiple lines.</li>
  <li>The fourth thing to do.</li>
</ol>

Here is how it looks:

  1. The first thing to do.
  2. The second thing to do.
  3. The third thing to do. However, this step is really, really long. In fact, it is so long that the instructions to do this step wrap all the way into multiple lines. No really. It has to go one multiple lines, even if the screen is really, really big.
  4. The fourth thing to do.

Using jQuery to enable/disable a button based on a text box

Since this is an html file, just create a blank file on your desktop called Test.html and copy and past the code below.

The steps for doing this are comments in the code.

Note: This should handle typing, pasting, code change, etc…

<!-- Step 1a - Create HTML File (see step 1b way below) -->
<!DOCTYPE html>
<html>
<head>
    <!-- Step 2 - Include jquery -->
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
 
    <!-- Step 3 - Add script to run when page loads -->
    <script  type="text/javascript">
        jQuery(document).ready(function () { 
            <!-- Step 4 - Bind method to text box -->    
            $("#txtField").bind("propertychange keyup input paste", setButtonState);
			
            <!-- Step 4 - Set the default state -->
			setButtonState();
        });
		var setButtonState = function () {
			if ($("#txtField").val() == "")
				$("#btnEnter").attr("disabled","disabled");
			else
				$("#btnEnter").removeAttr("disabled"); 
		}
    </script>
</head>
<body>
<!-- Step 1b - Add HTML elements --> 
<input type="text" id="txtField" size="50"/>
<button type="button" id="btnEnter">Enter</button>
</body>

Update: 5/22/2013: Fixed example. Before if it was used on a page with links, going forward and back could result in the button being disabled even if the text box was populated. This new example solves this issue.

See a MVVM version of this here:
Using MVVM with HTML5 and JavaScript

3 Column Table Layout verses 3 Column HTML5 Layout

Has HTML5 and CSS3 solved the layout problem? Or are tables layouts with CSS still a better solution.

You decide. Please post comments about other pros and cons you find. We all become experts when we all contribute.

Note: With both a table layout and an HTML5 layout, CSS is used, so this is not a CSS versus anything article. No matter which you use, lets agree that CSS should be used for style. However, CSS3 does add to the layout with the HTML5 solution.

3 Column HTML Table Layout with CSS Style

Click this link to see this layout: 3 Column HTML Table Layout with CSS Style

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>HTML Table Layout with CSS Style - 3 Column</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
 
html, body 
{
  height: 100%;
}
 
body 
{
    margin:0
}
 
table.layout 
{
  height:100%;
  width: 100%;
  border-collapse:collapse;
}
 
td.header 
{
  padding: 15px;
  height: 120px;
  color: white;
  background: black
}
 
td.nav-bar 
{
  padding: 15px;
  height:20px;
  background:DarkGrey;
}
 
td.leftcol 
{
  padding: 15px;
  width: 170px;
  min-width: 170px;
  background-color:Navy;
  color: white;
}

td.midcol 
{
  padding: 15px;
  min-width: 625px; /* Make 425px for min res of 800x600 */
}
 
td.rightcol 
{
  padding: 15px;
  width: 205px;
  min-width: 205px;
  background-color:Navy;
  color: white;
}
 
td.footer 
{
  height: 120px;
  background: DarkGrey;
  text-align: center;
}

</style>
</head>
<body>
<table class="layout">
	<tr>
		<td class="header" colspan="3">Header</td>
	</tr>
	<tr>
		<td class="nav-bar" colspan="3">Nav bar</td>
	</tr>
	<tr>
		<td class="leftcol">Aside left</td>
		<td class="midcol">Article</td>
		<td class="rightcol">Aside right</td>
	</tr>
	<tr>
		<td class="footer" colspan="3">
			<a href="http://validator.w3.org/check?uri=referer">
				<img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Strict" height="31" width="88" />
			</a>
		</td>
	</tr>
</table>
</body>
</html>

HTML Table Layout Pros

  • Validated with W3C
  • Only 95 lines of code with everything on its own line
  • Works with every browser according to BrowserShots.org
  • Very easy to use.
  • Making the table be 100% height is easy
  • Changing the width or height of any part of the page is easy

HTML Table Layout Cons

  • Layout is coupled to the HTML, layout would be best decoupled – Solved by using scripting languages like PHP and ASP.NET
  • Left column is found in HTML before the article body – No current solution

3 Column Layout HTML5 with CSS Layout/Style

Click this link to see this layout: 3 Column Layout HTML5 with CSS Layout/Style

<!DOCTYPE html>
<head>
<title>Layout HTML5 with CSS Layout/Style - 3 Column</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
 
html, body 
{
  height: 100%;
}

body 
{
    margin:0
}

header 
{
  padding: 15px;
  min-height: 150px;
  color: white;
  background: black
}
 
nav
{
  padding: 15px;
  min-height:20px;
  background:DarkGrey;
}

#main 
{ 
  /* height:100%; */ /* Broken with it, broken without it */               
  display: -moz-box;				/* Firefox */
  display: -webkit-box;				/* Safari and Chrome */	
  display: box; 					/* Future standard */
}

#main-aside-left
{
  padding: 15px;
  width: 170px;
  min-width: 170px;
  -moz-box-ordinal-group: 3; 		/* Firefox */
  -webkit-box-ordinal-group: 3; 	/* Safari and Chrome */
  box-ordinal-group: 3; 			/* Future standard */
  background-color:Navy;
  color: white;
}

article 
{ 
  padding: 15px;
  min-width: 625px;					/* Make 425px for min res of 800x600 */
  -moz-box-flex: 2; 				/* Firefox */
  -webkit-box-flex: 2; 				/* Safari and Chrome */
  box-flex: 2; 						/* Future standard */
  -moz-box-ordinal-group: 2; 		/* Firefox */
  -webkit-box-ordinal-group: 2; 	/* Safari and Chrome */
  box-ordinal-group: 2; 			/* Future standard */
}

#main-aside-right
{
  padding: 15px;
  width: 205px;
  min-width: 205px;
  -moz-box-ordinal-group: 1; 		/* Firefox */
  -webkit-box-ordinal-group: 1; 	/* Safari and Chrome */
  box-ordinal-group: 1; 			/* Future standard */
  background-color:Navy;
  color: white;
}

footer 
{
  height: 120px;
  height: 120px;
  background: DarkGrey;
  text-align: center;
}

</style>
</head>
<header>Header</header>
<nav>Nav bar</nav>
<div id="main">
   <article>Article</article>
   <aside id="main-aside-left">Aside left</aside>
   <aside id="main-aside-right">Aside right</aside>
</div>
<footer>
  <a href="http://validator.w3.org/check?uri=referer">
    <img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Strict" height="31" width="88" />
  </a>
</footer>

HTML5 Layout Pros

  • W3C validated (experimental)
  • Article data comes before the data in the asides – This is a huge SEO bonus
  • Only 97 lines of code both CSS and HTML code, with everything on its own line
  • Very easy to use.
  • Making the table be 100% height is easy
  • Changing the width or height of any part of the page is easy

HTML5 Layout Cons

  • It doesn’t work on IE 9 or below and fails in many other browsers according to Browsershots.org. – No current solution.
  • Much of the CSS has to be duplicated – No current solution but when it is fixed, the code will be another 10 lines smaller
  • If the content does not fill the screen, there is no way to make the screen exactly 100% – No current solution but as long as the content is larger than the screen this doesn’t matter
  • Layout is coupled to CSS,  a styling tool, layout should be decoupled – Solved by having a separate CSS file just for layout

Conclusion

Use Table layouts for now if your browser support is high priority.

Use HTML5 layouts if you can enforce uses to use HTML5 capable browsers.

I demand a simpler CSS for HTML5!

Look, I love the browser as much as the next person, but that is as a user. I have no love for web development and the developers of html and css and the browsers are the reason why. Some things are not as hard as they are making it out to be.

HTML5 is becoming all the rage and the buzz world of the day. “Hey, just use HTML5 and all your problems will be solved.” Non-technical decision makers (and technical ones for that matter) are buying this. What nobody tells these people is that HTML5 is a current problem in and of itself. First, it is not a complete standard yet. Second, everyone is implementing the standard now, but doing it slightly differently. The problem is exacerbated by the use of vendor specific tags for future standards.

There are 13 known prefixes.

prefix organization
-ms-, mso- Microsoft
-moz- Mozilla
-o-, -xv- Opera Software
-atsc- Advanced Television Standards Committee
-wap- The WAP Forum
-khtml- KDE
-webkit- Apple
prince- YesLogic
-ah- Antenna House
-hp- Hewlett Packard
-ro- Real Objects
-rim- Research In Motion
-tc- TallComponents

The design currently is the implement a feature first using a vendor tag and only later make it a standard feature. It is not possible to sustain this model for browser progress.

Could you imagine if there was a setting and every vendor implemented it with its prefix. For example, the display setting is already a problem and could get worse. What if it was as bad as this?

#main
{
  display: -ms-box;
  display: mso-box;
  display: -moz-box;
  display: -o-box;
  display: -xv-box;
  display: -atsc-box;
  display: -wap-box;
  display: -khtml-box;
  display: -webkit-box;
  display: prince-box;
  display: -ah-box;
  display: -hp-box;
  display: -ro-box;
  display: -rim-box;
  display: -tc-box;
}

Is it  possible that we may someday have to call a setting for each an every vendor prefix? Sure, but it is not likely. Ok, that above is a little absurd and an exageration, as nobody would use all those tags, we don’t even know what half those vendors are. However, even twice is too much! Do we really want to call a setting more than once? Should we ever have to? No, we shouldn’t. That is one of the biggest problems with web applications today.

I just can’t believe that we as developers are putting up with this html/css/browser problem.

I have to put the setting that is going to be the standard, and then for each browser, I have to put the browser specific setting. They are not smart enough to have each browser use the same tag for future standards, maybe something like -fs- for future standard, but instead lets use the vendor specific tag -moz- for mozilla and -webkit so we have to have a different tag for the same setting added for every browser we wish to support.

This is nonsense. I am so embarrassed for the organizations and their developers who have brought us to this point. We have to make every setting multiple times? Really? I am so glad I am not a developer for a browser because I take pride in my work and I would be so embarrassed to be part of such a mess.

How is it that browser developers aren’t smart enough to figure out a way we can use a single css tag, even for future standards?

Too many browsers

Competition is supposedly a good thing right? Well, I am not so sure that when dealing with free projects that is the case. I believe it is true for competitive businesses, but nobody is selling a browser.

Browsers are starting to sprawl worse than Linux. How many browsers do we rally need?

Here is a short list of browsers and they are all free:

  • IE 6, 7, 8, 9
  • Firefox
  • Chrome
  • Opera
  • Safari
  • Konqueror (KDE)

Sometimes with free projects, different from commercial projects, a division of the work force is a bad thing. I feel the same way about browsers as I do for Linux. If two groups worked together, they would often get more done than working apart. Sometimes there are natural divisions that lead to benefits in different areas, such as a desktop Linux version versus a server Linux version. With browsers there really isn’t a natural division like that.

We are re-inventing the wheel with each browser.

Unfortunately, control of the browser is coveted. The browser is the single most used application by the billions of computer users on our world. Controlling something as simple as the default browser homepage could mean the difference of millions, and perhaps billions, of dollars in advertising sales.

So to me, the question is this: How can we have a single browser but every commercial company still gets this “control” that they so desperately want?  Wow…once you really get the question pinned down, the answer is easy.

There is no reason that a single browser shouldn’t exist and all current browser developers could stop working on their browser and get one single browser to work. Use a BSD license so Windows and Apple and everyone else could include this browser with their own default settings (the default home page however they want, etc…), and mobile phones could do the same.

Then the next time the standard is increased from html5 to html6, we won’t have the mess we have now trying to go to html5. And we won’t have to wait as long because the combined efforts will take us to there so much faster.

Monitoring the uptime of your blog

So my blog was down and I didn’t know. The mysql server and CPanel were down, actually.

I decided I should set up a monitoring service so I set out to find one.

I found this article:

http://mashable.com/2010/04/09/free-uptime-monitoring/

This was the first one on the list and it will monitor up to 50 sites for free  every 5 minutes and try to send you email or texts if your site is down.

http://www.uptimerobot.com

Google pulled this site up and while it only monitors one site for free and only at 30 or 60 minute intervals, it seems to have some statistics for you.

http://www.siteuptime.com/

 

Table Layouts still win over CSS layouts in 2012

The longer I am blogging and the more often I mess with my html layout (which is done in CSS) the more I come to realize that while CSS is a solution for HTML layouts but it is not a good solution and it has in my opinion completely failed to address the layout problem.

Look at any development language, GTK, QT, wxWidgets, Windows Forms, Windows Presentation Foundation, and a dozen others and they all have simple and easy to use layout systems. It is common to have Grid layouts, wrapping layouts, and more.

What does CSS2 and HTML4 have specifically for layout?

Nothing specific to layout. A div is not specific to layout. I was using what the author called Holy Grail 3 column liquid-layout. However, after two days, I still can’t change the width of my right side bar without breaking the layout in some way, which is mostly because the layers and layers of div elements is a mess in this layout.

What does CSS3 and HTML5 have specifically for layout?
They have new elements: article, aside, audio, bdo, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, mark, meter, nav, output, progress, rp, rt, ruby, section, source, summary, time, video, wbr

However, while you can use HTML5 and CSS3, just be aware your website will only look good in newer browser. Please don’t try to view your site on Windows XP with IE7 or IE8.

I want the developers of Firefox, Opera, Internet Explorer, Safari, Chrome, HTML5 and CSS3 to know that when it comes to layout, YOU HAVE FAILED!!!!

If there is one reason that I wish Silverlight could become the de facto internet standard is for the simple reason that the layout features in XAML are so far superior than those of even the new HTML5 and CSS3 that there isn’t even a comparison.

So what is the solution to an easy HTML layout?

It just doesn’t get easier than the good old table layout, but you can at least style your layout with CSS.  CSS is good at styling even if it fails at layouts.

Look how easy it is:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>3 Column Table Layout</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">

html, body {
  height: 100%;
}

body {
    margin:0
}

table.layout {
  height:100%;
  width: 100%;
  border-collapse:collapse;
}

tr.header {
  height:150px;
  background:black
}

tr.menu {
  height:50px;
  background:DarkGrey;
}

tr.body {
  height:100%;
}

tr.footer {
  height:150px;
  background:DarkGrey;
  height:150px;
}

td.leftcol {
  padding: 15px;
  width: 170px;
  min-width: 170px;
  background-color:Navy;
}

td.midcol {
  background-color:Grey;
  min-width: 625px; /* Make 425px for min res of 800x600 */
}

td.rightcol {
  padding: 15px;
  width: 205px;
  min-width: 205px;
  background-color:Navy;
}
</style>
</head>
<body>
<table class="layout">
<tr class="header">
<td colspan="3"></td>
</tr>
<tr class="menu">
<td colspan="3"></td>
</tr>
<tr class="body">
<td class="leftcol"></td>
<td class="midcol"></td>
<td class="rightcol"></td>
</tr>
<tr class="footer">
<td colspan="3">
  <p style="text-align: center;">
    <a href="http://validator.w3.org/check?uri=referer">
	  <img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Strict" height="31" width="88" />
    </a>
  </p>
</td>
</tr>
</table>
</body>
</html>
  1. t took less than 30 minutes to make this layout.
  2. It still uses CSS to style the layout.
  3. Changes are easy (any column can be re-sized in seconds).
  4. Left and right columns are always the same height.
  5. The background colors always extend vertically as far as needed.
  6. It is of course, W3C compliant.

Sorry CSS, until you have a real layout solution I think you lose to a good old-fashioned table.

But what about dynamically changing the layout?

Well, lets face, it. Dynamic changes are done in code anyway, and any good developer can code up that solution. Besides, most web sites are using some sort of Content Management System, like WordPress, Drupal, SilverStripe, or others. Each of these allow for Themes or Styles and so you can easily code up a way to switch styles with code such as php, asp.net, ruby, or any programming language.

How to add a corner banner to your web page?

Today I noticed that a few sites, including WordPress.com have a corner banner on their pages to help alert others to a specific cause (in this case they are against SOPA & PIPA).

And so everyone can add a corner banner to their sites, I am going to post how to do it.

Step 1 – Create the image

There are dozens of ways to create the images and if you can create it yourself, just do so.

Note: While I for this cause WordPress would care if you used their image, I thought it best to make my own if for no other reason than to use my color style.

  1. Using your favorite image editor create a new image.
    Note: I am going to use the free Paint.NET program.
  2. Change the canvase size to be a square. Use a size between 150×150 to 200×200. I went with 175×175.
  3. Make the background transparent.
  4. Draw a line from corner 0,0 to corner 175,175.
    Note: In some applications, holding down shift while drawing your line will guarantee the line is a perfect 45 degree diagonal.
  5. Draw a second line from  60,0 to about 175,115.
    Note: Mine came out to 175,114, which is close enough.
  6. Fill the  area inside the lines as you desire.
    Note: I used a nice soft gradient.
  7.  In a new layer (also transparent), add text in a normal horizontal way.
  8. Rotate only the new layer 45 degrees. (-45.00 degree.)
  9. Show both layers.
  10. Move the text to the appropriate place in the image.
  11. Save as a png or jpg file.
  12. Upload the image to your site.

Here is my image. Feel free to download it and use it.

Stop Censorship

Step 2 – Change your web site code to display the image

  1. Add the following style to your css file.
    #right-corner {
    	position: fixed; /* Make sure you can align it exactly */
    	cursor: pointer; /* Change the cursor on mouse over */
    	top: 0px; /* Change to 100px to put it under a 100px banner */
    	right: 0px; /* Change to 100px to put it left of a 100px right-side bar */
    	z-index: 99999; /* make sure it is the top element always */
    }
    

    Note: If you do not have a css file, then go to step two and add this as well in step 2.

    <style>
    #right-corner {
    	position: fixed; /* Make sure you can align it exactly */
    	cursor: pointer; /* Change the cursor on mouse over */
    	top: 0px; /* Change to 100px to put it under a 100px banner */
    	right: 0px; /* Change to 100px to put it left of a 100px right-side bar */
    	z-index: 99999; /* make sure it is the top element always */
    }
    </style>
    
  2. Open whatever html or script file that create the top part of your web site.
    Note: Often it is a top.htm, header.htm, or something similar.
  3. Find your <body> tag and add a link to http://americancensorship.org anywhere inside the <body> tag.
  4. For the tag, set the “id” to the css id called right-corner.
  5. Put your image inside the link.The code should look as follows:
    <a id="right-corner" href="http://americancensorship.org/" target="_blank">
    	<img src="/wp-content/uploads/2012/01/Stop-Censorship.png" alt="Stop Censorship">
    </a>
    
  6. Save your changes.
  7. Refresh your page.

You now have a corner banner image on your page.


While I want to add a corner banner to my site and state that I am against SOPA and PIPA as well, here is my disclaimer:

I haven’t fully read the SOPA & PIPA document, so I am against it based on hearsay…but it is reliable hearsay. Also there may be statement in the document that I am for. Instead of telling you what I am against in the SOPA & PIPA document, it is easier just to write my thoughts.

  1. The U.S. Government should not censor the internet for the public in any way.
  2. The government should in no way tamper with or hinder the freedom of speech on the internet
  3. Certain organizations, such as parents at home, schools, or a business (except ISPs) may censor/filter the internet for their specific internet connection. (And hence anyone only using their internet access is also censored).
  4. The Government may censor the internet in locations they naturally control, such as in Government Buildings, military facilities, or government-paid-for schools.
  5. An ISP may provide an optional censorship/filtering service so long as it is not applied by default or when not specifically requested. If the ISPs whole business plan is based on the idea of a safe internet for families, such as MStar, then defaulting to enabling certain censorship/filtering service is allowed.
  6. Internet Registrars may enforce rules that make filtering easier, like having all porn sites end in .xxx or all gambling sites end in .gmb so they can easily be filtered, especially in homes, schools, and some work places.  But enforcement should be done by agreement of internet registrars and not really by the U.S. Government.
  7. The government should pursue theft of intellectual property the same on the internet as is does with theft of intellectual property off the internet with one stipulation: Only the most minimal part of a site should altered. For example, if a site posts a copyrighted movie, only the movie itself should be removed, every other part of the site should remain, including a broken link to the movie.

If the bill could be written with those few sentences, it would pass easily and I don’t think anyone would care.

CSS is a solution for HTML layouts but it is not a good solution

I don’t want to offend any CSS purists out there, but the more I use CSS the more I realize that is isn’t the best tool in the toolbox for layout. I am not saying html tags such as table layouts are better, but I am saying that there were problems that CSS was written to resolve, and as I understand it HTML layouts and page design is one of them, but even after 10 years it is nowhere near where it needs to be in a few areas:

  1. Feature set
  2. Simplicity
  3. Readability is low
  4. Ability to translate functionality into an IDE is poor (as seen by the fact that there is not good CSS IDE)

A while back I found a three column layout and posted about it: http://www.rhyous.com/2011/02/26/the-perfect-layout-for-a-three-column-blog/

At the time, I thought, great someone has figured out all the complexities for me. Well, actually no, they didn’t.  Trying to implement this for a blog design has been a nightmare because I want even more features and adding them to the design has not worked out very well. The design is great, and the author, Matthew James Taylor, should not think that I am trashing his work. No, not at all. He provided an excellent solution. No, instead, I am trashing CSS and its sub-par implementation.

How is it that after so many years and so many versions, CSS is overly complex and the “tricks” such as making  div elements embedded in div elements as Matthew James Taylor used, work but barely and they cause almost as many problems as they solve.

Now I have a problem trying to make the columns on the left and right have rounded corners.  Not going to happen. The way the nested div elements were used to make the background color go all the way down also seems to mean that four rounded corners in each column extending the lengthe of the screen is not likely to happen without more CSS tricks.

I need to add a menu bar, as this layout didn’t have one, but I need the menu bar to also have a drop down menu for submenu items.  However, the way this CSS layout used the div inside div trick, makes the drop down menu below the middle column so that is a problem.

Had I used a table to layout my site, it would be done already. Now, it wouldn’t be the most maintainable but it would be done.  However, maybe a programming language such as PHP or ASP.NET could be used to improve the maintainability.

So to all those who are participating in the CSS standards, please go back to the drawing board when it comes to the layout:

  1. It seems a sub-par job separating the design from the code.
  2. It seems a sub-par job providing an easy tool for laying out a website. You have left us with a tool that is not good enough!
  3. There are not any good IDEs for CSS and HTML (No, neither Dreamweaver or Expression Web are good for laying out web pages, but you know what, it isn’t the fault of the IDE!)

You did solve some of the easy parts quite well, most of the parts that are not “layout” but more just color schemes.

  1. Change font-size and color works great.
  2. Float something to the left, great.

However, a simple feature of “as tall as the page” or the idea of a few elements where all but one are fixed size and the one that isn’t stretches the width of the height of the screen doesn’t exist. It seems to be there for width, but not for height or else it is there but just too hard to get.  For example, look at the three column design.  The reason the author had to nest the div elements was to get the three column div elements to extend all the way to the bottom of the page.  Without this hack, when there are three columns (left, middle, right) normally each one is a different length.  Really, CSS hasn’t solved this with a simple solution, yet? Sorry to be critical, but after this long, it should be better.

Here is what I want it shouldn’t be so difficult.  These tags don’t exist, this is a hypothetical of what I want.  Funny that as I write this some is similar to WPF, which is far superior to CSS for layout design IMHO.

<div name="Header" width="stretch" height="100px"> .... </div>
<div name="Menu" width="stretch" height="sizetocontent> .. </div>
<div name="Columns" width="stretch">
    <Group type="Horizontal" width="stretch">
        <div name="LeftCol" width="250px" hight="stretch"> ... </div>
        <div name="MiddleColCol" width="stretch" hight="stretch" MinWidth="300"> ... </div>
        <div name="LeftCol" width="stretch" hight="stretch"> ... </div>
    </HorizontalGroup>
</div>
<div name="Header" width="stretch" height="100px"> .... </div>

First off, the readability of the above syntax is amazingly clear and simple (IMO) and one does not have to wonder what is intended.

So please, powers that be of CSS, lets start over. Yes, I am aware it could take a decade but it is worth it if this time, you get it right! Look at WPF, sure it is not exactly the same, but Microsoft invested a lot of time and money into Windows Forms and they still felt the need for a new solution in WPF and it has been around 6 years and still Windows Forms are around, but more an more everyone is moving to WPF. CSS should go the way of Windows Forms, and become the old solution that a better solution is designed to replace.

Here are some more articles where people agree that CSS needs to be replaced with a better tool.  Please note as you read these posts that I don’t think CSS sucks.  I think it was a descent tool written to solve a problem, and succeeded in some areas and failed in others, and now that we know what works and what doesn’t a new better tool should be developed that keeps what works in CSS bt also succeeds where CSS fails.

Ten reasons why CSS sucks « Greg’s Head

CSS Sucks (for layout) | Accidental Scientist (this is interesting because Layout is my main complaint)

Tables vs CSS: 15 points to consider when choosing (this one has a lot of links that are not in favor of CSS)

If you are a framer for a house, a hammer is better than a wrench for nailing nails.  But a nail-gun is better than a hammer. CSS is somewhere in between. Here is a good hammer/nail gun analogy to describe CSS. Once I had a nail gun but the air compressor wasn’t quite strong enough and didn’t send the nails all the way in. So I use the nail gun because this was still faster, and did all the nailing. Then I pulled out my hammer and to finish the job.  CSS is like a nail gun without enough air.  It is better than a hammer, but not as good as it could be.

Maybe CSS doesn’t need to go away, maybe it just needs to stop doing layout.  What if it just did size and color and decoration and a new tool integrated with HTML and CSS to do layouts. But maybe it is better to have one solution for design.

Adding this post from Internet Explorer 9 to write about Internet Explorer 9

If you are using Windows and you are using Internet Explorer 9, you are becoming a minority.

W3Schools has a browser statistics site that basically is made by tracking the browsers that hit it.

http://www.w3schools.com/browsers/browsers_stats.asp

It is probably not exactly accurate because most poeple who go to W3Schools are probably in some way technical and doing some type of development, most likely for the web.  If there was a statistic built from the browsers that accessed the most popular pages on the web: Bing.com, MSN.com, Google.com, Yahoo.com, Youtube.com, Facebook.com, etc… then that would be accurate. But we make do with what we have.

This page shows that IE has a little over 1/4 the market share to start 2011, while it held over 1/3 the market share at the first of 2010.

2011 Internet Explorer Firefox Chrome Safari Opera
February 26.5 % 42.4% 24.1% 4.1% 2.5%
January 26.6 % 42.8% 23.8% 4.0% 2.5%
2010 Internet Explorer Firefox Chrome Safari Opera
December 27.5 % 43.5% 22.4% 3.8% 2.2%
November 28.6 % 44.0% 20.5% 4.0% 2.3%
October 29.7 % 44.1% 19.2% 3.9% 2.2%
September 31.1 % 45.1% 17.3% 3.7% 2.2%
August 30.7 % 45.8% 17.0% 3.5% 2.3%
July 30.4 % 46.4% 16.7% 3.4% 2.3%
June 31.0 % 46.6% 15.9% 3.6% 2.1%
May 32.2 % 46.9% 14.5% 3.5% 2.2%
April 33.4 % 46.4% 13.6% 3.7% 2.2%
March 34.9 % 46.2% 12.3% 3.7% 2.2%
February 35.3 % 46.5% 11.6% 3.8% 2.1%
January 36.2 % 46.3% 10.8% 3.7% 2.2%

So why am I telling you this, in my review of Internet Explorer 9?

Because I am telling you to get ready for the percent of IE users to rise again with the release of IE9.

So far, I have the following positive feedback.

  • Feature that weren’t working before, such as rounded corners on the red borders of the boxes on my blog, are working.
  • The browser opened with amazing speed. Yes, I didn’t just say speed, I said AMAZING SPEED.
  • The About:Tabs page that opens by default in a new tab is quite awesome and is pretty close to a replacement for the Speed dial
  • The cleanthiness of the browser is refreshing.

The negative feedback I have so far is simply one:

  • I tried to find a plugin but found the plugin page hard to find and I could not find a way to search for IE9 plugins.

Right now I dual boot between FreeBSD and Windows 7.  When I am booted to FreeBSD, I will use Firefox. Normally in Windows 7 I also use Firefox.  Right now, I am not going to install Firefox in my new Windows 7 install in my dual boot scenario unless I start to dislike IE9.

40 Web Sites for Web Developers: From Tripwire Magazine

40 Online Generators for Web Designers Should Bookmark

Quote:

Online Generators for Web Designers can be a great way to save time in your web design projects. High-quality generators can create graphics or code or even layouts in a matter of seconds or minutes, things that might take an hour or more if done by hand. Online generator are those tools that help us to create those popular “XHTML valid” CSS banners, micro buttons or css website templates in seconds. In such cases online generators can be of great help which do the necessary job and some tools don’t have to be downloaded also. We all know that backgrounds play a crucial role in a design. Web Designers sometimes spend a lot of time in making pattern or stripe backgrounds and there are also tool to help you out here. In this article, I have listed some of the online generators that can save you some time and still give you great results.

Read more…

The perfect layout for a three column blog

I have always wanted the perfect three column design for my blog. I stumbled across this web site and I think this is the probably as good as it gets.

Holy Grail 3 column liquid-layout: No Quirks Mode, No IE Conditional Comments

This is by Matthew James Taylor and I have to say I am very impressed.

I renamed the CSS id’s to something easier for me to remember. I added a navigation bar, and another div to give a white space on the right and left.

Here is the basic html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-GB">
<head>
  <title>Site Title</title>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

  <style type="text/css">
  body {
      margin:0;
      padding:0;
  }

  #ContainerMain {}

  a {
      /* color:#369; */
      text-decoration:none;
  }

  a:hover {
      text-decoration: underline;
  }

  h1, h2, h3 {
      margin:.8em 0 .2em 0;
      padding:0;
  }

  p {
      margin:.4em 0 .8em 0;
      padding:0;
  }

  img {
      margin:10px 0 5px;
  }

  #Header {
      float:left;
      width:100%;
      padding:0;
      margin:0;
      border-bottom:1px solid #000;
      background: #CCC;
      color: #FFF;
  }

  #Header p {
      padding:.5em 15px    .2em 15px;
      margin:0;
  }

  #Header h1  {
      padding:.2em 15px;
      margin:0;
  }

  #Header h2  {
      padding:.2em 15px    .7em 15px;
      margin:0;
  }

  #NavBar {
      float:left;
      width:100%;
      padding:0;
      margin:0;
      border-bottom:1px solid #000;
      background: #EEE;
      color: #FFF;

  }

  #ContainerColumns {
      margin-left: 20px;
      margin-right: 20px;
  }

  #ContainerLeft {
      position:relative;  /* This fixes the IE7 overflow hidden bug and stops the layout jumping out of place */
      clear:both;
      float:left;
      width:100%;         /* width of whole page */
      overflow:hidden;    /* This chops off any overhanging divs */
      background:#ffd8b7; /* Left column background colour */
  }

  #ContainerMiddle {
      float:left;
      width:200%;
      position:relative;
      left:200px;
      background:#EEE;    /* Centre column background colour */
  }

  #ContainerRight {
      float:left;
      width:100%;
      position:relative;
      left:50%;
      margin-left:-400px;
      background:#ff9;    /* Right column background colour */
  }

  #ColumnMiddlewrap {
      float:right;
      width:50%;
      position:relative;
      right:100%;
  }

  #ColumnMiddlepad {
      margin:0 15px 0 415px;
      overflow:hidden;
  }

  #ColumnMiddle {
      width:100%;
      overflow:hidden;
  }

  #ColumnLeft {
      float:left;
      width:170px;
      position:relative;
      margin-left:-50%;
      left:215px;
      overflow:hidden;
  }

  #ColumnRight {
      float:left;
      width:170px;
      position:relative;
      left:15px;
      overflow:hidden;
  }

  #footer {
      text-align: center;
      clear:both;
      float:left;
      width:100%;
      padding:0;
      margin:0;
      border-top:1px solid #000;
      background: #CCC;
  }

  #footer p {
      margin: 0px;
      padding: 0px;
      font-size: 12px;
  }
  </style>
</head>
<body>
  <div id="ContainerMain">
    <div id="Header">
      <h1>Site Name</h1>
      <h2>Site Tag Line</h2>
    </div>
    <div id="NavBar">Home</div>
    <div id="ContainerColumns">
      <div id="ContainerLeft">
	<div id="ContainerMiddle">
	  <div id="ContainerRight">
	    <div id="ColumnMiddlewrap">
	      <div id="ColumnMiddlepad">
		<div id="ColumnMiddle">
		  <!-- Column 1 start -->
		  <p>Middle Column</p>
		  <p><a href="www.rhyous.com">http://www.Rhyous.com</a></p>
		  <h1>Heading 1</h1>
		  <h2>Heading 2</h2>
		  <h3>Heading 3</h3>
		  <!-- Column 1 end -->
		</div>
	      </div>
	    </div>
	    <div id="ColumnLeft">
	      <!-- Column 2 start -->
	      <p>Left Column</p>
	      <!-- Column 2 end -->
	    </div>
	    <div id="ColumnRight">
	      <!-- Column 3 start -->
	      <p>Right Column</p>
	      <!-- Column 3 end -->
	    </div>
	  </div>
	</div>
      </div>
    </div>
    <div id="footer">
      <p>Footer</p>
      <p>This is where you put your footer stuff.</p>
      <p>
	<a href="http://validator.w3.org/check?uri=referer">
	  <img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Strict" height="31" width="88" />
	</a>
      </p>
    </div>
  </div>
</body>
</html>

Using CSS to make an html numbered list have text before the number

I often use lists that look as follows:

  • Is in the format of Step #
  • Doesn’t indent.

It is a little more complex than it needs to be to do this in HTML but still doable.  The below list is an example.

  1. The first thing to do.
  2. The second thing to do.
  3. The third thing to do.

So how is it done? Well, it is done with CSS.

  1. Add your CSS
    ol.Steps {
    	counter-reset: section; // Make sure each new list starts at 1.
    	list-style-type: none;     // Removes the standard numbers.
    	padding: 0;                   // Removes padding so there is no indent.
    	margin-left: 0;               // Removes margin so there is no indent.
    }
    
    ol.Steps li:before {
         counter-increment: section;                  // Defines the counter increment to use.
         content: "Step " counter(section) " - ";  // Adds content before your content.
    }
    
  2. Add your html
    <ol class="Steps">
    	<li>The first thing to do.</li>
    	<li>The second thing to do.</li>
    	<li>The third thing to do.</li>
    </ol>
    

Easy enough.

This is also good when you need any word in front of the number such as: Chapter, Section, Item, etc…

Checking for html errors in your website or blog

So in doing a new web site or blog site, an error can be problematic.  One browser might ignore it, but another can completely be messed up.

You may open your website in Firefox and everything looks fine.  But then you check Chrome, IE, Opera, Safari, and in one or more of them your website looks completed messed up.

How to find html errors in your site

Well, this is where http://validator.w3.org comes in.  This web site will “browse” your website for you and parse the html in your website and report back errors.

  1. Go to http://validator.w3.org.
  2. Enter your URL in the Address text field.
  3. Click Check.

If you have errors they will be displayed, as well as the line number in your html source where the error occurs.

If you don’t have errors you will get a “Congratulations” and also be provided with some code to put on your site to say that your site is checked and “valid”.

Valid XHTML 1.0 Transitional

Being Thorough

For a static website, this is easy.  Check your pages once and since they rarely change, you are good for a long time.

For a blog, this is more complex. To be thorough you would have to check every post. Or only check a post if it is a problem.