Front-end Series: Part 1 – Architecture

This is part 1 in the Front-end Series. As a front-end developer at a large organization, I work daily on architecture, performance, automation, localization, and compatibility, and other topics which I will share during this series. Feel free to post topic ideas in the comment section!

Large scale web application architecture is much more than a server and a /www folder. The build process can scale with need, but the basic setup contains building assets to a development area, then production environment, caching, and delivery via cdn.

This is example architecture diagram — showing building to different environments, pushing to cdn boxes, and caching.

Front-end-archetecture

Building static assets via source control

Working with other developers at any scale necessitates use of a version control system. Whether Git, Subversion, Mercurial, or the next new hotness, a DVCS is an absolute must. After developing in a local environment, assets are pushed to a development version-controlled server.

The assets here are never directly used by the application, but are pushed to a CDN server (or a mock-cdn for development).  The source control and CDN can be can be synchronized by a few different methods:

  • CRON task that rebuilds one folder from the other
  • Post-commit hook that runs similar script
  • 3rd party build software, like Anthill

Server environments, or “lanes”

It’s necessary to duplicate asset servers for different audiences. The most basic are:

  • Development
  • Testing
  • Staging
  • Production

A typical pipeline is:

  • Assets are developed locally
  • Files are moved into the Development environment to be integrated with other developers work and preliminary tested
  • Quality Assurance tests the application.  Feedback provided to developers (loop back)
  • Once testing is successful,  the assets are moved to the staging server, which serves as a place for stakeholders to preview the application, and approve it for production
  • When okay-ed, the files are moved to production where they are publicly accessible. They are now “live”

Caching and Content Delivery

Linking directly to assets on a server is an excellent way to kill your site, when it goes viral (the Reddit hug of death, or the slashdot effect). The most basic level of defense is on server caching. On smaller sites, this can be an effective protection. Many CMS’s (like WordPress) have plugins that can caching dynamic content (php generated files saved as static html). WP-SuperCache is an excellent example of this layer of defense.

The second layer of defense is a Caching Appliance. This is a server (or cluster of servers) that specializes in serving static files with extreme speed. This appliance has only one function, which allows it to maximize its resources for the one purpose of serving content.

The top layer for serving files is utilizing a Content Delivery Network to distribute and cache assets globally.  At it’s core, a CDN is a network of servers placed in strategic locations around the world, each containing duplicate and synchronized files. These servers, ideally located on backbone connections, serve files to customers quickly in different areas of the globe. For example, a user in France is served assets from a UK server, rather then making the transatlantic trip to Virginia.

For smaller sites (such as this one) there are free or inexpensive CDN options. This website uses CloudFlare to serve static assets to viewers (your CSS file was probably served from this CDN, reducing my server load. Yay!) An excellent CDN for large-scale websites is Akamai. You’ve almost certainly been served assets from Akamai (Facebook, Adobe, Microsoft, and many more use it).  If you’re in the market, take a look at CloudFront as well.

So there you have it: The front-end build and architecture for one of the largest publishing organizations in the world!

Big Picture

What I’ve described is the front-end server and building process for a large scale web application. This setup will typically be mirrored by the application codebase (back-end).

back-end-architecture

Comments, feedback or criticism? Let me know in the comments:

Software Engineering principles applied to CSS

Some of my thoughts about CSS developent. Think of more? Share in the comments and I’ll add them to this page!

Low Coupling

The principle of low coupling suggests that distinct parts of an application be as “stand-alone” as possible.

To illustrate: A very decoupled program could be available from the command-line first, then a GUI is built using that programs API’s. This ensures that the logic of the program is decoupled from the presentation. A developer can change the internal workings of the program without affecting the other aspects of the architecture.

Targeting elements based on their DOM order tangles up the visual presentation (CSS) with the structured content (HTML) – Highly coupling the presentation with the content.

Changing the name of your parent container shouldn’t detach your horizontal menu from its style.

Separate the presentation from the structure with the use of classes:

High Cohesion

Separating the concerns of CSS into different files allows you to create highly cohesive classes that, once in place, allow a great deal of flexibility in development. Areas of concern are:

  • Layout: positioning of elements, geometric dimensions
  • Style: colors, borders, backgrounds
  • Normalization: typography, element defaults

Separating the CSS into separate areas allows you to create highly cohesive “modularized” rules that have the bonus of being easily swappable:

  • Layout-full.css, layout-compact.css
  • Blue.css, green.css, red.css
  • Normalize.css

Any combination of the above files could be used to alter the presentation of the application without changing the content architecture.

Inheritance

If elements are targeted by semantic classes, instead of their order in the DOM, it is easy to modularize classes using the principle of inheritance:

This is a popular technique in many rapid development frameworks, such as Bootstrap, Zurb, and others.

Additionally, CSS may use the principle of multiple inheritance by using styles from multiple sources – such as a horizontal navigation getting its form and function from layout.css, and its color and branding from color.css files.

Generalization

In software engineering, the most general use-case is often sought, as it will eliminate redundant future work. Nathanial Borenstien, inventor of the MIME type once said,

“It should be noted that no ethically-trained software engineer would ever consent to write a DestroyBaghdad procedure. Basic professional ethics would instead require him to write a DestroyCity procedure, to which Baghdad could be given as a parameter.”

Name classes based on their general use-case, rather than on their appearance, position, or other attribute.

If not, ‘The boss’ might ask you to change the submit button to green, but the in-code class will stay .button-blue  forever, because it is already in hundreds of places.

Naming classes on their general case avoids this problem, and also makes for easy discovery and maintenance by future programmers, or your future self.

Additionally, duplication of elements becomes easier. If not, you might need to duplicate the element somewhere other than the original place, and you end up with navigation in the footer called  .sidebar-nav

Abstraction

If using the principle of generalization, there may be some base class that is never intended to be used on an element on its own. To provide some level of abstraction, only declare universal attributes on parent classes.

Encapsulation (private styles)

By using the principle of inheritance, we can make some classes essentially private by namespacing their selector rules:

This ensures our style definitions don’t ‘leak’ into other elements, and can only be used within a specified parent element.

Interesting interview question #1

During an interview (for a software developer position) with a major employer in the state of Utah, I was asked an interesting programming question:

Create a function that, given an integer parameter, will return the middle three digits

I mentally wiped the sweat away from my forehead: whew — not computing bigO notation,  inventing a new search algorithm, or performing my favorite song!

I verbally walked through my thought process:

There will be a need for some looping to trim off the first and last digit of the integer each iteration — perhaps a while loop with the condition that the value is greater than 99? No, there is a better way: I’ll trim the digits recursively.

I asked for some feedback on my thought process, then set out writing some code. I came up with something like this:

“Nice solution,” the interviewer replied. “How will your function handle 4501?” Uh-oh: It will trim 4 and 1, and return 50. “Hmm… What about 40251?” Darn: It will trim 4 and 5, recursing on 025, which will be interpreted as 25 and fail.

So, as it turns out, programming questions in interviews might not be about creating the elegant, recursive solution — but about asking the right questions. Thorough requirements gathering.  Lesson learned.

After the interview, I couldn’t get the question out of my mind, and spent some time giving it a proper solution: handling input less than 999, error-ing on even values (finding the middle three of an even digit value is a somewhat undefined behavior), and polishing it off with some unit testing.

See a live version here

 

From College Publisher to WordPress: My own daily WTF

Up until June 2011, The Signpost (Weber State University’s student news organization), was hosted by College Publisher — A content management system designed for university newspapers like The Signpost. In June 2011, the paper made the jump to WordPress.

The first order of business was to import past stories from College Publisher into our new WordPress hosted site. Easy right? Get a SQL dump from CP, format the columns for the WP database, upload the new SQL file. Bada-boom bada-bing. If only…

After waiting nearly two weeks for a response from College Publisher, they provided us with a temporary FTP site which contained the archived file export:

Oh, Jupiter! Why?!
Oh, Jupiter! Why?!

 

Working with large Excel files can be difficult, working with nearly 4 GB excel files can be damn near impossible — especially when working on a office computer with 4 GB of of memory. After closing all non-essential processes, I was able to open up the file — only to find 60,00 rows — many of which contained classified ads that were stored with stories, incomplete records, and other corrupted gobbledygook.

Sorting by story size, and filtering my some key words, allowed me to filter out 20,000 bogus records — bringing the Excel file down to about 40k. Upon further inspection, nearly all of these remaining stories contained duplicate headlines. A typical duplicate set contained 4 records, one of which being the whole correct story.

40k records, with 4 duplicates per unique story leaves 10k unique stories — more stories than would be feasible for one individual to sort through in a reasonable amount of time.

The eventual solution? I created SQL insert scripts from the Excel file and imported them into a MySql database. Then I whipped up a PHP  application that allows searching by article title, author, and body content. Duplicates are displayed to the user, along with a Reddit-esque voting mechanism for voting correct stories up, and bad ones down. As prior authors search for their old work, they improve the system — “crowd sourcing” the work or filtering out bad data. To date, 7,810 records have been voted up or down — 18%.

Thanks, College Publisher!

Oh, and as far as importing the stories into WordPress? I guess we can tackle that in another few years when the archives have been filtered.

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

Programmers

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.

Animation

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.

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.

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:

www.angelfire.com/super/badwebs/

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

http://www.dokimos.org/ajff/

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.