Category Archives: Other Services

LiveJournal Hits ‘Undo’ on Sex-Themed Site Suspensions

Hundreds of LiveJournal users found that out the hard way Wednesday when the blog hosting site suspended around 500 of its community journals and blogs for violating its policy barring the posting of content about rape, pedophilia and sexual violence.

The result was a massive user revolt. LiveJournal’s parent company, San Francisco’s Six Apart, received a flood of complaints from locked out users on Wednesday. The company recognized that its effort to “clean up” its community by blocking sex-related material went a little too far, and according to Thursday’s
mea culpa post from Six Apart CEO Barak Berkowitz, it’s now reviewing every suspended journal individually to see if a true violation of site policy is evident in each case.

The company suspended (not deleted) the sites after fielding complaints from readers inside and outside the LJ community. Six Apart decided which sites to target based on the profiles set up for each community. Profiles listing interests like “rape” or “incest” or “child rape” were suspended, and any reasonable person browsing those profiles would see why such action was taken. However, some of those suspended sites are legit blogs created by users who discuss those tough topics.

Indeed, some LiveJournal users write fictional accounts of rape and incest in order to publicly work through their own personal experiences with those scenarios. The sci-fi fan fiction community also has a long history of writing stories involving sex fantasies between characters. The idea of Jean-Luc Picard and Dr. Crusher getting it on may be titillating, but writing about Harry Potter having sex with one of his underage schoolmates could send up some red flags.

According to Berkowitz, the company had to decide where to draw the line: “While there are stories, essays, and discussions that include discussion of these issues in an effort to understand and prevent them, others use a pretext to promote these activities. It???s often very hard to tell the difference.”

Six Apart is reviewing all of the suspensions right now. Users can expect the process to be finished by Thursday afternoon.

Build an Ajax Dropdown Menu

If you hang out with designers and developers at all, then you’ve probably heard the term “Ajax” by now. It’s the official buzzword of Web 2.0. But it’s also an extremely useful web development technique.

In the course of this tutorial, we’re going to look at what Ajax can do. Then we’ll use a JavaScript class to simplify your first steps toward the ultimate in speedy user interactivity.

First, what is Ajax? It stands for Asynchronous JavaScript And XML. In simple speak, Ajax allows us to use JavaScript to grab an XML file (or any other text) without reloading the whole web page.

Ajax has been used for a lot of things, but it is most impressive when many small updates are needed in a short period. Think streaming stock quotes or draggable maps.

In our example, we’ll use a pair of dropdown menu boxes (SELECT tags in HTML). A selection in the first box affects our list of choices in the second box. It’s not exactly cutting edge (Thau did something similarusing JavaScript), but it’s a proof of concept.

Before we get started, here’s the stuff you’ll want in your toolbag:

1. A love of extremely basic HTML.

2. Willingness to consult Thau’s Javascript Tutorial if you get confused.

3. “Http“, a caching XmlHttpRequest wrapper, which you can download to immediately make your life simpler. Plus, if you get into advanced Ajax programming, you may like the caching that is built into this Javascript class.

But that’s the future. Let’s talk about now, alright? Ajax on three. One, two, three… Ajax!

Before we do any JavaScript Ajax voodoo, let’s setup our HTML.

01 <html>
02
03 <head>
04
05 <!--
06
07     Javascript Ajax voodoo will go here
08
09 -->
10
11 </head>
12
13 <body>
14
15 <form name="frmSelect">
16
17 <p>
18
19 <select name="country" onChange="handleOnChange(this);">
20
21 <option>Select country</option>
22
23
24
25 <option>France</option>
26
27 <option>Germany</option>
28
29 <option>Spain</option>
30
31 </select>
32
33 </p><p>
34
35
36
37 <select name="prez">
38
39 <option>Select head of government</option>
40
41 </select>
42
43 </p>
44
45 </form>
46
47 </body>
48
49 </html>

Here we have created an HTML form containing two dropdown menus. The dropdowns use the SELECT tag, which can contain several options.

The first dropdown has four options: Select country, France, Germany, and Spain. Notice the onChange part of this dropdown:

onChange="handleOnChange(this);"

This will become important later.

The second dropdown has only one option: Select head of government.

What we want to accomplish with our Ajax call is to get the three most recent heads of government for each country and load them into the second dropdown whenever the user changes the first dropdown.

Sounds simple enough, but how are you on recent European presidents and chancellors? One great thing about Ajax is that we can grab content only when we need it. So, we’ll connect ourselves to some sort of feed that will give us the head of government for a particular country when we need it.

For the purpose of this example, our feed will be plain text files stored in the same directory as our web page. So, copy the following lines to their own text files.

France.txt:

Valéry Giscard d'Estaing|François Mitterrand|Jacques Chirac

Germany.txt:

|Helmut Kohl|Gerhard Schröder|Angela Merke

Spain.txt:

|Felipe González Márquez|José María Aznar López|José Luis Rodríguez Zapatero

Notice how the lines contain names separated by vertical lines? Those lines are called “pipes,” and the pipe symbol has its own keystroke on your keyboard. Just hold Shift and look for the backslash (). So, the plan of attack is that whenever Germany is selected (for example), we’ll make an Ajax call to retrieve Germany.txt, get rid of those pipes, and put the names in the second dropdown box.

Now that we’re ready for the Ajax voodoo, let’s get to the nitty gritty on the next page.

 

Packin’ boxes

If you haven’t downloaded request.js, the Ajax wrapper Javascript class, grab it now and put it in the same directory as the web page with the two dropdowns.

Now, find this line in your document:

<!-- Javascript Ajax voodoo will go here -->

And replace it with these lines:

01 <script src="request.js"></script>
02
03 <script>
04
05 function handleOnChange(dd1)
06
07 {
08
09   var idx = dd1.selectedIndex;
10
11   var val = dd1[idx].text;
12
13   var par = document.forms["frmSelect"];
14
15   var parelmts = par.elements;
16
17   var prezsel = parelmts["prez"];
18
19   var country = val;
20
21   if (country != "Select country")
22
23   {
24
25    var directory = ""+document.location;
26
27    directory = directory.substr(0, directory.lastIndexOf('/'));
28
29
30
31    Http.get({
32
33         url: "./" +  country + ".txt",
34
35         callback: fillPrez,
36
37         cache: Http.Cache.Get
38
39     }, [prezsel]);
40
41   }
42
43 }
44
45 function fillPrez(xmlreply, prezelmt)
46
47 {
48
49   if (xmlreply.status == Http.Status.OK)
50
51   {
52
53    var prezresponse = xmlreply.responseText;
54
55    var prezar = prezresponse.split("|");
56
57    prezelmt.length = 1;
58
59    prezelmt.length = prezar.length;
60
61    for (o=1; o < prezar.length; o++)
62
63    {
64
65      prezelmt[o].text = prezar[o];
66
67    }
68
69   }
70
71   else
72
73   {
74
75    alert("Cannot handle the Ajax call.");
76
77   }
78
79 }
80
81 </script>

Now that’s a big chunk of code.

This line reads in the Ajax wrapper class that does the heavy lifting:

1 <script src="http://www.wired.com/images/archiveequest.js"></script>

The handleOnChange function is called whenever the first dropdown is changed. Remember how I said that onChange stuff would be important?

Lastly, the fillPrez function takes the output from the Ajax call and puts the names into the second dropdown.

Let’s look through it a little closer.

This sequence of Javascript looks through the first dropdown, finds which one is selected, and returns the country name into a variable named, appropriately, country:

01 var idx = dd1.selectedIndex;
02
03 var val = dd1[idx].text;
04
05 var par = document.forms["frmSelect"];
06
07 var parelmts = par.elements;
08
09 var prezsel = parelmts["prez"];
10
11 var country = val;

Then, if an actual country is selected, an Ajax call is made for the name of the country with .txt at the end. We supply our other function, fillPrez, to be the “callback” function. Whatever comes out of our Ajax call, we want it to go to fillPrez.

01 if (country != "Select country")
02
03   {
04
05    var directory = ""+document.location;
06
07    directory = directory.substr(0, directory.lastIndexOf('/'));
08
09
10
11    Http.get({
12
13         url: "./" +  country + ".txt",
14
15         callback: fillPrez,
16
17         cache: Http.Cache.Get
18
19     }, [prezsel]);
20
21 }

We also pass along our second dropdown box, so that fillPrez will know which dropdown to fill.

The first thing that happens in fillPrez is that we make sure that our Ajax call actually found the list of heads of government:

1 if (xmlreply.status == Http.Status.OK)

If it didn’t, we let the user know there’s an error:

1 alert("Cannot handle the Ajax call.");

If we’re good to go, then we grab the list of names and split it apart on those pipes:

1 var prezresponse = xmlreply.responseText;
2
3 var prezar = prezresponse.split("|");

We clear out the second dropdown, except for the first option (“Select head of government”):

1 prezelmt.length = 1;

Then we add each of the names into the dropdown:

1 prezelmt.length = prezar.length;
2
3     for (o=1; o < prezar.length; o++)
4
5     {
6
7       prezelmt[o].text = prezar[o];
8
9 }

You have now successfully created an Ajax call. Your Javascript code made a connection to your server, grabbed a text file, split apart the names in the file, and plopped the resulting data right into your dropdown box.

See it in action and download the code at my website.

There are a number of ways you could expand this code. A few examples:

1. When someone chooses a head of government, you could redirect the user to the politician’s web page.

2. You could show information about the head of government and their time in office. Extra points for using Ajax to grab the selected politician’s bio.

3. You could also give up on the heads of government idea and instead fill the second dropdown with cities, states or provinces. Or maybe you could show fast food chain locations.

You get the idea. There are a plethora of possibilities.

Build Ajax Components With Spry

Apparently, the pro-developer guiding principles of Macromedia continue to survive under the direction of Adobe. Ever since they acquired Macromedia, Adobe, the company that was previously all about PDFs and PSDs, has been releasing a healthy serving of web tools via Adobe Labs. The Adobe Labs site is quickly becoming a vital meeting place on the web where developers can share ideas and experiment with new technologies.

Adobe’s Flash-meets-Ajax framework lets developers create dynamic interfaces and UI elements. Now they’ve unveiled a preview release of their new Ajax framework, Spry.

In this article, I’ll walk you through making a very simple Spry application. I hesitate to even call it an application, because most of the heavy lifting is done in the framework itself. The code we’ll be writing will look an awful lot like HTML and CSS.

Ajax for Beginners

JavaScript has had the XMLHttpRequest object for almost a decade now, but it really only started getting wide attention in 2004. All this attention was mostly due to some showoff web applications that made every developer who saw them think, “I want my site to do that!” But it also has to do with the spiffy, spiffy name given to it by the folks at AdaptivePath, who named this asynchronized application Ajax. Maybe you’ve heard of it?

A few high-profile Google applications in particular made a splash with Ajax: Maps and Gmail were first. It also powers some of the core functionality in the user interface of the ever-so-popular photo sharing siteFlickr. By now, Ajax has become integral to the fabric of the web, especially in the era of real-time applications like Twitter, Buzz and Wave (all of which use Ajax extensively in their webapp front ends, for the record). Ajax may also lay claim to being the first JavaScript object with its own fan website. Date.com doesn’t count, although I did have a scintillating chat with a lady there once about the getTimeZoneoffset method.

 

What is Ajax?

So what is this fancy object that everybody wants a piece of? In brief, it’s a solution to one of the big annoyances of web interfaces. Generally, the user inputs some data or makes a choice, and clicks a button that sends the data to the server. The server takes a look at the data and sends back a whole new web page, which is loaded into the browser. Reloading a page every time you want to do something is annoying, disjunctive and time-consuming for the user. XMLHttpRequest moves that browser-server interaction to behind the scenes, so the user can just keep on playing with the same page, even while elements on the page are talking to the server! Go take a look at Google Suggest if I’ve lost you — it’s a nice, eloquent example of this.

JavaScript has always been able to sneakily trigger a server-side script without anything happening in the browser by using a few classic tricks. This one, for example:onSubmit='runascript = new Image(); runascript.src="http://www.wired.com/images/archiveyscript.php?" + this.value'. That sort of chicanery is good, maybe, for caching form data to a file on the server, but it doesn’t return any information to the JavaScript that calls it, so its usefulness is limited. Ajax, on the other hand, can get a full parcel of data back from the script it calls. Hence the “XML” part of the name – which really is just there for looks, kind of like the “Java” part of JavaScript, because the returned data can be plain text or whatever you like, if XML is overkill or just not your cup of tea.

This opens up millions of exciting possibilities. Every form submission, every JavaScript event, and heaven knows what else, can now interact with server-side databases and processing power. Data retrieval, password authentication, image generation – you name it, Ajax can trigger it.

 

Making Your Own

The potential of Ajax-enhanced web apps is limited only by your imagination – and by browser support. Mozilla-based browsers can do it, and Safari, and newer versions of Explorer, and Opera 8 but not Opera 7. It’s best to incorporate a fallback way of doing things for users who aren’t as cutting edge as you’d like them to be. Also, Explorer does things somewhat differently (of course) from all the other browsers, so it’s necessary to fork the code to account for the irritating little 80-odd percent of the population who use IE.

Let’s build a simple application that accepts input from the user, passes it to some PHP on the server that checks it against a database, and returns the result to the browser. It comes in three parts. First, we need an HTML form. This you’ve seen before:

01 <html>
02
03  <head>
04
05  <title>Report</title>
06
07  <script type='text/javascript' src='xhr.js'></script> </head> <body> <form action="fallbackpage.php" method="post">
08
09
10
11  <p>Welcome, student. Please enter your essay here:<textarea name="essay"id="essay">
12
13  </textarea> <input type="submit" name="submit" value="Submit" onClick="return
14
15  grade(this.form.essay.value);">
16
17  </p>
18
19  </form>
20
21  </body>
22
23
24
25  </html>

Note that, for users without support for our script (named xhr.js), the form will just submit to the fallback page at fallbackpage.php.

Next comes the JavaScript. This is the exciting part, so we’ll take it slow.

1 function grade(essay) {

First, we initialize the object. We have to do it two ways, for different browsers.

01 // Mozilla version
02
03 if (window.XMLHttpRequest) {
04
05     xhr = new XMLHttpRequest();
06
07 }
08
09 // IE version
10
11 else if (window.ActiveXObject) {
12
13     xhr = new ActiveXObject("Microsoft.XMLHTTP");
14
15 }

Then, we escape the user input to make it URL-safe:

1 essay=encodeURIComponent(essay);

and use the open method of the object to open a connection to the PHP script:

1 xhr.open("POST","grade.php");

The method requires two arguments:first, the HTTP method (GET or POST); second, the URL of the script.

A quick HTTP header prepares the script for what it’s getting, and then the send method transmits the actual request:

1 xhr.setRequestHeader(
2
3      'Content-Type',
4
5      'application/x-www-form-urlencoded; charset=UTF-8'); xhr.send(essay);

This last step isn’t necessary for GET requests, wherein all the data can be contained in the query string of the URL.

 

Getting Results

Now we’re ready to see if the HTTP request worked. The readyState property counts up from zero during the request, and shows 4 when the server page has loaded successfully.

1 xhr.onreadystatechange=function() {
2
3      if (xhr.readyState==4) {

If the request worked, then we can get the output of the server-side script by querying the responseTextproperty, which contains a string. For more complex server script output, a responseXML property, which can hold a full document object of XML data, is also available.

1      grade = xhr.responseText;
2
3      alert ("Nice essay. Your grade is " + grade);
4
5    }
6
7    return false;
8
9 }

Want to see all that in a pastable block? Here it is in a separate file.

Finally, the third component is the PHP script, which lives on the server and waits patiently for the JavaScript to pass it some juicy data. This example uses PHP, but any language you like — Ruby, Perl, C, ASP — can do as well. The core of this example script is a natural-language function calledgrade_essay() that grades student essays from 1 to 100, but I will redact that part to conserve space.

01 <?php
02
03 function grade_essay($essay) {
04
05      return strlen($essay);
06
07 }
08
09 $essay = urldecode(implode(file('php://input')));
10
11 $grade = grade_essay($essay);
12
13 echo $grade;
14
15 ?>

The php://input grabs the POST data, which gets put into a string, decoded and passed to the ingenious grading algorithm. The algorithm returns a numeric grade. Lastly, we just output the grade with echo – ordinarily, this would display in the browser, but since the PHP script is running “behind the scenes,” the string output is simply returned to the JavaScript that called it. If you need structured data, an XML document would be output with an echo statement in just the same way, but the content-type of the output page must be set to text/xml.

What the user sees is this:She types her essay into the text area in the browser, clicks Submit, and within instants an alert box pops up giving her a final grade on the essay. Invisibly, the essay has been sent to the server, read and evaluated by a team of PHP gnomes, and returned with a grade, without ever reloading the page. The user can modify her essay and resubmit it endlessly.

And that’s the gist of the almost magical XMLHttpRequest object! The example is simple, but the uses of the object can be elaborately, multifariously clever. If you need further inspiration and edification, a burgeoning number of examples are dotted around the Web:

Internet Explorer 10 Doubles Its Desktop Market Share

Microsoft’s Internet Explorer 10 saw a meteoric rise in market share last month, jumping from 2.93 percent in March to 6.22 percent in April, according to NetMarketShare.

Some of IE 10′s growth might be attributable to more Windows 8 machines coming online, but it also comes close on the heels of the release of Internet Explorer 10 for Windows 7.

As we noted in our review, IE 10 is a huge step forward for Microsoft’s oft-maligned browser, bringing much better web standards support and considerable speed improvements over IE 9. And there’s plenty to like even on Windows 7 where Microsoft claims users should see a 20 percent increase in performance over IE 9, as well as better battery life on Windows 7 laptops.

While web developers should be happy to see IE 10 gaining some ground given its vastly superior web standards support and speed compared to previous releases, looking at the bigger browser share picture is still disheartening. While IE 10 use may have doubled last month, it still trails IE 6 use worldwide.

The most widely used version of IE on the web remains IE 8, which, while much better than IE 6, still has next to no support for modern web development tools like HTML5 and CSS 3.

As always, progressive enhancement and feature-detection tools like Modernizr are your friends when it comes to older versions of IE.