dougv.com « Doug Vanderweide

Last weekend I was in Cambridge for the fourth annual New England GiveCamp, which brings together tech and design people with nonprofits in need of their help.

Again this year, I was team lead for The Esplanade Association, a nonprofit which cares and advocates for the eponymous park along the Charles River on the Boston side.

Last year, I lead the team that rebuilt the association’s website on a WordPress backend, tossing in some scheduling and form feedback bells and whistles.

This year, TEA was looking for an interactive map of the park. They had an embedded Google Map, but it was, in a word (and a pun), pedestrian: stock icons, little detail in generic infoWindows, etc. Expedient, but hardly exciting.

I took the project because 1. The Esplanade Association is a dream client (see last year’s recap for why) and 2. I’ve done a pile of work in the Google Maps API.

Once again, I was blessed with a team of very skilled, very dedicated and very amenable people to do most of the work: Nate Bates and Will Klein, both experienced JavaScript and Web UX men; and Bryan Phillips, a graphic designer and GiveCamp fixture. My biggest problem last week was coming up with a polite way to to ask them to wait until we were all together at GiveCamp before programming the entire solution.

That enthusiasm and ownership served us well, even allowing us (well, not “us”; Nate) to tackle fixing the website’s CSS to be responsive to screen size, in effect making it mobile.

Continue reading: More Than One Way To Skin A Map: New England GiveCamp 2013 Recap »

I’ll be attending New England GiveCamp 2013 this weekend.

GiveCamp is a way for technical people and designers to donate their time to worthy nonprofits. Organized by Jim O’Neil and Kelley Muir and hosted at Microsoft’s New England Research and Development center on the Massachusetts Institute of Technology campus, New England GiveCamp is in its fourth year.

This year I’ll again be working with The Esplanade Association. Last year, I was the leader of the team that revamped their website. It’s a real pleasure to work with them again.

Over the weekend, we’ll be working on an interactive map, probably built on the Google Maps API, of the Esplanade’s many amenities and features. The fellows assigned to this task are already full of ideas and getting to work, so once again, I’ve been very fortunate to have highly motivated, very capable team members assigned to our task.

It’s probably going to be another hectic, exciting weekend. Can’t wait!

All links in this post on delicious: https://delicious.com/dougvdotcom/new-england-givecamp-2013-this-weekend

Not to kiss my own ass, but Microsoft’s official advice on avoiding SQL injection attacks sounds awfully familiar to readers of this blog:

Sanitize (validate) all inputs: “This helps to ensure that the input is free from characters that cause SQL injection attacks.” It also allows you to fix the form and data type of the user input, which pretty much renders basic script kiddie attacks useless.

Parameters, not strings, as query variables: “Creating dynamic queries using string concatenation potentially allows an attacker to execute an arbitrary query through the application.”

In other words, it’s harder to break this:

@person VARCHAR(20); SELECT * FROM table WHERE person = @person;

than it is to break this:

SELECT * FROM table WHERE person = 'some user string';

Stored procedures, not free-form queries: “Stored procedures by themselves do not remove SQL injection vulnerabilities. They only raise the bar on the attacker by hiding much of the underlying database schema.” That is, the attacker can’t easily find out what columns are in a table, or what type of data is in those columns, if you use a stored procedure.

Minimal permissions: “In general, database applications should be using a low-privileged account that has the minimum permissions required to execute the statements submitted to SQL Server.” As in, create a user in your SQL database whose only permission set is to execute your Web-based stored procedures, and connect to the database server as that user.

Those are the basics. And if you don’t understand how to do them, I’ll be putting together a blog series on how to convert your old string-queried Web applications into one secured with stored procedures and proper permissions.

Continue reading: Microsoft’s Advice On Avoiding SQL Injection Attacks »

Some time ago, I received the following e-mail:

Hello
I am interested in getting into computers and designing software and websites. You said in a yahoo post that you did not get a degree but learned everything yourself. How did you do this? Where did you get your information from?
Thanks

My reply:

I started out by playing with Web pages. Then, as people asked me to make things for them, I searched on the Web for examples of how to do it, or read self-help books (think “For Dummies,” “Sams Teach Yourself” and Wrox softcovers) to teach myself how to do things.

If you want to make a career of Web development, my recommendation would be to do so in a more orderly manner than “learn as you go along.”

I would say this: Designing a Web site, and programming it, are two very different skill sets. You can be good at both, and great at one, but it is very difficult to be great at both. Design is left-brain, programming is right-brain.

That doesn’t mean you can’t do both; it means that you should expect to specialize either in design or programming. You may be that rare person who can master both, but expect that one or the other will be your actual focus.
Continue reading: Basic Advice For Learning Computer Programming »

This question came via email earlier today:

Your Article: An Image-Based ‘Checkbox’
http://www.dougv.com/demo/js_imgswap_checked/example2.html

Awesome article and very informative. I was trying to get it to work for what I am trying to accomplish but I am having a hell of a time getting it to work I was hoping you can help me.

I have a selection form based on Check Boxes:

item 1 (box)
item 2 (box)
item 3 (box)
item 4 (box)

I have images that correspond to the check boxes, item1.png, item2.png, item3.png, item4.png that are located elsewhere on the page. I just need the image to change based on whether the check box is checked or not. It doesn’t matter if it is faded or an entirely new image, so long as the user notices which box they checked. My problem is there are a lot of little images so in your example you had the two set variables, on or off. How do I introduce multiple images???

I have early tests and the problems are that the default unchecked images do not show up until after the check box is checked…all of them and two whenever I try to add multiple images and or check boxes it breaks somewhere, perhaps the array or I am approaching this at the wrong end. I need your help.

To rephrase the question:

• We have four checkboxes inside a form.
• On the same page, we have four images. Each image is related to one of those checkboxes. That is, Checkbox 1 is related to Photo 1, Checkbox 2 is related to Image 2, etc.
• When we click a checkbox, we want to change its associated image somehow, to indicate the checkbox’s state. (In this case, I am going to use a faded image if its related checkbox is unchecked, and a full-opacity image if its related checkbox is checked).

Easily enough accomplished.

For this exercise, I will use four pictures of Miss USA 2012 contestants, and ask users to pick which are their favorites. If a contestant is selected, her picture will be at full opacity; if the contestant is not selected, her image will be at reduced opacity (i.e., faded).
Continue reading: Changing An Image Based On A Checkbox Check Via jQuery / JavaScript »