Just another WordPress site
This was a pretty amazing article about how to extend your jQuery code even further using Amplify.js. Elijah has a great writing style with very organized and clear examples.
He first starts out with what I think is a pretty nice and clean example app. Then he proceeds to discuss various improvements he makes using Amplify.js and refactoring to various patterns that really start to bring out the flexibility of the app.
Definitely take a look!
We have Policies and Procedures document that we are making available on our website. This document in its entirety easily spans several hundred pages and has a pretty lengthy table of contents.
To help make this easy to navigate and easier to consume we are posting several of the larger topics as individual documents and making them available from a linked table of contents that is created as a web page.
The requirement is that the table of contents uses different numbering styles at each indentation. So, for instance, the outline below:
Topic A
Sub-topic A.1
Sub-topic A.2
Sub-topic A.2.1
Sub-topic A.2.2
Topic B
Topic C
would become:
1. Topic A
a. Sub-topic A.1
b. Sub-topic A.2
i. Sub-topic A.2.1
ii. Sub-topic A.2.2
2. Topic B
3. Topic C
This document isn’t maintained in a database yet so for now the table of contents is created in good old fashioned HTML. Using a standard <ol> (ordered list) element in HTML looks initially like this:
The way to change the numbering style is by using the CSS list-style-type style on the <ol> element with various options such as decimal, lower-alpha and lower-roman. You can find a great example of this at w3schools. So, I could manually change the list style of each <ol> tag based on how much it was indented, but this would be a pain to maintain. Anytime we changed the layout I would have to change the list-style-type styles and be sure to keep everything consistent. I thought this would be a perfect place to use jQuery.
Using jQuery I was able to define an array of the types I wanted to use. jQuery would then find all the <ol> and nested <ol> elements and change the style for each indentation. Once done I could simply maintain the table of contents and jQuery would handle the styling. I couldn’t find any jQuery plug-ins that did this so here is the code I came up with. If I end up using more than a couple of times I’ll probably create a plug-in for it.
This works great and took me only a couple of minutes to do. Definitely an improvement over the manually written way. I hope this helps someone else out there!
We recently migrated from one online IEP vendor to another. This is a program for collecting and managing Special Ed information, but it is an enterprise app and worthy of critique and comment. They do a great job, but there are some small UI issues I wish could be fixed.
For instance, when you enter data onto a form and try to leave the form without saving they do a nice job of alerting you that you are about to lose the valuable data you just entered. However, there is a catch:
Ouch, did you read that correctly? “Hit CANCEL to Leave this page.” The problem with that is I would say 99% of users are used to hitting Cancel when they realize they made a mistake and want to undo it. Several times I’ve had to stop my knee-jerk reaction to hit cancel when I realized I updated something and didn’t hit Save.
Not only are the button actions inconsistent with what users are used to but I would go further and state they are actually opposite, which to me is one of the worst UI anti-patterns. In addition the buttons are not very informative, OK and Cancel just don’t tell you what they are doing with your data. Unfortunately I think it might be stuck as it is. The software now boasts adoption of over half the state of California. That’s a good sized client base and the current users are already conditioned to hitting OK to go back to the page and hit the Save button. If the vendor were to reverse the impact of the buttons now I can just imagine the outcry there would be over users losing data because they are simply used to hitting OK. You see, no matter how many emails, home page news alerts or training documents you give out half the users won’t even bother to read them. They won’t know there is a change until they have already lost their data. Not a good thing.
If I were to have to implement this change I would re-label the buttons all together. This would not only alert the user that something functions differently then what they are used to but it would also make the dialog more usable, which is also a good UI pattern. Unfortunately you cannot do this with plain JavaScript. Since the vendor already makes use of jQuery the UI Dialog plug-in is a great tool to use. It also standardizes the dialog boxes since JavaScript alerts are handled inconsistently between browsers.
Here’s a sample of what I would do using the jQuery UI Dialog plug-in. I think it is easy to read and clear in informing the user on what they are about to do. While this would be a change to what users are used to I think it would be one that is easily adapted to.
We have a particular web product that we use for all of our clients. It is a pretty incredible system and has several hundred clients. We are one of their largest ones so, between our implementation, and their normal customer needs its understandable why they cannot accomodate every one of our requests right away.
That being said, there was one slight “feature” that went slightly against one of our policies. So, what to do? Well, I put on my curiously tipped white hat and go to work. One of the cool features of the system is they allow us, the admins for our group for all intensive purposes, to update portions of the page for our users. They don’t escape HTML so it turns out I’m able to inject my own JavaScript code.
Ooohhh, that’s bad. 😉 I let the company know but I proceed on.
Turns out they, being the creative bunch they are, make use of jQuery. This is definitely turning into a possibility with my toolbox already stocked and ready to go.
The particular portion of the page I choose to launch my JavaScript from is ideal because it is on the navigation bar, ensuring that it will be displayed on almost every screen. Because we can only change content for our users it ensures that my changes will only affect our users and not those of their other clients. However, with 5,000 users I had better make sure my code is well tested and clean. I still have the ability to disrupt my 5,000 users if I make a bad mistake. Point noted.
The vendor puts a character limit on the particular area of the page I’m changing. That means I have to inject JavaScript that tells the browser to load a larger script from elsewhere. No big, I put the script on our department website. Hmmm, not so good. The system is now throwing a warning that I’m loading JavaScript from a non-secure source. Hmm. Sure would be nice if I could load the script directly on my vendor’s server.
Well, I can. 🙂 The vendor also allows us to upload documents to a library that our users can download from. So, I upload the script. Uh, oh, didn’t work. Turns out they block all but a few extensions. So, instead of calling it myscript.js I change it to a text file called myscript.txt. That uploads great and, guess what, the browser is happy to execute it. Great! On my way.
After a few tests it turns out I’m able to quite nicely make our little “issue” a thing of the past. First I check to make sure the page in question is the one being viewed. That way the bulk of the code (all 6 lines of it) runs only when necessary. Then it cleans up after itself by removing my injected code from the page DOM. Nice!
It’s not foolproof of course. If the user isn’t running JavaScript then my trick won’t work, however, half the system won’t work for them anyway since JavaScript it is required. Also, if someone is sneaky enough they can load the original source and see where I injected my code. But, if they are going to do that we have bigger problems then them simply disabling my script.
OK, that covers the techy issues, what about the people ones? Well, as you may have guessed, no matter how many times we alerted our users to the changes we made, some users started calling the vendor’s Help Desk asking what happened to the report they were used to. The vendor then called me after spending two days trying to solve the issue they weren’t seeing. They didn’t really care for the changes. They understood the necessity and gave me props for how I handled it but now their Help Desk had no idea if a problem call was because of their system or my code. Granted, this totally makes sense.
So, they gave us a choice. We can continue to develop our own “customizations” but we have to take over all Help Desk calls for our users for the entire system. I understand that, but directly supporting 5,000 users is not something we are capable of doing. I have to note also that the Help Desk is absolutely outstanding, one of the best Ihave ever worked with.
So, after the vendor agreed to look into implementing our change we are allowed to keep the code and support the Help Desk for any questions regarding this one issue. Once the vendor has solved the problem we will remove it and go on our way.
So, here is the moral of the story: Hacking your vendor’s site open doors to lots and lots of capabilities, however, it may aggravate your vendor a little or, quite possibly, cause an early termination to your contract. I suggest you keep this little tool in your developer’s pocket for extreme cases.
It was fun and our vendor is great. Once I put the change in place we started to come up with lists of additional “nice to have” features I could implement, but, in the end, we’ll just hand those over to our vendor and see if they make it in someday.
This is absolutely amazing. If you’ve never used jQuery definitely check it out. Ever since James Johnson (president of the Inland Empire .Net User’s Group) did a presentation on it last year I’ve been hooked. It’s is an outstanding JavaScript framework that actuallly makes JavaScript a pleasure to use.
As a classically trained developer I’ve always approached JavaScript as a tool to use only when absolutely necessary and as a last resort. Dealing with cross browser compatibility and just plain frustration over the language has made JavaScript a tool of evil in my development toolbelt.
With jQuery I not only now consider JavaScript a valuable asset I actually love to develop in it.
Hearing that Microsoft is now including it in their IDE is pretty exciting. This means that IntelliSense and debugging (while possible with some great workarounds from the jQuery community) will most likely eventually be fully supported for jQuery. I’ve worked with lots of development environments and Visual Studio is by far one of the best IDE’s around.
Probably even more exciting is that this furthers the strategy that MS is really interested in working with developers. Some of my friends are probably tired of me bashing the old-school “Microsoft Way”. Seeing the real encouragement of MS through employees like Scott Gu, Phil Haack and others on projects like MVC and such really make it apparent that MS is offering alternatives for developers who want the ability to code using modern standards.
Actually integrating jQuery into Visual Studio shows that MS is willing to offer alternatives to their own prodcuts such as the ASP.Net AJAX JavaScript framework. MS is no longer in the “We’re Microsoft. Our way or the highway” mentality.
The main presentation by Jack Dangermond was pretty good, as was last year’s. It’s a good mix of what is new in ArcGIS 9.3, what users are doing in the field, what’s coming on the horizon, and an overall impact of GIS in the world.
From a technical point of view here are just a few of the new features in 9.3. There are way too many to list so take a look at the ESRI site if you want a comprehensive list.
Overall it was a great session.
I’ll be adding more posts throughout the conference on anything I see that’s noteworthy. Those will hopefully be a much shorter read!
jQuery never ceases to amaze me.
Almost makes me want to go into JavaScript programming as a career. 🙂
One line of jQuery code to get that cool page flipping effect. No Flash needed.
$("#g1").jFlip(300,300,{background:"green",cornersTop:false});