Mark Mintoff My superpower is common sense


HTML, CSS and JavaScript Testing Ground

Considering that at times HTML, CSS and Javascript development is time consuming, I developed a small testing ground to enable rapid design work. The idea is heavily based on W3C's TryIt Editor, except that I added sections for CSS and Javascript editing as well.

The testing ground supports JQuery as well.

Below is a screenshot of what it looks like:

Download below:

VN:F [1.9.22_1171]
Rating: 0.0/5 (0 votes cast)

Wrapped JQuery Show Dialog Revisited

As a follow up to this post, I have added extra functionality by utilizing the jquery-dialogextend extension. What is achieved is the ability to treat the JQuery Dialog very much like a regular window, with the option of Maximize and Minimize thrown in. Also, double-clicking the title bar maximizes the Dialog. Awesome! I wanted to create a seamless transition from my old code to the new code, in order to minimize things which I'd have to update. This is what I came up with: As you can see, it's exactly the same as it was before, with two new parameters; showMinimize and showMaximize; (which are completely optional) and a check for whether the function exists before executing it. This allows for a seamless transition. The icons I am using were drawn by me onto the existing JQueryUI Spritesheets and into the JQueryUI Stylesheet. And the CSS changes: That's all there really is to it! Enjoy!
VN:F [1.9.22_1171]
Rating: 4.0/5 (1 vote cast)

Wrapped JQuery Show Dialog

One of the things I like doing best in programming (even if it is client-side) is encapsulating code into simple method/function calls, in order to prevent writing the same code over and over. My ShowDialog method is an example of such.

I like the JQuery Dialog, especially since an IFrame can be loaded into it and I am in the habit of utilizing this. The reason I prefer using an IFrame in this manner, is that I can segregate the code into another .aspx page, allowing me to keep everything neat and tidy. It is also worth noting that I have a preference for making these kind of dialogs modal. If you do not prefer using modal dialogs, then you will have to tweak the coding a little bit.

To this end, my sequence of coding for showing a dialog is to append a DIV containing my IFrame to the body, calling the JQuery Dialog code and removing the div onClose:

And there you have it! (for String.Format please refer here)

A simple wrapping function call to load a modal dialog with a specified page url, a specified width and height and an optional onClose function to be executed on closing the dialog. The latter is useful for cases where you wish to refresh the page or do a redirect.

An example of using this method, from server side C#:

As you can see, I am using String.Format to specify two arguments:
  • path.ToString
  • Page.ClientScript.GetPostBackEventReference

path.ToString in this case, is a StringBuilder which assembles the path to the Dialog page (I am using a StringBuilder because a dynamic querystring is being constructed for it) and the Page.ClientScript.GetPostBackEventReference is being used in order to cause a page refresh on closing the dialog.

A simpler example:

In this example, I am not passing in an onClose function, hence nothing special will happen after the dialog is closed.

Happy Coding!

VN:F [1.9.22_1171]
Rating: 0.0/5 (0 votes cast)

Ajax Server Side Validation

There are times you would want to do some sort of server-side validation on a form. As an example, you might want to validate a user's login credentials. In my case, the reasons for developing this validation wrapper, were to ensure that an ID was populated on the server, before allowing my Wizard to proceed to the next step. My opinion of ASP.Net's CustomValidator is that it is, quite frankly; horse shit. So, as per usual, I set about making my own way. My requirements were as follows:
  • User clicks "Next" (or Submit) button
  • Server checks if ID is populated
  • Server returns this information
  • If ID is not populated, prevent moving to the next step
  • If ID is populated, allow moving to the next step
Clearly Ajax had to be used here, and I opted to use JQuery's $.ajax as I find it to be absolutely splendid. The secret to achieving the functionality we want, is to set the async property to false. The reason being that with the async property set to true, Ajax will behave as Ajax is supposed to behave. In our case we do not want Ajax to behave normally, as the form would submit while the Ajax call was being made. As is my style, I decided to create a wrapper functionality, making the whole thing rather generic and fun to use: The way this works is that it makes a call to the path which you give it, passes the data which you give it and depending on the server's response, will execute one of the functions (successEvent / failEvent) you passed to it. Meanwhile on C#'s back-end: This is pretty self explanatory, I won't insult your intelligence and explain what it does :) And to use this method on your page? Simple: If you're curious about the String.Format, please refer to here. And that's all there is to it! The process goes like this:
  • User clicks button
  • The click function we binded is fired
  • The ValidationEvent function is fired
  • Ajax call is made to server using our details
  • Depending on the response from the server, the success or fail events are executed
  • In my case, I only passed a failure function; TemplateValidationFailure
And that's all there is to it!
VN:F [1.9.22_1171]
Rating: 0.0/5 (0 votes cast)

JavaScript String.Format

How awesome would it be to have C#'s String.Format, or PHP's printf in JavaScript? "Quite so" says I, rather smugly. Well, here it is: Usage is simple, and follows the same functionality as that found in C#'s String.Format. Honestly, I just don't like PHP's way of tossing in '%s' everywhere. Here's an example, using a JQuery selector to find an object with a given ID, stored in a var: And that's all there is to it! Happy coding!
VN:F [1.9.22_1171]
Rating: 0.0/5 (0 votes cast)

Combining JavaScript or CSS Files (PHP Version)

Please refer to my previous post which is done in ASP.Net. And now, may I present to you, the PHP version in all it's hastily coded atrocity: To reference this, simply type in something akin to the following into your <head> tag:
<script type="text/javascript" src="include.php?type=js"></script>
Also: If you get weird characters such as these beauties; ï»¿ please ensure that the files you are saving (the javascript and css files) are encoded without BOM (Byte Order Mark).
VN:F [1.9.22_1171]
Rating: 0.0/5 (0 votes cast)

Combining JavaScript or CSS Files

I spent some time today, mulling over the evidently dismal state which lies in future Web Development. Already we see the horrors of script references upon script references as business-folk and neophyte developers alike, cram component after component after component into the same page. Buzz words like "Web 2.0", "SEO" and "value-added" being thrown around the room like the flaccid, empty whores that they are. Needless to say, I fell into a depression, realizing that there is no way to avoid these things. Forever shall pages be polluted by script references upon script references. Forever shall pages take forever to load and forever shall management complain (and rightly so) about the speed of a website. But should it remain that way? "No" says I; emphatically. Hence I decided that something needed to be done. I trust we all know about GZip and Minification. If not, please do go and educate yourself about these little things. They are quite useful. In addition to those two techniques, there is also the idea of cramming all your scripts and all your css into singular files. Why? Well clearly this is done in order to reduce the number of files requested from the server. What this achieves is that the page will load quicker. What this also achieves is further messy coding. All scripts in one single file? Really? That doesn't sit too well with me I'm afraid. I like having things organized. Folder structure and independent files are key to me maintaining the vestiges of my sanity in a world gone mad. But the results of such a technique are clear, evident, obvious. But I want the best of both worlds. And as an ASP.Net programmer, I figured out how to do this within the space of 10 minutes and decided to share it with you. I'm 100% sure this functionality may be replicated successfully in PHP and I will be making an effort to do so within the following couple of days. So, what is this technique I thought of? Imagine if you will, if the server were to read the files you wish to serve and append everything into a single file and serve that, instead of serving, say...10 JavaScript files. That's pretty much the principle of it all.
First things first. This is coded in ASP.Net and what I will be showing you is a hard-coded version. You should definitely make this data-driven. Why? Because it's god damn cool. And I love cool things. Start out by adding a Generic Handler (and ashx file) to your solution. I called mine "IncludeHandler.ashx". Next, code it up so that it looks something like this: Next, make sure you have all the files listed in the "files" generic List<string>. For my "test.js", I entered the following script: Include the following into the <head> tag of your page: Now, run it. Result: If you're using a hip browser like Google Chrome you can go take a look through the "View Source" and click on the link to "IncludeHandler.ashx?type=js". Otherwise, you can just type in the link yourself in the address bar. What you'll see is that all the code from your script files has been tossed into one response. Let's do a comparative benchmark test using Chrome's load speed graph. The first candidate for this test will be the standard way of doing it; ie: 3 script references, ie: The result: Now, if we do the same thing, except with the previous script reference, ie: 1 script reference, ie: The result: So. 1670 ms -vs- 569 ms. An entire 1.1 seconds shaved off. Not bad! The advantages here are evident. Not only did we manage to toss in all our scripts into a single file, but we maintained an organized file structure which won't make us tear out what little hair we have left. The same advantages apply to StyleSheets. Don't believe me? Try it! I do believe it's worth your time. NOTE: Before nose-diving into this, read the following: here.
VN:F [1.9.22_1171]
Rating: 0.0/5 (0 votes cast)