Archive for the ‘tools’ Category

Social Networks Widget for eXtension People Application

In the eXtension People application, you can specify what social networks you participate in, and you can choose to make this information public. By making the information public, the eXtension People application will provide a JSON feed containing your information.

Ying Zhou, a programmer with ISU Extension IT, recently wrote a widget that will read this JSON feed, and display it on your web pages. You can see this widget in action at my ISU Extension staff page or this test blog on Blogger. (I’d put it on my blog, but didn’t see a way to embed the widget in a WordPress.com hosted blog.)

Here is the  basic code to use the widget:

<iframe src="http://www.extension.iastate.edu/Widgets/SocialNetworks/?email=bwebster@iastate.edu&showContact=false"
         width="200px" height="180px" frameborder="0"></iframe>

The web page that drives this widget takes the following query string parameters in the URL:

  • email: (Required – Text) Email address of the person to look up in eXtension’s system. This email address should match the address given in your eXtension profile.
    (In the example: email=bwebster@iastate.edu)
  • showContact: (Optional – true|false) When true, show contact information from eXtension’s system. When false, don’t show it. Default is True.
    (In the example: showContact=false)
  • showSocial: (Optional – true|false) When true, show the social network information from eXtension. When false, don’t show it. Default is True.
  • cssFile: (Optional – Text) Includes the given CSS file in the widget. This way, different sites can give the Widget different looks based on the CSS given.

With these options, especially the cssFile, you can modify the look of the output from the widget. You may need to adjust the height and width of the widget to fit your pages.

Feel free to use this widget on your own web sites. Let me know if you need assistance in using it.

Advertisements

FireFox Add-on – Web Developer Toolbar

The Web Developer Toolbar is the reason I started using FireFox. A couple years ago, I was just getting started with cascading stylesheets (CSS) and web standards, then Matt Heerema showed me this tool. I was hooked.

Web Developer Toolbar inserts an additional toolbar in Firefox. One of the cool things it lets you do is change the CSS your browser uses to display a page. To do this, select the CSS menu in the toolbar, and select edit. You can then change any of the styles on the page. This is much easier than changing the stylesheet on your web server and reloading the page.

I use this feature almost daily when working on web pages. Once I get something working in my browser, I’m able to copy the CSS, and paste it into the real stylesheet on the server. Not until this step will other people see the changes you’re making.

It allows you to do other things as well, such as disable javascript, disable images, and disable stylesheets. By taking these three steps, you are able to get an idea of what GoogleBot will see when it accesses your page.

Another thing it will do is outline certain elements on the page. For example, you can have it outline tables, or depreciated html tags, or a host of other elements. This can be invaluable when helping others troubleshoot issues on their web pages.

The last feature I’ll mention is the tools menu, where you can do things like verify that your CSS is valid, that the HTML is valid, and that your page passes Section 508 validation. You can also get a speed report for your web page.

I’ve just scratched the surface of what the toolbar can do for you. If you work on web pages, either as a developer or designer, I think you’ll find the Web Developer Toolbar has many useful options for you.

Firefox Add-On – NoScript

I recently received a new computer at work. One of the first software packages that I installed was FireFox, and made it my default browser.

I then installed an Add-On called NoScript. This turns off all JavaScript on a web page. It gives you the option to either temporarily or permanently turn on the JavaScript for a given site.

For example, I have JavaScript permanently turned on for the ISU Extension web site. I also have it turned on for some of the other sites I visit regularly. On other sites, I will choose to temporarily allow JavaScript.

I never allow JavaScript from certain sites, especially when the JavaScript is trying to run from a third party site. Another piece of JavaScript that I never allow is the one from Google Analytics. Google knows enough about me without me giving them that much information about my browsing habits.

For many pages, loading them without running the JavaScript doesn’t affect them too much. For others, it will change the functionality of the pages, but they still work.  For example, on the eXtension home page, the rotating images simply become a series of individual images. You can still navigate around the site without any problem. For other pages, not having JavaScript enabled completely breaks them.

Here are my reasons for running NoScript:

  • Many pages are less cluttered. A lot of times, the ads and other annoying “features” are implemented in JavaScript. With NoScript, you don’t see a lot of this stuff.
  • Ability to block Google Analytics, and other tracking systems from seeing where you are browsing.
  • Most importantly, security.  Many times a hacked page will try loading a JavaScript file from a third party server. If you don’t allow scripts from unknown sources, they won’t run.

Here is where you can download NoScript.

Windows Client for Subversion – TortoiseSVN

The client was the biggest adjustment I needed to make when switching from Visual SourceSafe (VSS) to Subversion. A VSS client was integrated with Visual Studio, which meant you could do most things related to source control through Visual Studio.  So when I it started looking at Subversion, the first client I tried integrated into Visual Studio, but I couldn’t get it working properly.

I ended up installing TortoiseSVN, which adds the source control functionality to Windows Explorer. I was skeptical because I though it would be a pain to go to Windows Explorer whenever I wanted to interact with Subversion, but I was wrong. I quickly got used to working with Subversion in this manner.

Probably the biggest advantage of working with TortoiseSVN is that I can have multiple working copies of a project. For example, I can have a copy on my development machine, on our test server, and our production server. When I want to see what has changed between the repository and the working version, I simply use the “Check for modifications” command of TortoiseSVN. This tells you what files have changed, and has a pretty good diff tool to show how those files changed.

Because TortoiseSVN integrates with Windows Explorer, rather than Visual Studio, it can be used by people that don’t use Visual Studio. This is important to us because some design changes are made directly on a test server, not on a developer’s computer. TortoiseSVN will save a ton of time in keeping these changes in sync.

All of this works because by default, Subversion uses an edit-merge-commit model, rather than the checkout-edit-checkin model used by VSS. The differences are explained in Chapter 2: Checkins of Eric Sink’s series on source control. At first this change of models sounded strange to me, but I found that the edit-merge-commit model really does work better for some of the things we’ve been doing with projects.

I’ve been running Subversion and TortoiseSVN in a test environment for about 6 weeks. So far, I’ve been extremely pleased in how it’s working.

Installing Subversion on Windows

At first I was apprehensive about installing Subversion on Windows. I was concerned because the web site mentions Apache, and Apache isn’t on my Windows virtual machine. Did I really want another web server running on this machine?

Then, about a month ago, I decided to give it a try, so I installed the Tigris version for Windows. To my surprise, it was pretty easy to install, Apache was included in the install package.  The main problem I had was figuring out how to run Subversion as a service rather than a simple application.

Then, about a week ago, I decided to change the virtual machine Subversion was installed on. This time, I installed the CollabNet package of Subversion. Wow! This was even easier. It took care of installing everything I needed. Here are the steps I took, very loosely followed from this page on Setting up Subverion on Windows:

  1. Download and install the package from Collabnet
  2. Added a Environmental variable called SVN_EDITOR pointing to c:\windows\notepad.exe
  3. Modified the file C:\Program Files\CollabNet Subversion Server\httpd\conf\httpd.conf to so Apache would Listen to a port other than 80, as 80 interfered with Microsoft Content Management System and IIS already on the machine
  4. Created a Subverion Repository
  5. Because Subversion was already installed on another virtual server, and I wanted to keep that repository, I simply copied the entire folder from one server to the other.

Copying the repository from one server to the other almost trivial. Just copied it in, and it worked. I highly recommend the package from CollabNet.

The hardest part of changing servers was that I had to use the Relocate… command to point all my working directories to this new repository.  Not a hard thing to do, but it took a few minutes to do this every working directory.

So far, I’ve been very pleased with the way Subversion has been working for me. I’m very close to expanding it to include the other people on our development staff. Unfortunately, this will mean yet another server install, moving the repository, and relocating all the working directories. At least when this time comes, I’m confident that the change will be easy.

Looking at Source Code Control Solutions

Lately, I’ve been looking at options for doing source code control within our group. What really got me started rethinking source control was these articles titled Source Control HOWTO by Eric Sink.

This series of articles does great job of describing what source code control is all about. It covers a lot of different concepts within source control, and how different products handle these concepts. Best of all, the series is a pretty easy read. I learned a lot from these articles and appreciate that Eric made them available. I highly recommend them.

We have been using an older version of Microsoft Visual SourceSafe. Although we have not run into some of the corruption issues some people have experienced, I’d like to find a better way of handling source code. The choices I see include:

  1. Continue running the old version of Visual SourceSafe
  2. Upgrade to the newest version of it
  3. Use another commercial product like SourceGear Vault
  4. Use an open source product like Subversion

A few weeks ago, I decided to try out Subversion. It was easy to install on one of my test servers, and I really like the way it works. It has already solved a problem I was having keeping a project current between our production server, test server, and my development platform. I’m thinking it might be time to put Subversion on a real server, and increase our use of it.

It might seem a little strange that a developer working mostly in .NET would use an open source product for source control. As this results of this survey question from CodeProject shows, I’m not alone. When asked what source code control people use, Subversion got 33% while Visual SourceSafe got 27%.

About:Blank As Your HomePage

Today, I read an interesting blog post titled “Make about:blank Your Homepage.” For the most part, I agree with what this article says, about:blank does make a good default homepage, especially in Internet Explorer. However, for about the last year, I’ve approached this a little differently in Firefox.

I use Firefox as my primary web browser. Currently I have Google set up as the homepage, but I don’t see this homepage unless I click on the Home button in the toolbar. Firefox has another option that allows you to have a homepage set up, and also a blank startup page when you open the browser.

To set this up:

  1. Select Tools–>Options…
  2. Make sure you’re on the Main tab
  3. Set your homepage to whatever you want
  4. In the dropdown list titled “When Firefox starts:”, select Open a blank page

That’s it. Now, when you open Firefox, it won’t waste time opening a homepage. You can proceed to whatever web site you want. You can click on the home button to go to the page you’ve configured as your home page.

I find this works extremely well for me, because I rarely go to the same page each time I open my browser.

Firefox Add-on – IE View Lite

Last week, I was talking with Lynette about a problem she was having with a web page. During the conversation, she said she usually uses Firefox, however there are a few pages in which she needs to use IE. I told her about a Firefox Add-on I use called “IE View Lite“.

When you have IE View Lite installed, it adds an option in the right-click menu for “View This Page in IE”. This makes it very easy to switch to IE when you run across a page that doesn’t work in Firefox. Simply right click on the page, and select this new option in the dropdown menu. If this is a page you need to use a lot, you can configure IE View Lite to always use IE  for that page.

While useful for normal users of the web, I consider this tool a must have for web developers/designers. It allows you to use Firefox for your development, then easily switch to IE to find out what IE breaks.