Webspinner Tech Blog

So this last week I have been Designing a Blogger theme as part of a larger project for my friend and ally Paul Kooiman and the process was actually really enjoyable. I was able to overcome some interesting technical hurdles, implement some fun doodads to enhance the nature of his blog and just generally outline what I think is a good approach to taking a Blogger Theme project on.

I first outlined the things we needed to accomplish:

• Had to look simple and elegant, Client provided some Blogs he liked
• Showcasing Photographic content, use jQuery and Lightbox to get a polished look
• Branding is all lowercase letters; orange, white, grey; match existing collateral

Next it was time to get a baseline and listen to some music. I grabbed the simple Blog theme, expanded the widgets in Edit HTML mode and copied the contents out to SciTE for editing. Ended up saving this file as an xml file which worked out for handing the work over to the client (Darjeeling Limited Soundtrack for most of this part).

Getting your head around the CSS in the blogger themes is a bit tricky because each blogger theme kind of makes it up as they go along. I needed to a way to easily see the changes I intended to make to the css, without the save/view process getting in the way. To solve this problem I first decided to get jQuery loaded up in the theme, and view it in the Google Chrome browser, which gives me handy developers toolset for testing CSS and JavaScript from a console.(Jamaroquai, Canned Heat)

To implement jQuery quickly in blogger put this in your blogger theme xml file and upload it.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>

With this setup it was a straight forward trial and error process of utilizing jquery console selectors, for instance: Let us imagine I want to see what on the output page is affected by changing the date-header class, in the console I type $(".date-header").css("color","#f00") which will turn any text directly beneath that class bright red. This was awesome for finding all the css I wanted to include to just clean things up. For example try the following in your console:

$("#navbar").css("display","none")

So now you know the css to remove the navbar at the top.

Implementing the lightbox and custom images was a little less straight forward but was still pretty easy to achieve. First you need to determine where you will store your remote files, we needed to load a custom favicon, graphical header, javascript file, css file and all the images that go along the with the Lightbox Plugin. Once you know where everything is going to be, ftp it, set the locations on all href, src and other attributes you need. Use the same method from importing jQuery to import any other scripts and plugins you want. Make sure you do not add script tags before the </b:skin> tag.

note: You can change the header link (image) to point at your website by replacing expr:href='data.blog.homepageURL' with href='http://YOURADDRESS' in the header widget area.

I put all my document ready script at the bottom of the file, you don't have to but it made it easier to find. Anyway that is all for this post. Happy hacking.

Object hyperlinking - Wikipedia, the free encyclopedia

I got my invite today for Google Wave. Really neat! I have only gotten a couple of invites out that have resulted in people coming on. Anyway I already have a pretty good concept of the first couple of test uses for the product. First I know I need to plan next years vacation with my wife, so I was happy to find trippy available for the first post.

I was hanging around today and thinking about the qwerty problem. This mechanism was put in place to prevent typewriter jams, not much of a concern today. Today I propose a solution to the problem that enables to users used to the old way but flexibility for those living on the edge and creating the boundary. Each key or the entire keyboard surface is an LED touch interface. I prefer the first option to account for the tactile feel of pushing a key. Anyway the keys themselves are programmable and the led on the key will represent its new key assignment. This would allow users interested in creating a vowel break system or different layout without requiring a great deal of expenditure. If the software for this were released as an open source project with the purpose of devising the most effective keyboard implementation for future word input interfaces, we could expect to devise a more efficient system in just a few weeks and potentially affirm a new industry standard within a year.

I have the bug. It took me in the early evening and carried me through the next few days of heated investigation and discovery. Bouts of doubt and contemplation dotted a vast plain of consumption and digestion. Google had released its much awaited and touted open source project Chromium OS.

First I got my VirtualBox fired up and installed the image from gdgt and poked around feverishly to see what it was, what it does, and maybe most importantly why. This last point caught me unprepared. This was not my computing experience, this was not something I would use in 80% of my computer work as it is right now. I am a programmer, web application developer, graphic designer... how was I going to take advantage of this experience.

The reviewers had posted opinions ranging from the utopian to the disgusted. I was left baffled, reaching in the dark for answers and being forced to evaluate myself and my reliance on the PC experience of yore. What I soon discovered is that this was exactly what I had been wanting; for every other user in the world. It became clear to me that there has been a class based society sitting on the PC world from the beginning and google chrome set the lords and the vassals distinctly apart.

This new paradigm, the browsing experience model was brilliant for users eager to consume web applications, social networks and content. This is the PC for the masses. It is light, fast, and secure. You don't have to know what you don't know to stay protected and connected. This changes everything.

And where chrome is the village for the peasantry, the classic PC will become the Castles of the Land Owners. I see now a change for we the developers, the content providers, the makers of worlds that I have hoped for all my life. Where chrome lives on the cloud, the classic PC will become the cloud. The desktop PC must evolve into the server, the broadband connection no longer relegated to downloading but to serving up our constructions.

In turn this will result in services offering desktop like access to our castles via the chrome interface. Development will be done remotely on thin clients and compiled and published from any access point. Local will become a geographical statement once again and data will become simultaneously free and contained.

One immediately recognized reality is that linux is more suited for this transition than either Mac or Windows. The playing field will be leveled by this. Power users and creators will still get the castle of their preference, but they will act as beacons of power and community for the satellite chromebooks.

I also noted the number of people arguing against chrome for its absence of desktop applications, some for their graphics applications (photoshop), others for their business software. I use aviary.com now for most of my graphics work, and it works beautifully on chrome (though the screen resolution could do with a boost). Business software has been evolving rapidly online with big hitters like salesforce.com and microsoft bringing their applications to the ASP space. Maybe I am blind but I don't see the argument as very valid.

For me as a web application developer, the future is bright.

My boss was hounding me about why he had to have multiple usernames for our different DNN portals (we have one for Customer Support, one for Sales and one for Intranet purposes). By default DNN didn't allow me to create users for those portals with identical user names. So after playing with the data a bit I figured out a way and wanted to share it with you and keep it here in case I need to do it again and forget how.

First we need to understand the fundamental underpinnings of the Users structure inside the database. We will be using the Host SQL tab to perform data manipulation so make sure you have the database backed up before attempting these hacks.

So User permissions are basically set in three tables:

1. Users
2. UserPortals
3. UserRoles

These are all important tables to keep consistent. So lets say you have user 'foo' in the Users table, his record would be something like this:

UserID	Username	FirstName	LastName	IsSuperUser	AffiliateId	Email	DisplayName	UpdatePassword
1	foo	Foo	Bar			foo@bar.com	Foo Bar

You could get access to this record to see it in this state by passing the SQL query:

SELECT * FROM Users WHERE Username = 'foo'

So now lets say that you have another portal where foo also needs access and you have set him up another user for that portal called foo2:

UserID	Username	FirstName	LastName	IsSuperUser	AffiliateId	Email	DisplayName	UpdatePassword
1	foo	Foo	Bar			foo@bar.com	Foo Bar
2	foo2	Foo	Bar			foo@bar.com	Foo Bar

As you can see these are essentially identical users but DNN will not let you log into portal 1 with user 2 or into portal 2 with user 1. The secret here is UserPortals. First determine what user is assigned to which portal. To do this will use the SQL statement:

SELECT * FROM Users INNER JOIN UserPortals ON Users.UserID = UserPortals.UserID WHERE Email = 'foo@bar.com'

Now notice that since the usernames are not the same, the ticket was to use a field where they match and since email is the usual suspect I decided to use that. The results of that query would look something like this:

UserID	Username	FirstName	LastName	IsSuperUser	AffiliateId	Email	DisplayName	UpdatePassword	UserId1	PortalId	UserPortalId	CreatedDate	Authorised
5	foo	Foo	Bar			foo@bar.com	Foo Bar		5	3	4	11/11/2009 9:54:51 PM
6	foo2	Foo	Bar			foo@bar.com	Foo Bar		6	4	5	11/11/2009 9:56:05 PM

Ok so now we know which portals are for which user, next lets also get the roles, because the roles are different for each portal. So we add to the above SQL statement:

SELECT * FROM Users INNER JOIN UserPortals ON Users.UserID = UserPortals.UserID INNER JOIN UserRoles ON Users.UserID = UserRoles.UserID WHERE Email = 'foo@bar.com'

Which yields us:

UserID	Username	FirstName	LastName	IsSuperUser	AffiliateId	Email	DisplayName	UpdatePassword	UserId1	PortalId	UserPortalId	CreatedDate	Authorised	UserRoleID	UserID2	RoleID	ExpiryDate	IsTrialUsed	EffectiveDate
5	foo	Foo	Bar			foo@bar.com	Foo Bar		5	3	4	11/11/2009 9:54:51 PM		9	5	7
5	foo	Foo	Bar			foo@bar.com	Foo Bar		5	3	4	11/11/2009 9:54:51 PM		10	5	8
5	foo	Foo	Bar			foo@bar.com	Foo Bar		5	3	4	11/11/2009 9:54:51 PM		11	5	6
6	foo2	Foo	Bar			foo@bar.com	Foo Bar		6	4	5	11/11/2009 9:56:05 PM		12	6	10
6	foo2	Foo	Bar			foo@bar.com	Foo Bar		6	4	5	11/11/2009 9:56:05 PM		13	6	11
6	foo2	Foo	Bar			foo@bar.com	Foo Bar		6	4	5	11/11/2009 9:56:05 PM		14	6	9

Ok so there is a lot going on now. Clearly these users are both administrators of their respective sites, now we just need to trim it down to one user, we will use UserID 5 since that is 'foo'. The SQL statement for this would be:

UPDATE UserPortals SET UserID = 5 WHERE UserID = 6;
UPDATE UserRoles Set UserID = 5 WHERE UserID = 6;
DELETE FROM Users WHERE UserID = 6;
SELECT * FROM Users INNER JOIN UserPortals ON Users.UserID = UserPortals.UserID INNER JOIN UserRoles ON Users.UserID = UserRoles.UserID WHERE Email = 'foo@bar.com'

This yields us the following result:

UserID	Username	FirstName	LastName	IsSuperUser	AffiliateId	Email	DisplayName	UpdatePassword	UserId1	PortalId	UserPortalId	CreatedDate	Authorised	UserRoleID	UserID2	RoleID	ExpiryDate	IsTrialUsed	EffectiveDate
5	foo	Foo	Bar			foo@bar.com	Foo Bar		5	3	4	11/11/2009 9:54:51 PM		9	5	7
5	foo	Foo	Bar			foo@bar.com	Foo Bar		5	4	5	11/11/2009 9:56:05 PM		9	5	7
5	foo	Foo	Bar			foo@bar.com	Foo Bar		5	3	4	11/11/2009 9:54:51 PM		10	5	8
5	foo	Foo	Bar			foo@bar.com	Foo Bar		5	4	5	11/11/2009 9:56:05 PM		10	5	8
5	foo	Foo	Bar			foo@bar.com	Foo Bar		5	3	4	11/11/2009 9:54:51 PM		11	5	6
5	foo	Foo	Bar			foo@bar.com	Foo Bar		5	4	5	11/11/2009 9:56:05 PM		11	5	6
5	foo	Foo	Bar			foo@bar.com	Foo Bar		5	3	4	11/11/2009 9:54:51 PM		12	5	10
5	foo	Foo	Bar			foo@bar.com	Foo Bar		5	4	5	11/11/2009 9:56:05 PM		12	5	10
5	foo	Foo	Bar			foo@bar.com	Foo Bar		5	3	4	11/11/2009 9:54:51 PM		13	5	11
5	foo	Foo	Bar			foo@bar.com	Foo Bar		5	4	5	11/11/2009 9:56:05 PM		13	5	11
5	foo	Foo	Bar			foo@bar.com	Foo Bar		5	3	4	11/11/2009 9:54:51 PM		14	5	9
5	foo	Foo	Bar			foo@bar.com	Foo Bar		5	4	5	11/11/2009 9:56:05 PM		14	5	9

as you can see, user foo2 has been deleted entirely and if you log into either site with foo you will have the permissions of foo and foo2 from before the hack.

Hope this helps some people out there make sense of their DNN user issues.

REF

Here's the helper function courtesy of Simon Willison:

function addLoadEvent(func)
{ var oldonload = window.onload;
  if (typeof window.onload != 'function')
  { window.onload = func; }
  else
  { window.onload = function()
    { oldonload();
      func();
    }
  }
}

To use the helper, call it with the name of our target function:

addLoadEvent(msgPgLoaded);

Now our 'msgPgLoaded' function will not fire until the page is fully loaded. Perfect!