Creating your own JavaScript Library

One of the phases I went through while learning about JavaScript was the intense desire to write my own library, similar to jQuery (but massively scaled down).

My library has gone through several major revisions — and more than one complete re-write, but now is exactly what I started out hoping it would be: functional, clean, small, and a solid learning experience.

I’d like to share what I learned from this project, and I hope you share back with me through the comments!

Finished project demo

Step 1: Identify the purpose of your library

This might just be one of the toughest parts of the whole process!  If you are to the point in your JavaScript knowledge that you would like to build your own library, than you’ve likely used jQuery, mooTools, Prototype, or any number of other popular libraries.  I use jQuery extensively in my projects, and know that it is very capable in many aspects, including: animation, user input validation, AJAX loading/submitting, event handling,  etc. Knowing this, it is tempting to have lofty goals for your own library. One piece of advice: Don’t. 

Pick one particular function, or aspect of web development/design that you would like your library to handle. Pick a niche need, and be happy with yourself when you fill it.

I decided my library would be a simple way to manipulate elements visually. At this point, I didn’t quite know how — but all you need is the kernel of the idea.

Step 2: Mock-up how would use the library

You always mock-up a webpage before you start building it right? Whether on paper, Photoshop, or even in code, it helps to pretend what the finished product will look like before you build it. It helps you to see obvious bugs, conflicts, and unwanted interactions you don’t catch when looking at the problem mentally.

Have you ever mocked-up your code?  Write some implementation, pretending that the class or object you are dealing with exists. Trust me, it will solve problems!

I want my library to do visual stuff with elements, and I like how jQuery looks. How about this?

Looking at my pretend implementation, I can see 1 problem and a hand-full of design implementation points.

The problem: $ as a function name is likely to conflict with lots of other libraries. Through some Googleing, I learn at StackOverflow that functions must start with a $ (dollar-sign) _ (underscore) or letters.

We can also tell some design patterns:

  • _ is the function name
  • _ must accept one or more parameters
  • _ should return itself so that a dot-operator will work
  • _ must control its scope so that we can have more than one _() on a page
  • dot-operator methods must also return the _ object for chaining

Step 3: Code up an outline

At this point, we know enough about the goal of our library, and how we will implement it, to begin outlining the structure of our library.

It may be useful for some (me) to review javascript function/object  prototyping.

Step 4: Fix-up the constructor

Now don’t try and run your code just yet: we have a pretty big scope issue (besides no functionality):

When our _() function returns this , it is actually returning the entire window, or the global scope.  Therefore, when we call _().toggle() , we are asking the browser to call the toggle() method which belongs to the window. Obviously this fails.

This problem can be solved by recursively creating another _ object using the new keyword.

What is the new keyword in JavaScript?


For an in-depth look at this problem, read more about JavaScript constructors

Next to implement in our constructor: making the _() represent an element with some bonus error prevention.

First, we create an about object that will be returned, if the implementation doesn’t specify an element id. Next, we check if the id parameter was sent, and then create a variable to contain that element.

Here is a final version of the _() constructor:


Step 5: Prototype method implementation

This step is pretty fun: being creative, and implementing what you want your library to actually do!

I mentioned earlier that I wanted my library to do some visual manipulation of elements. Make a list of what you want to do. I came up with the methods:

  • hide ()
  • show ()
  • bgcolor (color)
  • val (value)
  • toggle ()
  • size (height, width)

The depth of this step depends on the functionality of your library. Mine were rather trivial to implement:


Demo or download the finished library here

Part 2 – Event Handling

Final thoughts

Writing my own small library was a good way for me to learn about JavaScript. One of the great ways to learn more is to study the code of other libraries and see how they work.

Did you use this tutorial to create your own library? I would really like to hear about it. Please leave me a comment below.


Stack Overflow user W3Geek asked a question about part of this tutorial. Visit his question: How do these pieces of code function exactly? His question is focused on Step 4 about the object constructor. User Leland Richardson does an excellent job explaining this further — I’d direct you to his thorough explanation rather than duplicating it here.

My tour of Disney’s video game studio: Avalanche Software

Mike, Mike, and Sculley hanging out at Avalanche Software

I recently had the opportunity to tour Avalanche Software, a subsidiary of Disney Interactive Studio, located in Salt Lake City, Utah.  We weren’t allowed any recording or photography equipment. However, we also didn’t sign a non-disclosure, so I’ll do my best to describe the experience and the technology here.

It was a great chance to peek inside of one of the regions top video game shops! I’m quite grateful to John Blackburn, Avalanche CEO, the three employees to gave presentations, and Jonathan Douglas for setting up the tour.

 Introduction Presentation

As the tour began, our group was ushered into a presentation / brainstorming room. What looked like wallpaper in the dark, I quickly recognized in light as white-board drawings, charts, art, and various scribbles completely around the room. All walls had been painted with some type of white-board material, and this room seemed to be the inner brainstorming sanctum. At the front of the room was a large tv that was hooked up to as many consoles that would fit in the entertainment center.

Our guide explained, as he started into a PowerPoint presentation, that this was a standard technology summary they give to Disney Exec’s when they drop by to check out the studio.

Some of their most important assets are custom software that allows the animators and designers to do their jobs more efficiently. Their custom code-base includes three pieces of software:

  • Animation scripting (explained in-depth further down)
  • Source / Asset versioning and management: Each graphic asset (skins, shaders, etc..) is managed in a version controlled repository.  This software will automatically convert assets into compatible sizes and formats for different platforms that each game will be released on. For example: Artist A will fine tune an object skin for the highest PC settings, check it into the software, and it will automatically generate optimized versions for PS3, XBox360, DS, etc…
  • Live updating to test consoles : sends state information, polygon updates to the target testing console LIVE from the programming environment.  A programmer updates an animation script tree, or a designer adjusts the size of a building in Maya,  and it is reflected in real-time on the test console.
Lines of Code

Many of their codebases contain 70+ gigs during development.  Even still, game code typicaly has the smallest line number of their repos.  The development tools listed above contain around 2.5 million lines of code, engine code, a few hundred thousand, and game code, thousands.  Engine code is typically reused game to game.

Lead AI Programmer Demonstration

Downtown Salt Lake City

The awesomeness of this man’s office was only matched by the awesomeness of the view from his window! Inside, we were treated to a demonstration of the animation scripting program used at Avalanche. This custom software drives the animation of all characters in a game.

In the olden days, we were told, to make a character idle (animation while not in use), the programmers would have to code something similar to this:

The main point being that each animation defined by the animation department would need to be explicitly programmed into the game code. With the scripting program, it is much simpler:

Idling behavior is then abstracted to the animation tree, with one of the branches being idleing.  These animation trees contained all defined behavior for particular classes of in game objects. The beauty of these animation trees is that the defined behavior can be called and applied to any object. For example: Game player presses the [A] button, which means Jump! This button is mapped to a particular action, or a branch of the animation tree. The animation is then executed by the game engine on the target object.  Several seconds later, a NPC has caught on to you and is in hot pursuit.  The AI the calls the same branch of the animation tree on the NPC to make it jump.  One action, one code base, infinite uses.

Also, every desk contained a deck of Magic cards. Just thought I’d throw that out.

World designer/ Engineer Demonstration

Not the actual screenshot, but close!

Our next stop was the office of a game world designer.  When most people thing of  working on video games, his office is what they imagine.  Not counting toys and other gadgets, we were immediately greeted with three large monitors on his desk. One held a grey-scale level of an upcoming game in Maya, another, a camera action graphical scripting program that resembled electrical schematics, and the last, a real-time in-game update of the sum of both other monitors.

In this environment, the real-time update system really shined through. He explained that in the past, it could take between 5-15 minutes to compile, and then export a level he was working on to the console for testing, which might only last a few seconds.  This was a serious hamper on productivity, not only in the sheer time wasted, but also because it would break the momentum of the designer.

In demoing their software, he showed us a level that was running on his XBox360, and while it was running, adjusted the width of one of the buildings in Maya. The building adjusted real-time on the XBox. I can only imagine what a useful innovation/tool that would be!

Q&A Session

Near the end of the tour, we had a Q&A session with Avalanche Software’s CEO, John Blackburn.  The following is my best memory of the questions asked, as well as his answers.  We were not allowed to have any recording (or photography) equipment, so the following is based off of my notes. Please keep in mind that my memory may not be perfect, but the following is my best recollection:

Do you have to worry about DRM or is that something that is handled higher up?

Yes.  DRM is something that Disney enforces, and we as a game studio absolutely must do to stay alive. Disney invests so much money now that it is essential buisness wise to protect their assets. Back in the day our first contract was 250,000 to produce a game — it was a SNES platformer. We would produce the game for the target platform, and then the client would do the advertising and the distribution. The initial investment in the game was so low that there was some tolerance in the bottom line to piracy.  The game we are currently working on from Disney has a budget of 25 million dollars.  We/they have to do everything possible to maximize sales and minimize losses to get a return on their investment.

We are lucky that we don’t have to worry so much about the implementation of DRM, that is usually handled by the platform or how its distributed. If we would want to distribute something through Steam, they have their own system for that. Each console has their own system for that.

Do you consider indie companies as competition?

No. We started out pretty indie ourselves but have grown to a point that we would not consider a solo game developer or even and indie studio as competition.  Think about it this way: and indie studio can work for a few years on a game and produce what some would consider a smash-hit, and for them, it definitely is a smash hit. But we have to think in terms of scale and volume.  Their smash hit might bring in a few hundred thousand dollars or even a couple million dollars. That’s a huge amount of money for an individual, but we operate on a completely different scale where a couple million dollars doesn’t really move the needle one way or another for us.

One area where that is not true is in mobile development. Someone can, in his garage, produce a mobile game that consists of one or two horizontal levels, a few dozen sprite assets, and a couple buttons to push. I mean, you can crank something like that out and have it pretty polished in a few weeks if you know what you’re doing.  Big game studios on the other hand don’t have an advantage there. You can sink in loads of development time and the brightest talent and still get something on par with something that someone wrote in their garage. Also, the revenue is just not there in mobile to make it worth the time of a larger studio.  You could make a few hundred thousand, or a million bucks — but it just doesn’t generate the same return on investment.

What is the current state of the game industry?

Honestly, the industry is broken. The business model is seriously broken. We have gone through the same change in the last few years that Hollywood has gone through.  In the golden age of cinema, there were lots of studios all competing with one another, and movies were cheap enough to produce that one studio could crank out dozens and dozens a year, and basically take a gamble on what would make money and what wouldn’t. As movie budgets increased, the studios became less and less tolerant to risk. If you have a million dollar movie flop, that going to hurt. If you have a 30 million movie flop, you’ve just used up your entire war-chest and are now out of money and out of business.  Movies became larger and larger, and therefore more and more predictable. Studios have to almost guarantee that it will make money before they will even begin the process.

The video game industry is now in the same boat. Take EA for example, back in the day they were a power house and cranked out games. As games got more and more expensive to produce, the studios became less and less tolerant to risk. If you sink 20 million into a game, that one flop may have just cost you the entire company. What does EA do now? They’ve got the Need For Speed franchise, and their sports franchises, each on Nth iteration. They have boxed themselves into a corner with sequels.  Sequels are now the name of the game. They are predictable, make money, and are easier to make because all of the chaos and creativity “problems” have already been solved.

What type of people do you hire? What careers are there?

There are five main categories of careers in a video game studio: Programming, Animation, Design & Art, Music & Sound, and Management


Our programmers need to have high knowledge of how software interacts with hardware.  You don’t need to know the latest trends (but most of our guys do), but you need to be able to understand how you can squeeze the most number of polygons onto a certain type of caching system, and how to optimize your code you different processor architectures.  Many will write in assembly.

In addition to the game programming, many programmers work on our in house development tools. A typical task for them would be: Sony sent a compiler that has a produces buggy code when a certain obscure condition is met. We need to debug and rewrite the compiler. Or, Nintendo sent us a compiler that produces inefficient code for a certain type of flow-control statement. We need to open up the compiler and optimize the assembly code that it generates.


We don’t consider the paper degree as important as what you can actually do. The most impressive thing you can bring is a demo of a project you have done before that highlights your ability to do believable and interesting work with characters. Honestly, we have hired a high-school student who was an extremely talented animator.

Designers & Artists

We look for people that are highly artistic and sensitive to the phsycology of the player. They need to intuitively understand how to make a player want to turn left, without having some sort of icon, sign, or other visual.  It is not a must that designers have a programming background, but we do look for people that are highly technical because they will using advanced modeling software to create levels, and objects.

Music, Voice Talent, and Sound

This is the one position that, honestly, is pretty much impossible to get into. Voice talent almost exclusively comes from Actors Guild type contracts in Hollywood.

Back in the day music was done either in-house or we would hire-out to local bands. Now it is almost all orchestral. They will hire movie music composers who have worked on other Hollywood sound-tracks. These people usually have masters/phds in music theory and have well established careers in film-making.

Few ‘Computer Science’ searches in English? I guess I’ll start writing in Tagalog

Google Trends show few searches from the United States, or in English, for advanced Computer Science topics. Perhaps I should worry less about the content of my content, and more about the language its presented? With that in mind: Pagbati, Maligayang pagdating sa MikeDoesWeb!

Pagbati, Maligayang pagdating sa MikeDoesWeb!

I have observed an interesting trend on Google Trends that leads me to believe that perhaps I should be less concerned with the subject matter of my content, and perhaps more with the language I communicate it in.

There seem to be few searches coming out of the United States && || in English for advanced computer science topics. As an example: a Google Trend search for “genetic algorithm”

Interestingly, Tehran, Iran is looking for "genetic algorithms" the hardest...


Look for yourself: These similar searches get nearly identical results:

I performed some number crunching on the export files Google Trends provides, and gained a bit more insight:

Google provides both a integer rank for each language used (1st, 2nd place…), as well as a decimal weight for each language.  While English routinely scored at 2nd place, the weight difference between 1st and 2nd was often 2:1 .
For example: in the Google Trend search for “Data Structures,”  Tagalog takes the 1st spot, and English the 2nd. However, the weight between the two languages is 1:0.405
Here are the weighted scores and average weight from several computer science related search queries:
language Average dynamic programming Graph Theory Functional Programming Artificial Intelligence Data Structures
Tagalog 0.63 0.375 1 1 1 1
English 0.31 0.315 0.52 0.57 0.35 0.405
Korean 0.25 1 0.725
Chinese 0.13 0.27 0.275 0.23 0.13
Swedish 0.13 0.15 0.625 0.105
Indonesian 0.08 0.345 0.23
Dutch 0.08 0.08 0.09 0.265 0.12
Arabic 0.06 0.09 0.125 0.13 0.105
Russian 0.06 0.335 0.07
German 0.06 0.075 0.09 0.205 0.03
Finnish 0.05 0.345
Danish 0.05 0.335
Thai 0.04 0.15 0.095
Romainian 0.03 0.18
Turkish 0.02 0.07 0.055
Polish 0.02 0.12
French 0.01 0.07 0.015
Italian 0.01 0.07
Portuguese 0.00 0.03
Spanish 0.00 0.025
Persian 0.00

So whats the point?

As an English speaker, United States citizen, and programmer, I’m pretty inclined to believe that English is the language of programming. In fact, observing the programming world lends me to this same conclusion:

  • Every programming language I’ve used or encountered is written in English
  • Documentation is in English
  • Programming tools (compilers, IDEs, servers…) written in English

Have the creators of programming content missed the language boat on content?  I don’t believe so. While few native English speakers understand Tagalog, it seems possible that a majority of native Tagalog speakers understand English. However, this whole revelation of the language and locations of search queries makes me re-think some of the assumptions that I have make in writing technical material, such as the use of humor, assumption of similar situations, idioms, etc…

So, when you write your next blog post, be sure to say Pagbati!  to most of your visitors.

Really Simple jQuery Tabs

Bugged by popular jQuery tab content rotators that a bulky, non semantic, to fast/slow, or can’t use custom HTML anywhere you want? Really Simple jQuery Tabs is a jQuery plugin that tries to address each one of those issues. It’s goal is to be as simple and flexible as possible. You can completely rip-out and replace the CSS with your own, changing elements position, styling, etc. It is quite small: at 844 bytes your bandwidth won’t know the difference!

And oh yeah: they rotate!

I have used several jQuery tab/content rotators/panels/things and, although each has been extensively developed and tested, am always left with the feeling that something is missing:

  • This one doesn’t let use put your own HTML in the tab-link
  • That one only supports images
  • The other one is 10,000 lines of code and you only use it once
  • This one cycles too fast/slow

The purpose of Really Simple jQuery Tabs is to be really simple and really flexible.

You can:

  • Add HTML to your semantically correct list item tab-links
  • Panes are regular DIVS – put images, text, AJAX loaded content, etc. up in that DIV
  • Specify (down to milliseconds) how fast to cycle, if you want to cycle at all
  • bonus feature: only 844 bytes!
  • Completely customize the CSS to affect layout, coloring, etc…

Before you get too far: Check out a simply -styled DEMO 

Or, see it in action at:

Implement it like this:

And the markup looks like this:

Notice that semantic markup? Yeah, me too. It was written to be as flexible and extensible as possible.

Now download the source and do your thing!

Convert < address > tags into Google Map link using jQuery

Relevant Stack Overflow Question

While designing a page template for a University today, I realized that there were many areas of the future pages that would include street addresses: buildings, conferences, offices, ect..  I thought, “Wouldn’t it be nice if these addresses were links to Google Maps?” Then people could easily find directions or set their phone GPS whilst driving (at a red light of course).

However, I quickly realized that in such a large institution as I am, that no faculty member would take the time to include a maps link.  As always, such wondering is the stuff of inspiration.  With a little bit of thought, I began writing a little jQuery function that could fulfill my dream.


The function scans the entire webpage for instances of the <Address> tag:

And surrounds the address with a link to Google Maps:

Here is the jQuery Function:

Update: 11/27/2012 – Bug fix and code prettyfication.

100% Height Div with 2 lines of code

2016 Edit: This post is really out-dated. If you are looking for a solution for 100% height divs, please use modern css as described here /2016/modern-100-percent-height-css/

EDIT: This post has several code-blocks of JavaScript to keep two divs at an equal height. I recommend the last method, if you are using jQuery — It seems to be more adaptive to different div content, working in more situations.

Check out the DEMO first, to see if this is what you want

The problem: Creating a div that auto-expands to 100% height of its container. The most common occurrence would be creating a two column layout for a menu, sidebar ads, etc…

The solution that never actually works:

“Since divs automatically inherit the height of their parent, if your parent doesn’t have height set, you cant get 100% of nothing. Set the parents height and it will work.”  Pshaw, I say.  While this may be the accepted standards mantra, I have never seen it actually work in a modern browser.

100 Percent Div Tutorial
Div! Y U NO Expand?!?

The Easy Solution (in 2 lines of code):

Working Demo on jsfiddle

Well, that’s actually 4 lines, if you include the script tag… But just 2 lines of JavaScript.

If you would like to keep the expanding div from collapsing too far, or expanding to much, simply add a conditional statement around the second line, like so:

Short Explanation:

Line 1 creates a new variable “h” and assigns this variable the height of an element found. This does not return the “height:” as specified in CSS, it returns the actual height of the document as it is displayed on the screen.

Line 2 fills the “height:” style value of the other, shorter, element with the variable h + “px”

Put this code near the end of your document, probably right before the body tag, and it will run right when the page loads. You could also wrap this in a jquery $(window).load, or even a $(document).ready. As it is, though, there is no library dependency – just plain-old-JavaScript!

Or, do it with jQuery instead:

Commenter Ivan couldn’t get this code working for him, so he rewrote it using jQuery. I have further rewritten his original code to be a bit shorter, and activate when the content of both divs has fully loaded. I recommend this method — if you are already loading jQuery — as it seems to work much better with dynamically loaded content.

Working jQuery demo


Edit #2 — There is a jQuery plugin called equalHeight that accomplishes this pretty easily

Check out my post 100% height using jQuery for more information about it.

Hacking MyMathLab (a case study in software security best-practices)

This article details an experience I had while using the software MyMathLab, and overviews software security best practices. There is no information in this article that would allow students to alter their grades or cheat in any way, but details minor exploits in the software and security infrastructure related to “locking down” a workstation. This post was written for educational purposes relating to software development and security.  

In keeping with security best practices, the software vulnerabilities were immediately show to both a math faculty member and a campus IT employee sometime before being published in this article.

MyMathLab is a software product, owned by Pearson (one of the largest textbook publishers in the US), including:

The Art Institute of  Houston, ASU, Baker College, Boise State University, Bossier Parish Community College, Cabrini College, Central Texas College, Chicago State University, Cleveland State Community College, Coastline Community College, College of the Sequoias, DeVry University, Florence Dablington Technical College, Florida State College at Jacksonville, Front Range Community College, Henry Ford Community College, Hillsborough Community College, Houston Community College, I State, Ivy Tech Community College, Jackson State Community College, Kapi’Olani Community College, Lone Star College Montgomery, LSU, Memorial University, Mesa Community College, Mississippi State University, Norwalk Community College, Odessa College, Quinsigamond Community College, Reading Area Community COllege, Riverside Community College, Rock Valley College, Sait Polytechnic, South Suburban College, Southern Illinois University, The University of Alabama in Huntsvilee, Triton College, Umpqua Community College, University at Albany, UHD, University of Idaho, UIC, The University of Mississippi, UT, The University of Toledo, University of Wisconsin-Stout, Volunteer State Community College, and Yavapie College

Why I Tried:

During the first-day-of-class-reading-of-the-syllabus my professor came to this line: “Do not use the computers in the classroom or math lab to use email, or use any other non-math website.” “Actually,” he said, “I’m pretty sure that the computer department locked down all of the computers, so why don’t you try, if you can actually get anywhere I’ll be pretty surprised, but come and show me.”

Challenge accepted!

MyMathLab Opening Screen

During my first glance around the software, I gathered some basic information:

  • MyMathLab is a web-application that allows students to
  1. read from an e-text (a pdf)
  2. watch video examples (in quicktime)
  3. do homework in a flash application
  4. watch math presentations (powerpoint)
  • MyMathLab runs in a stripped down version of Internet Explorer.
  • The entire computer seems to be under the control of some type of user-access control system. Attempts to click on the start-bar or the windows time are met with an “Unauthorized Function!” dialog box. I seem to be completely sand-boxed in.
  • There is no physical tower, or box powering my monitor, keyboard, or mouse. I seem to be using a terminal that connects to a MyMathLab server somewhere else on campus.

Thinking back to my experience at a highly micro-managed yet highly incompetent call-center, I remembered that my first, and probably easiest route to escape would be to find a dialog box that I could hijack and turn into a make-shift explorer window. From there I could navigate to anywhere I had permissions.

Failure 1: The weakest point in any system is the reliance on any third-party controls or software to perform a critical function.

Administrators will perform their due-diligence in locking-down any user access that they have created, but often fail to check, or even understand third-party systems that they give rights to — assuming that the third-party system will always behave.

This route of attack was remarkably simple, yet yielded a remarkable amount of access.

Step 1: find a dialog box

While the quicktime tutorials and the pdf e-text both opened in a custom reader, or at-least a custom shell of a known reader, the slides opened up right in a fully-featured Powerpoint session. I was a little surprised! I first went for the “open” button, which led to a “Unauthorized Function!” message. Good Job, guys. Open Recent and Save As were both dead-ends too.

“Let’s get creative,” I thought, and created a new document. That worked!  I noticed that more of the ribbon appeared — I must have been looking at a read-only version of the math slides. Now I see more font control, as well as some shapes, as well as more buttons along the ribbon: Insert, Design, Animation, Slide Show, Review, View, and Format.

The Insert tabs looked like a gold mine: insert videos, images, objects(ole I’m assuming), etc.  Inserting an image finally led to my dialog box!

Step 2: Explore Access.

I held back my hopes as the Image dialog box opened for me.  A couple things could still go wrong at this point: I might only have access to my sessions Documents and Settings Folder or the file-type could be restricted to images only. I held my breath and click on My Computer on the left of the dialog box…

Oh. My. Word.

  • C:/MyMathLabServer
  • Network Places

To test out my permissions, I right-clicked, created a new text file, and then proceeded to delete that file. Success.

Failure 2: Giving the user write permissions to system critical files.

Now for a look around: C:/ had all the normal stuff: program files, windows, documents and settings.

The most I dared to do was to open one the the DLL files in program files/mymathlab with notepad and make a small change in a comment section, save it, and then change it back after checking to see if it worked. It did.  I also had access to the host-file entries that prohibited any access servers other than mymathlab.  Probably the most damning however, was my ability to open the command prompt, which allows nearly unrestricted access to the inner workings of the local network, as well as the local workstation.

Failure 3: The workstation user account had access to the command prompt.

After class, however, my inner white-hat prevailed, and I ended up telling my professor what I had found, who then nearly sprinted up to the CS support lab and dragged a tech down for me to walk through my simple exploit. And seeing as I gave CS support adequate warning about the exploit, I now have no qualms about sharing my story, because I’m sure its fixed by now!

The moral of my story? Don’t be a bad programmer, don’t rely on third-party software/controls for essential functions, and most of all: don’t try and lock-down students, it just makes them curious.

Tutorial: Opening a Pop-up window in

There are many reasons that a user would want to open up a new window from your ASP site. Maybe the clicked on a button or a link, maybe the current page just isn’t doing if for them.  Maybe their current page has self-esteem

issues, or weight issues.  Maybe their current page is getting a little thin on top, or doesn’t really do to well in the bedroom.

Back to maybe they clicked on a button.

Opening a new window from current page is actually quite simple! and can be accomplished in three steps:

  1. Create a control on the page that can handle and “onClick” event. This could be a plain HTML button, an anchor tag, an image, whatever…
  2. Double clicking on the control will open the code for the new HTML control. It should look like this:

function Button1_onclick() { }


Look what I made at School!!

Remember, for this to work you’ve got to use a plain HTML control, not a “runat=server” .net control. These are found in the HTML Tab on the left.

And finally, the code that goes inside is:

The parameters are (the url of the new window, the title of the new page, size stuff)

View the page, click on the button/link/whatever and Whala! a new window opens.

Tutorial: Pass data between pages in

You have created the perfect webpage. Beautifully formed HTML, poetic CSS, artistic JavaScript, and cunning jQuery. And suddenly — a link — and all user data is lost!

By far, the simplest way to pass data between pages is by using URL variables. These little nuggets act quite a bit like two pages playing catch:

  • the first page throws some variables along with the URL
  • the second page must catch them

the throw

Get the data, save it as a string like this:

then send the data to a page like this

Thats it!

And now for a little explanation of part one:

the “?” after the url means “hey server, get ready… Im about to pass you some data.”

“name=” this is what im going to be passing you.

and “strName”… Here’s the data!

It’s pretty simple to pass multiple values too: just put an & symbol between variables, like this:

Be sure to put this inside of some sort of event in the code behind, like a button or linkbutton click.

the catch

This part is almost as simple to implement as the throw. The basic steps are:

  • get the variable from the url, if it is there
  • the store it, or use it right then

As your page is loading, your want to let the server know that you are expecting some data, and store it if there.

this is done by using:

Then you are free to do any ifs, fors, dos, or other whathaveyous on your string that you would like.

For example: Im expecting a username, but since i didn’t get one, send them back home:

6 ways to ensure your visitors never, ever come back

As one of the web designers here at MyMark, I spend quite a bit of time with my head in code. In fact,  “System.out.print()” makes a lot more sense to me than “Quoth the Raven.”  However, in my travels around the web, I have noticed many things that you can do to drive away pesky visitors.  Six of the most popular are:

6. If a feature exists, use it.

As a web designer, I remember a time when people just weren’t afraid to use every tool for every job.  There seems to have fallen a shroud of arrogance where we are too good for all the features the web makes available to us.

This individual has put together a really nice example of what a website should look like:

When this website opens, our senses are immediately greeted, not only with three separate background colors, but a page title that scrolls back and forth. We then are amused by an animated background that looks like little bubbles on the page.  These are only to be topped, however, by a wonderful blast from the speakers of the William Tell Overture — played in full MIDI glory.

There are so many options the web has given to us over the last 15 years:

  • Blinking text
  • Scrolling headlines
  • Auto-Playing Sound and Video
  • Pop-up advertising

Why not use them all?

5. Spelling and Grammars takes too much time.

We won’t spent much time with this because it’s relatively simple:

Churning out content takes a lot of time, and any time we can cut from the process is well worth the cost.  After all, our goal isn;t to make it perfectly readable, just readable enough to get them to click on the ads.

4. More color equals better.

Time and history have consistently proven that more color equals better.

See? Better.

Like most aspects of our physical world, this principal translates quite well into the online world. When designing your site always try to include as much color as possible. These colors may be complimentary, tertiary, binary, obfuscatory, etc. The important thing to keep in mind is just to get as much color in there as possible.

One website the makes excellent use of this principle is

Colorful Christian Website

This website really goes above and beyond! Not only do they manage to get ALL the colors in on one page, they somehow manage to scroll them across the screen at a high rate of speed — which ties into the next tip:

3. Rely on flash, images, and animation.

When that writers block hits — and it eventually will — nothing can mask it better that using  more graphics to spice up your content. These will distract your readers from the lack of meaningful content, and distract them until their eyes skim to the next part of the page.  The thoughts sound a bit like this: “Nice banner, hmm… menu. Oh, nice picture! words, words, words, and here’s the link I was looking for.”

Keep in mind that these images don’t necessarily need to be related to your post, just mildly interesting. For example:

  • A young child blowing on a dandelion
  • An attractive business woman
  • A portrait of a smiling family with the sun behind them.
  • An older dog, usually in sepia tone

This technique also works well for non-static imagery, like a GIF animation, or small flash object.

Let’s do a case study:

Company XZY knows they need a website — in fact they have been hearing about them for years.  After getting together the momentum and resources, they purchase a domain name and hosting space with a pre-installed web template. After typing in thier mission statement, “XYZ’s Mission is to scout profitable growth opportunities in relationships, both internally and externally, in emerging, mission inclusive markets, and explore new paradigms and then filter and communicate and evangelize the findings,” XYZ company realized their site needed a little more “POP” to it.

How could we help XZY company?  Instead of plain text “XZY Co.” and their logo, this could fly-in from the left of the page, and screech to a halt just before the right margin.  To spruce up their mission statement, we could insert a photo of a multi-ethnic business team standing in a large glass rotunda. We could also have chosen a rotating globe with their employees silhouettes in the foreground.

If these techniques do not immediately work, there’s always the “funny-picture-of-a-cat-with-a-badly-misspelled-caption” trick. This is nearly guaranteed to work.

2. Buzzwords are the key to good content.

It is generally well known that the purpose of text on a website is to provide search engines something to find you by.  Therefore, thorough and repetitive placement of industry relevant buzzwords greatly enhances the SEO (search engine optimization) of your particular web page, and will launch tagging you into the blogosphere of our post Web 2.0 world.  Note, however that these keywords do RSS not  have to be particularly relevant to your industry — any hip industry will do.

Any finally, the best way to ensure your visitors never come back:

1. Meet your needs, not theirs.

Its is Your website after all! When writing your content, it is important to ask yourself the following questions:

  1. How will this make me look?
  2. What can this post do for me?
  3. What would be the popular thing to write?

Be very careful not to consider these questions:

  1. What is relevant to my readers?
  2. Can I solve a readers problem?
  3. Is there a pressing issue or concern I can help with?

These later questions can steer you away from your true goal: to meet your own needs.