23rd World

The newly released Google Doctype is intended to be the Wikipedia of web design. There’s a video introduction on the landing page of Mark Pilgrim explaining what Google has been internally calling the the “Hitch Hikers Guide to the Web”. He’s been working on Google Doctype, said it is supposed to be the cross-platform alternative to MSDN. MSDN? I don’t know any web designers that rely on MSDN as the go-to spot for quality cross-platform client-side code! Maybe they’re targeting ASP.NET developers…and that could explain the very un-wiki linear treestyle navigation.

The Good

My own private wiki, largely comprised of web development documentation for my own projects, code snippits and links to online resources, is invaluable to me - so the potential benefits of an open wiki of this nature is obvious and I’ve often wondered why there isn’t one (with critical mass) out there already. Certainly this project, or at least the idea of it, could be an invaluable tool to professional web designers and client-side developers. Some take-aways:

• “Written by web developers, for web developers” and by that they mean client-side developers…most of the current content is specific to JavaScript DOM stuff and cross-browser CSS considerations. I think this fills a knowledge gap as a lot of CSS and even Ajax resources are designer-oriented (lacking meaty technical details) and many developer resources gloss over or ignore web standards or a lot of the details professional programmers take for granted (like finding a viewport or using javascript to manipulate classes)
• It’s built on the Google Project framework so you can download the whole thing via SVN.
• The licensing is pretty unrestrictive, so you could SVN everything and put it up on an intranet statically or keep an off line copy, as was mentioned in the intro video.
• Discrete code snippets. Rather than a long tutorial with examples that are specific to a given situation, many of the HOWTOs are broken down into more abstracted uses. This style of documentation will help a lot when your stuck on specific area of a bigger project. Personally, I learn more this way - I like the big step-by-step tutorials but when I cut and paste a lot I don’t retain very much.

The Ugly

Google suffers from chronic ugliness (IMHO) and this project is no exception. Don’t get me wrong, I’m GOOG fangirl all the way, but there always seems to be some basic user interface and user experience problems with their apps/portals/projects/whatever. And here’s where I think Google Doctype has need of improvement:

• No indication of off-site links. Not only does a link to MSDN look just like the internal links, there are links to other Google Code project without any indications that you’re leaving Google Doctype, in fact, the logo is still Google Code. Navigation is a little confusing in general.
• Lack of Style Guidelines. There is something to “just putting it out there” and I’m glad they did, but if a lot of people do start adding to this resource it could turn into quite a mess. It would have been ideal to have a written style established that would make sense for an open wiki. For example, statements like “generally, we recommend the following…” and “I’m not sure if this works on IE”. This type of thing would never fly on Wikipedia - now that the docs are open to the whole internets, such statements are ambiguous, lack authority and create a bad example that others are sure to follow.
• Not really a wiki. First there’s the linear tree/node navigation pane (which seems to collapse by itself and disappear or reappear for no apparent reason) . There is no discussion page (although there are comments, sort of like PHP.net), no page history (but you can manually add a free-form line to a log file, if you notice the option), there’s no obvious way to check to see what links to a page, the list goes on.
• Screaming “Fork Me”. A fork may be inevitable, and if a fork emerges using MediaWiki or any of a myriad of much more robust wiki platforms, I would be more likely to invest my time in that in spite of the Google mind share.

A Web Reference To Rule Them All

When I first read that Google published a web design wiki I was thrilled. I tried to think of other, similar resources. There are some great blogs, lists and forums out there but I’ve yet to find the one web reference to rule them all. If you know of one, please let me know! In the meantime I’m looking for domains…webwiki.com is just a db error, webwiki.net is a half-baked attempt at a wiki version of the Million Dollar Homepage. Hrm. If I come up with a load of extra time and a brilliant idea I will let you know. In the mean time, here are a few of my favorite web coder sites:

• W3C.org - start at the top, right?
• HTML Dog - very well organized reference and tutorials for CSS and (x)HTML
• A List Apart - high quality articles published by those web standards freaks at Happy Cog.

Oh the contact page. So boring, so obligatory. And not as simple as it may seem. I was hoping to jazz up the contact page at BuildCarbonNeutral.org with some sort of slick Ajax contact form. You see, I built the site in a really big hurry could spare not time for extras like protecting raw email addresses. By the way, email address protection is not an extra, usually! It’s something I meant to rectify as soon as possible and sure enough, our general contact alias is already receiving spam. I thought I might take the email address off completely and post a contact form instead.

The Problem with Contact Forms

Even the best form is an obstacle. Users don’t like filling out forms and what’s more, you introduce an opportunity for error. Everyone commits a typo now and again, and what if someone sends you information you’d really like to follow up on but lo and behold, their email address bounces. Even if you add the extra email confirmation input (make the user enter it twice), there’s still the case of people using an incorrect email address just to harass you. But really it all comes down to user experience. Don’t make your user fill out a form if they don’t have to.

The Simple and Sincere Mailto Link

So it’s back to the good ‘ol mailto link for me. The added benefit is people can save the email address in their contact list of choice and can format the email and send attachments if they choose. An email link is more personal, less corporate. Of course you all know that any email address present in the code of a public website is crawlable by spambots. Therefore be sure to put measures in place to protect all email addresses!

There’s Always an Exception

Sometimes you really should use a form. A common use for them is on high-traffic sites where they actually want to make it a little harder for users to get in contact. This approach is especially prevalent on sites that offer a product or service that results in a lot of support email and they want to encourage users to troubleshoot their own problem using existing documentation (FAQs, support forums, etc) before contacting the company/authors directly. Some sites don’t provide contact info at all for this reason. Chances are though, if your site is for a small business or is personal, you want to make it easier for people to contact you.

Go here.

Okay, that’s not my official answer but the Web Developer’s Handbook is an amazingly thorough link list of resources for designers and coders. My official answer to a noob who really wants to learn the right way would be to start here.

THIS ARTICLE IS A DRAFT. I still need to smooth out some bumps, and even then any instructions found here are for your information and include no warranty or support. Use at your own risk and all that...

I've been using an amalgamation of hacks to track all the information I want to be able to recall later: del.icio.us for bookmarks, gmail for contacts and random notes, private blog entries for some organized content, and tracks for tracking projects. Blech. It's just too much. My memory is too weak. What I really want is a comprehensive PIM (Personal Informatio Manager). And so I installed MediaWiki because that's what Wikipedia uses and that's what Dreamhost offers as a One-Click Install (e.g. the path of least resistance).

I thought I'd share with you all the the process of customizing the default install to create a private wiki. Following are the specifics to my install but this will probably be helpful to many with a different host or newer version.

• Create a subdomain for your MediaWiki install, such as, wiki.yourdomain.com. Select PHP 5.x (not 4.4.2) and leave Extra Web Security.
• Install MediaWiki. Dreamhost walks you through this and it's also covered at the Dreamhost Wiki so I'm not going to go into detail here. But be sure to move the newly generated LocalSettings.php to the parent directory, and delete the config directory with its content.
• Chmod LocalSettings.php to 600
• Create a backup copy of LocalSettings.php, rename it something like .BAK instead of .PHP or something. Put it back in your Wiki install directory right away so it's safe and available if you need it later.

Restrict Wiki Access

Before bothering to put up our own cute logo or other fun stuff like enabling image linking and using clean urls, we're going to lock down our install. I didn't find a lot for this particular intent on the official MediaWiki Docs or the Dreamhost Wiki, but I did find this old Meta Wiki Article

• Prevent new user registrations. Add the following line to the bottom of LocalSettings.PHP:
  # This snippet prevents new registrations from anonymous users
# (Sysops can still create user accounts)
$wgGroupPermissions['*']['createaccount'] = false;
• Make sure it's working by trying to create an account. You should receive an error message that says username not found, please create an account. To change the message login as yourself (you should have set up a Sysop login when you configured your wiki) and point your browser to wiki.yourdomain.com/index.php?title=MediaWiki:Nosuchuser&action=edit.
  I changed my message to:

  There is no user by the name "$1". This wiki is private and therefore closed to new accounts. Please contact Mahalie if you have any questions.

  I intentionally failed to provide contact information. If a user doesn't even know how to contact me, they really don't need an account on my private wiki!
• Prevent anonymous users from reading by adding the following to LocalSettings.php: # Disable reading line, for anonymous (not-logged-in => * ) :
$wgGroupPermissions['*']['read'] = false;

# ... and enable anonymous to read the followings pages :
$wgWhitelistRead = array( "Main Page", "Special:Userlogin", "-", "MediaWiki:Monobook.css" );

# ... same in an other language (French, with one UTF-8 special characteres) :
# $wgWhitelistRead = array( "Page Principale", "Special:Userlogin", utf8_encode('Aide en français'));

• Verify setting by logging out of your wiki and attempting to browse. You should get a 'Login Required. You must login to view other pages.' when clicking on any local link and the page should redirect to the main page after a few seconds.
• If you want to hide the side navigation if the user isn't logged in (because, perhaps you have private project names or something) edit includes/Skin.php and change the function buildSidebar(). Add these lines near the very top, after the globals.: global $wgUser; if (! $wgUser->isLoggedIn()) { return array(); } This will hide the navigation on sup-pages (not the default main page)

p.s. WebWorkerDaily just published 15 Productive Uses for a Wiki in case you're wondering why someone would want to do this!

Google Code Search indexes contents of zip and tarball files and best of all, you can use regular expressions in the query field when searching, as seen in the screenshot from the search page (above).  One thing I noticed was the conventient search language feature, but it’s convenient only for certain languages. All the expected big boys work, searching for lang: and c, c++, c#, java, jsp and even javascript return plenty of hits.  Oddly lang:asp works but lang:vb, vb.net, or visualbasic all return nada. I guess there’s another reason to use c# instead of vb. via: techcrunch

SitePoint, a great web development resource, posted survey results from over 5,000 web designers on the State of Web Development. An interesting read, I was amazed at how there was no clear lead in platform.  Also, the sheer numbers of PHP vs. .NET developers was suprising but I think this is a testament to their readership…if they had poled 5,000 web developers via ASP.NET forums they’d get entirely different results.

I’ve been doing a lot of .NET tutorials but hadn’t yet applied much to the real world. The one .NET app I’ve done for work so far was largely designed to the constraints of my experience, unfortunately. I was curious to see how difficult it would be to design a dynamic ASPX page that lived up to my usual standards - aesthetically, usability-wise and functionally. In this case, I wanted to add a summary table of all the data collected from a web form that was written in classic ASP, XHTML/CSS and Javascript.

Easier than I thought! I created a “new website” in the location of the old asp pages, Visual Studio automatically adds server extensions (an isolated app pool) and, though VS actually warned me, I had to manually set the directory to use ASP.NET 2.0 framework. The solution explorer view automatically included all of the content in the website project. I created a new web form page, copied the framework xhtml from another page in the directory (sans ASP) by viewing the source in a browser (there were a lot of logic loops so it was much easier this way), fixed a couple small errors that VS 2005’s intellisense picked up right away, and then went into design view - dropped an Access (OLEDB) datasource and a datagrid to consume it on the page, configured that, added CSS classes to make it pretty, and walah! I couldn’t flippin believe it
It’s so easy to expose database data and include paging and sorting automatically. That’s the power of the datagrid - displaying data from a database in ASP is no big deal (once you’ve worked out security issues and connection strings in your environment) but extra things like paging and sorting, while certainly doable, are no where near as easy. What surprised me the most, other than the shocking ease of creating a more or less XHTML compliant page using asp.net datacontrols, was how nice Visual Studio 2005 was as a general editor for old ASP pages and CSS files.

It was timely coincidence that an article called Microsoft Visual Studio 2005: Productivity Study appeared on the top of the article stack that is presented to you on opening VS 2005. The article had a big callout stating:

ASP.NET 2.0 developers accomplished 113% more tasks in the same amount of time as ASP developers; ASP.NET 2.0 developers created web content pages up to 357% faster than ASP developers.

I actually thought the first number was low, if in fact they were using experienced .NET developers, as so much is automated, you have a full programming language to use and a plethora of built-in objects to leverage. But then the article continued:

The approach to this study was to recruit experienced developers in each of the development disciplines, ASP and ASP.NET 2.0. This resulted in two equal-sized developer groups, four developers in each group.

And then I stopped reading. I mean, why bother? A total of 8 developers made up their test case? WTF?! This is a pseudoscientific approach that is more like a raffle than a real study you can actually derive meaning from.

From my personal and to date, somewhat limited, perspective - I think it’s the paradigm shift and learning curve that makes new developers (like me) slow as molasses on .NET. There are a lot of developers who are really comfy in classic ASP and having gone from PHP to ASP for work, I can say it’s much easier than going to .NET…initially.

Once a developer has a good grasp on OOP and resources available in .NET framework I would guess the numbers are likely more disparate. Throw in a few different types of programming challenges, a larger test case, and make sure to include some projects the devs don’t already know how to do…then you start to see how much more (or less) developing in .NET is. I would like to read that report when and if it becomes available.

Web Design is not what it used to be. It’s now a sort of nebulous term that encompasses a LOT of technologies. No matter what sort of sites you plan on designing, I feel there’s no substition for a good understanding of standards-compliant xhtml and css. Of course, it helps if you know some graphics programs too, like Photoshop or the cheaper alternative, Paintshop Pro. Notice I didn’t mention any web design programs…well, I said learn web design not make a website real quick and dirty like.

Here’s some of my advice under ‘Learn Web Design‘ at 43things…a place where people tag, discuss and connect about things they’ve done and would like to do.

Getting started.
A word on web standards.