Brian2000

I'll be giving a talk at tomorrow's MAC URISA conference titled Designing an intuitive web mapping interface: Municipal Outreach Project within the Meadowlands. Come check it out from 3:30pm - 5:00pm

Subtitle: Mailing lists are DEAD. I understand companies spam everyone, but developers are also to blame!

Overview:

So you have a mailing list, and you want to make sure hackers out there don’t sneak in and remove your subscribers. AND, you also want to make sure it’s still quick and easy for a subscriber to remove his/herself? No problem, simply implement unsubscribe keys and keep the process user friendly!

Preliminary: Unsubscribe Keys

Creating account specific unsubscribe keys is an easy way to provide a heightened level of security for the remove/unsubscribe functionality in a mailing list system. Developers can use these keys as an extra required field to authenticate against if a user is trying to unsubscribe from a mailing list. This helps prevent a hacker from flushing everyone out of your list, and doesn’t require a lot of changes to your system.

Implementation: Creating the unsubscribe keys.

Option A. Two fields found in literally every mailing list system out there are the email address and the primary key. You might come across a table that doesn’t have a primary key, though rare this method can still be applied using another field in the table. If you can combine the email address and primary key into a string and then hash it, the resulting string will be difficult to reverse engineer (essentially, a method for predicting possible keys can be made, however no true answer can be found via hashing). After running the hash, the resulting string can be used as the unique unsubscribe key. When creating the keys, I also recommend using a salt to enhance the process, and add an extra level of sophistication to the process. This method can be run each time a user is added to the mailing list. Store these keys in the same table as the email addresses for easy recall or in a separate table (or database) that is only queried for unsubscribing as an extra precaution in case hackers were to gain access to the email table. Option B. Another option is using a function that creates random keys (like a password generator) and either hashing them with the email address or just using the randomly generated key as is. I recommend using "Option A" because it requires very few lines of code to implement, however if you already have a password generator in your system, it may be easier to simply call that function.

The Unsubscribe Action: Make it easy for people to unsubscribe or else!

Unsubscribing needs to be an easy process for everyone! Being able to simply click "unsubscribe" and be done is what separates a good mailing list from the terrible-awful spam mailing lists that populate so much of the internet. Consider this, if someone can easily remove themselves from your mailing list they may consider rejoining in the future. A painful unsubscribe experience is enough to loose a client or customer forever. Plus if people don’t want to read your emails, there is nothing you can to do to change their minds! A bad technique I've come across is the exit Survey. People don’t want to fill out a survey before they unsubscribe, and they certainly do not want to sign in or go through some other long process to remove themselves. If your unsubscribe process takes more than 1 click, people are going to flag your emails as spam instead of bothering with an elaborate set of instructions. Getting flagged as spam is the absolute death of a mailing list! When people begin reporting content as spam, it’s only a matter of time before that email address disappears from everyone’s inbox and is auto-labeled as spam for the masses.

A link is all you need!

At the end of your email provide a link that features the unsubscribe key and email address as URL variables to the unsubscribe page. When the page request processes, your unsubscribe function can check to see if the email address and unsubscribe key are a match. If the two fields match up simply remove the user from your list. Easy as pie! Example Unsubscribe Link: www.example.com/unsubscribe.php?email=JohnDoe@Foo.com&key=123456 Note: Users should never need to know their unsubscribe key, and most people that look at the link provided at the end of an email will never know it’s in there (or what it’s for). How many times have you clicked unsubscribe and didn’t think twice?

Here’s an HTML5 experiment in progress…

HTML5’s canvas element is pretty powerful and easy to use. Rendering images, shapes, and text typically does not require a lot of code. So I decided it would be fun to build a simple javascript gaming engine to see what I could do with the canvas element in a few hours. The type of game being assembled is an aerial view sprite based game. Similar to what you would see in many early RPGs. This is just an experiment, the code was not optimized for performance, and I do not recommend using it for any projects, however I will post a working engine sometime in the near future. I ended up doing this all in just under an hour, and I have to say it was pretty easy getting everything to work together. I have not included graphics yet, so for now everything being displayed on the screen is text. I mostly focused on collision detection and sprite movement. Via key presses the sprite will move either horizontally or vertically around the canvas. The sprite will also bump into the edges of the defined map using via the collision detection I wrote. Finally the sprite has been configured to handle parameters such as which direction it is facing, if it is standing still or moving, etc. I might expand these parameters down the road to support things like health or special behaviors. The explanation of code is broken down into 4 main chunks: the environment, keyboard detection, sprites, and movement. Each code section has unique attributes and functions, and the environment section controls what is displayed on the canvas as well as refreshing and redrawing the canvas.

Environment.

This example uses an aerial view environment; we’re looking down at the sprites. As mentioned earlier, your view of the environment is commonly found in many early RPG games. The environment object contains a list of each sprite that is currently active within the canvas, and runs the functionality to draw the sprites to the canvas. There’s also a function outside the environment object called refreshLoop which first clears the canvas then draws the current state into the canvas. I will eventually include the refreshLoop within the Environment class, however for experimentation I found it easiest to include within the page itself.

Keyboard detection.

This area checks for keyboard activity. keyUp acts as a reset function for the speed and current key variables. The reason I have a function resetting these variables is for things like sprite acceleration or rapid-fire. In scenarios when the key is held for a long duration, the sprites speed can be accelerated to simulate running, flying, or any accelerated movement. It would be good to define these movements in another class for calculation as many javascript libraries already do. keyPress triggers whenever a key is pressed or held. It triggers the default sprite’s movement functionality. If you remove the comment in front of CurrentSpeed this will provide some basic acceleration – hold the key, and the sprite will "run".

Sprite Object

This example uses a character sprite, no graphics yet! Though were only displaying a few characters to represent our sprite, I actually dove in rather deep with this section and developed a "state" setting for the sprite that indicates which direction it’s looking, a default state (centered), and an interval to return the sprite to its default state after it stops moving. This can later be expanded to display different sprites, perhaps showing how much damage a character has taken (weakened states) or if a character has acquired a different outfit or weapon. For now, state switching will be used to animate the sprite walking around, so it’s actually a great way of visualizing what’s to come when I add graphics into this project. I currently have the sprite displaying brackets for left and right movement, a plus sign for the centered/rest state, and I chose a caret and underscore for upward and downward movement. Though it is only displayed as text, it proved to be a quick and dirty way of implementing state switching before working with graphics. The sprite object also contains variables for positioning, and state along with the pos function which allows the environment, or keyboard input to relocate the sprite. The pos function should be used in conjunction with the movement section to provide collision and acceleration calculating. The draw function is called by the environment when then refreshes the canvas, and displays the sprite at its given location and state. The direction function updates which direction the sprite’s state is set to. Finally I also included a debug function that allows you to trouble shoot the sprite object.

Movement, Collision Detection, & Acceleration

Though the keyboard provides a mechanic for acceleration of the defaultSprite (the player), the actual calculations for any sprites acceleration are handled in the movement section. I also began some basic clipping functionality here (collision detection), and all of this is handled within the moveSprite function. For this example, the movement function requires the sprite’s current coordinates, the direction it intends to move, and the speed at which it’s heading. The function then calculates to where on the ‘map’ the sprite would be placed (tile size + direction + speed), and verifies if it can move there (no collision). Further expansion of this code will require determining if objects are in the way of a sprite that want's to move multiple positions per-refresh (a really fast moving sprite), and stopping the sprite at the point of collision.

Code and Example

You can view an example of this experiment here. As always this is open source so feel free to take a look and modify the code as you see fit. Just remember that this is a very basic example! HTML5 Canvas 2D Game Example #1 Source Code for HTML5 Canvas 2D Game Example #1

I was looking for one of those javascript date counters we’ve all seen a million times and came across a bunch. Each had its own unique twist but not too many were flexible. I realized it would be way more fun to just write my own. In doing so, I wound up with a wonderful little project on my hands. I decided to make it completely scalable and customizable. The counter was designed to fit just about any situation, it’s lightweight & completely unobtrusive, plus it has a wide range of user-defined options you can tweak. Introducing the BK Countdown, a light-weight, easy to use, fully customizable javascript countdown class for jQuery! Nothing beats free, flexible, and open source! Here’s a list of what it can do.

• It is really easy to use. Simply add one line of javascript and an element to your page, BK Countdown will do the rest.
• Full CSS support: every detail can be customized, even unique styles for pages featuring multiple countdowns
• Formatting control: choose the order of the display (Label + Spacer + Value, or reverse it)
• Element control: choose what elements are created to display the counter values (default is span)
• Messages: set a separate message for the day of and afterward (such as “Today is the day” and “the event is over”)
• Open Source: the code is yours to modify and use, just give me credit. Plus if you end up doing anything cool with it, keep me informed – I’d like to see! (Licensed under the GPL Version 3 license)

UPDATED Jan 9, 2013 I took care of a few bug fixes, mostly to fix things that came up in older browsers. Please upgrade old versions to the current 1.1 release attached below.

Creating a Countdown

Creating a coundown requires one line of code.

var countDown = new BK_CountDown('element', 'MM/DD/YYYY', 'HH:MM:SS', options );

To add it into a page simply create a new countdown inside the jQuery $(document).ready() function:

The code above initializes the counter when the page is ready, and from there the counter will do the rest. All you need to add to your page is the element in which you want the counter to reside. For this example I chose a div.

Variables

There are 3 required variables

• container: id of the element you are creating the counter inside of
• targetDate: Date you are counting toward. Format: MM/DD/YYYY
• targetTime: Time you are counting toward (seconds are optional). Format: HH:MM:SS, hours are 0-23

Options

There are several options you can set which allow for various kinds of customization.

• order: 1 (default) or 2. This is the element display order. 1 = Label + Spacer + Value 2 = Value + Spacer + Label
• spacer: text/string separator between label and value
• element: html element for label and value containers (default is span)
• end: Message to display when date has passed
• dayOf: Message to display on day of counter expiration

Examples & Download

Download:
UPDATED Jan 9, 2013

• BK_CountDown.js v1.1 compressed
• BK_CountDown.js v1.1 source

Examples:

• standard
• reverse order
• some css applied
• multiple countdowns on the same page + unique css

The Query Task is probably the single most important class in the ArcGIS Server Javascript API. Understanding how to access data from the server and how to manipulate it is the cornerstone to developing any GIS application.

There are a few examples within ESRI’s sample page, however I wanted to provide two examples outlining how I use the Query Task on a regular basis.

Example #1 shows how to use the Query Task’s where clause and pull data directly from a map service. ESRI’s provides a similar example, however it requires the user to submit a query within the page. My example allows you to have the query pre-canned and the results load with the page.

Example #2 takes this a step further and introduces the ability to access the same functionality via POST or GET. This is perfect for anyone interested in loading data into the page via URL variables (example2.php?name=Idaho) or perhaps someone that would like to call this function via AJAX.

I use example #2 all the time, so hopefully you’ll find it as useful as I do.

DOWNLOAD: EXAMPLES 1 & 2

*All data is provided via ESRI's hosted map services. Example 2 requires PHP.

Sometimes you wind up working on a page that switches back and forth between php and html. It can be tricky keeping track of code or making the mistake of over using the echo function. Luckily php supports an alternative syntax for control structures allowing you to jump in and out of php and html. Any code (html, php, anything) nested within a conditional will only parse if the defined conditions are matched. The end result is clean, organized, efficient code. One of my interns once put all his html code into an array and printed each part while looping through function calls. It worked, but it his source code was so hard to read that when I asked him to take a look at it a few months later he couldn’t even make sense of what he wrote. PHP's alternative control structure syntax makes it easy to identify code blocks and it’s widely used in many popular open source projects. WordPress for example makes use of this syntax all over the place. I you ever looked at the code inside a WordPress theme, I’m sure you’ve taken notice to this syntax. Here’s a quick example.

<?php// quick example, prints hungry if sandwich is false - it isn't
$sandwich = true;
if($sandwich == false):
  echo 'I am hungry.';
else:
  echo'Thank you, that was delicious.';
endif;
?>

Anyone familiar with Visual Basic might be drawing comparisons to the syntax and noticing the end if statement. Some might even suggest that this a counterproductive approach to clean code. PHP does this on purpose, because now you can jump out of the language and things can become a lot cleaner, and easy to read. So I’d sacrifice having to close an if statement with ‘endif’ any day over a complicated list of echo commands.

Supported Control Structures

PHP provides this alternative syntax for if, while, for, foreach, and switch statements. Any opening braces ({) you would normally use become a colon (:), and the closing brace is replaced by an endif;, endwhile;, endfor;, endforeach;, or endswitch;, respectively. I included an example of each below.

<?php $a=1; $b=4;?>

----Example IF Statement

<?php if ($a == $b): ?>
A equals B

<?php else:?>
A does not equal B

<?php endif; ?>

----Example WHILE Statement

<?php while($a < $b): ?>
Here is some code inside a while

<?php 
$a++;
endwhile; ?>


----Example FOR Statement

<?php for($i = 1; $i <= 10; $i++):?>
Some code in a for

<?php endfor; ?>


----Example SWITCH Statement

<?php switch($a): case 1:?>
	Code block for CASE 1

	<?php break;?>
    <?php case 2: ?>
    Code block for CASE 2

    <?php break;?>
    <?php case 3: ?>
    Code block for CASE 3

    <?php break;?>
    <?php case 4: ?>
    Code block for CASE 4

    <?php break;?>
<?php endswitch; ?>

Common problem with the Switch statement

It is important to point out that switch statements written in this format require the first case to be included with the statement. If you put the first case in a separate PHP block, you will get the following error: Parse error: syntax error, unexpected T_INLINE_HTML, expecting T_ENDSWITCH or T_CASE or T_DEFAULT I'm not sure exactly why PHP behaves this way, but it is a commonly made mistake that is not often explained or warned against.

THE RIGHT WAY

<?php switch($a): case 1:?>
	Code block for CASE 1

	<?php break;?>
    <?php case 2: ?>
    Code block for CASE 2

    <?php break;?>
    <?php case 3: ?>
    Code block for CASE 3

    <?php break;?>
<?php endswitch; ?>

THE WRONG WAY

<?php switch($a): ?>
 <?php case 1: ?>
	Code block for CASE 1

	<?php break;?>
    <?php case 2: ?>
    Code block for CASE 2

    <?php break;?>
    <?php case 3: ?>
    Code block for CASE 3

    <?php break;?>
<?php endswitch; ?>

Another Example

Here’s a more elaborate example which really highlights this point. Try switching the value of $user from true to false and see what happens.

 
<?php// This example displays two different blocks of html code depending the value of $user
$user = true;

if($user == true):?>
  

  
"welcome, You have logged in!"
  

 <?php else:?>
  

   Please sign in.
   
   username: 
   password: 
   
   


<?php endif; ?>

By now you’re a master of the alternative syntax. Perhaps a master of all things alternative, you’ll go on to start some alt-rock band now, and get a weird piercing or a tattoo. The point being, this is really easy syntax to understand and follow, it makes code easier to read, debug, and troubleshoot. Using this syntax is a win-win situation for any PHP developer. So, if you’re in the middle of writing an elaborate WordPress theme, or this is your first venture into the land of PHP, use this syntax and make your life easier!

A great feature in WordPress is automatic updating, it makes life easier for administrators and the feature is now integrated into everything from updating the core software to individual plugins and themes. A very common configuration problem that people run into with auto-updating is when Worpress prompts you with "To perform the requested action, connection information is required", and asks you for FTP credentials.

Have no fear, you do not have to manually update WordPress! There are a few ways of addressing this issue. The most obvious solution is by entering in your FTP credentials, however not everyone wants to enable FTP on their site, and there is a much better way of addressing this issue...

First: Why is this happening?

In version 2.6 WordPress introduced the Filesystem API which governs all the functionality needed for reading and writing local files to the filesystem. The API supports most host types, and ensures that these procedures are done securely.

Security is likely why you are receiving the FTP prompt in the first place. WordPress checks to see whether or not it has permission to directly write to the filesystem. It also goes one step further and makes sure that if the files being written are under the same user account as the user account that owns the system. If this is determined to be false the FTP prompt is displayed as the next best solution. Given the scenario a lot of people might try to run Chmod (a unix script that allows you to adjust read/write permission on folders). Chmod is actually rather far from the solution, so don't try writing a bunch of 7's into the folder permissions! Opening up the folder's permissions is bad practice anyway, and WordPress isn't looking for you to "fix" things like that (no properly written application will). WordPress is actually requiring you to make sure that the user account running WordPress is the same account that owns the directory your site is operating in (the Apache user). To do this, you need to change the WordPress user not the existing user's permissions!

Solution: Change the WordPress user to the Apache user

It's really easy to set the WordPress user account to the Apache account, the whole process is two quick steps. Step 1. Determine which account the Apache user is. To do this make a test php file with the following code:

 <?php
// outputs the username that owns the running php/httpd process
// (on a system with the "whoami" executable in the path)
echo exec('whoami');
?>

Run this code from the WordPress folder and you'll be shown the Apache user account's name.

Step 2. Run the following Unix command on the WordPress directory to assign it's owner as Apache's user:

# chown -R root: wordpress

In the example above, the Apache user name (taken from step 1) is "root", and the target directory is named "wordpress". If you are the server administrator, for security purposes I don't recommend running Apache under the root account or naming the WordPress folder "wordpress". However for the sake of an easy-to-follow example I wrote the code as such.

If you are using Webmin, open up the File Manager and navigate to the WordPress installation. Click on info and change the user name under ownership to Apache's user. Make sure this applies to this directory and all subdirectories and you're set!

I told you these were two very easy steps! Now you should be able to automatically update your WordPress installation, and you have the peace of mind knowing your WordPress filesystem is properly configured!

Stamen recently released a set of free open source web mapping services that are both fast and beautiful.

Watercolor (my favorite) is a great map service for anyone looking to add some artistic flare to their maps. The basemap incorporates hand-painted brush textures and high-level cartographic algorithms to create a map that honestly looks like someone sat down and pained every inch of the planet in watercolor. The map is absolutely stunning.

Terrain is the perfect open-source alternative to Google’s terrain map. It looks great at all zoom levels and visually has the birds-eye effect fully locked in.

Toner is a wonderful basemap for anyone providing a print page for their maps. It’s designed using only black and white with focus on labeling and textures. You can really make a dataset pop against it if you add a splash of color, like selecting a building in red – for example.

Stamen has made these services available for the following APIs: Google Maps, OpenLayers, Leaflet, & ModestMaps

Today we’re going to set up the localhost environment.

There’s no place like 127.0.0.1 (There's no place like home)

So, what does “localhost” mean? In simple terms, localhost is the address you type into a web browser that looks to a folder on your computer instead of the internet. Using the localhost developers can build and test websites on their personal computers without relying on a seperate server or the internet. The technical explanation for localhost can get a little confusing for beginners, but for all intents and purposes Localhost represents the address for your computer!

Time to dive in; we’re going to install a LAMP!

LAMP stands for Linux Apache MySQL and PHP (sometimes the P stands for Python or Perl, though typically just PHP). LAMP installations give you everything you need, and installing one has only gotten easier over the years. Now you can typically deploy one with a few clicks of the mouse with zero frustration! If you’re running Ubuntu, the whole setup is ridiculously easy and only takes a few minutes. The Ubuntu help site explains every step right here: https://help.ubuntu.com/community/ApacheMySQLPHP

But I don’t use Linux?

Acceptable, plenty of people don’t use Linux, so you’re in luck! You can install LAMP-like solutions on just about every operating with various per-configured software packages, my favorite being XAMPP. Everything about XAMPP is great, it’s free, easy to setup, and works on most platforms including Windows and Mac. This is the quickest and easiest way to create a development environment, and depending on the project, it's still my favorite!

Once you've gotten your localhost set up with PHP and MySQL, you are unlocking a door of endless development possibility. Now you can easily start developing basic PHP & MySQL applications or jump right in and install wordpress or one of the many excellent open source projects out there.