A Very Simple Node/Express JSON Form Example

Link: https://nodejs.org/

Server-side (file is named server)

This code is invoked with: node server

Once it is invokec, call the page with http://example.com:1337/form.html

Code

// Express is a framework used with node that provides many important constructs
var express = require('express');
 
// The application is an Express application
var app = express();
 
// bodyParser is used to convert the request data into JSON
var bodyParser = require('body-parser');
app.use(bodyParser.json());
 
// Express.static is used to serve the static files
app.use(express.static('static'));
 
// This receives a request posted to / and processes it
app.post('/', function (req, res) {
  var data = req.body;
  if (data['first-name'].trim().length > 5 && data['last-name'].trim().length > 5) {
    res.end(JSON.stringify({"status":"success"}));
  } else {
    res.end(JSON.stringify({"status":"error"}));
  }
});
 
// The application will listen on port 1337
app.listen(1337);

Client-side

The client side code is in the static directory. There is a simple form:

HTML

<form>
  <label for="first-name">First name<input type="text" id="first-name"></label>
  <label for="last-name">Last name<input type="text" id="last-name"></label>
  <button type="button" id="go">Go</button>
</form>
<div id="status">
</div>

And a little bit of JavaScript.

This code fires when a button with the id of "go" is clicked. It gets the values of the inputs, creates an object and sends it to the server.

Code

document.getElementById("go").onclick = function() {
  var i,v,inp = ["first-name","last-name"];
  var data = {};
  for (i in inp) {
    v = inp[i];
    data[v] = document.getElementById(v).value;
  }
 
  var xmlhttp;
  xmlhttp=new XMLHttpRequest();
  xmlhttp.addEventListener("load", done, false);
 
  function done()
  {
    response = JSON.parse(xmlhttp.response);
    document.getElementById("status").textContent = response["status"];
  }
 
  xmlhttp.open("POST","http://example.com:1337",true);
  xmlhttp.setRequestHeader("Content-type","application/json");
  xmlhttp.setRequestHeader("Accept","application/json");
  xmlhttp.send(JSON.stringify(data));
}

Notes for those who are patient or really desperate.

  • app.post doesn't make a post request, it accepts one with the URL in the first parameter. In this case, it will accept a post response for / on port 1337.
  • Express is a nice framework for node. Use it.
  • You need to use npm to install both Express and body-parser.
  • bodyParser parses the request body from JSON. It can handle other formats, too
  • Be sure to put the static files in the static directory, or update the express.static call accordingly.
  • Note that there is no charset on the content type header sent to node. Node is looking for "application/json"
  • The validation is really limited, the goal of this code is to show how to set up the form.
  • You may have to update your firewall settings to allow access to port 1337. If you are on an Amazon instance, use their web console.
  • When all else fails, read the documentation.

Bash Create User Script

This is a very simple script to create users and set them up in a userdir enabled Apache environ.

Shell

#!/bin/bash
if [ "$#" -ne 1 ]; then
    echo "Usage: ./mkacct.sh <username>"
    exit;
else
    sudo useradd --'/bin/bash' $1
    sudo chmod 711 "/home/$1"
    sudo mkdir "/home/$1/public_html"
    sudo chmod 755 "/home/$1/public_html"
    sudo chown "$1.$1" /home/$1/public_html
    sudo passwd $1
fi;

Screen Resolution - Web development

Link: http://gs.statcounter.com/

I have used the statcounter for several years to help me adjust page layouts for web development.

The mistake I have been making is that the browser does not usually have the entire screen resolution available.

Today I took some time checked the window dimensions on a Windows 7 laptop with a 1366x768 screen and several browsers.

Firefox

  • Full screen with menu and bookmark bar 1366x608
  • Windowed, full height x600

Internet Explorer

  • Full screen with menu, bookmark, DebugBar 1301x548
  • Windowed, full height x540

Chrome

  • Full screen 1366x667
  • Windowed, full height x639

These dimensions depend on the toolbars in use, etc, but they provided a very helpful reminder that 1366x768 screen resolution is not the same as a 1366x768 browser page.

In addition, the best way to test a page under Internet Explorer is to use Internet Explorer, and if you you need to test different versions (you do!), you can use IE or IETester (http://www.my-debugbar.com/wiki/IETester/HomePage). Sometimes there is simply no substitute for target machine and browser testing.

eZ Publish - Adding Bootstrap Glyphicons

If you are using Bootstrap with eZ Publish, you can add a custom tag to include glyphicons which will allow editors to add the icons into their content.

This is a simple implementation, it allows the user to enter the name of the icon they would like to use.

content.ini.append.php

Code

<?php /* ini charset="utf-8"
 
[CustomTagSettings]
AvailableCustomTags[]=glyphicon
IsInline[glyphicon]=true
 
[glyphicon]
CustomAttributes[]
CustomAttributes[]=name
 
*/ ?>

The template HTML must match the Bootstrap version in use.

design/site/templates/content/datatype/view/ezxmltags/glyphicon.tpl

<!-- Choose the HTML for the tag based on the version of Bootstrap you are using -->
<span class="glyphicon glyphicon-{$name}"></span>

<!-- or -->

<i class="icon-{$name}"></i>

eZ Publish - Object Relation Attributes - Reckless Cleanup

Link: https://jira.ez.no/browse/EZP-19183

This is NOT A FIX for the code, but if you are getting confusing results for queries due to relationships between object relation attributes which were deleted from content classes, you may use this query:

Backup your database first

This is not for the faint of heart

There are no warranties or other guarantees - use this at your own risk.

DELETE FROM ezcontentobject_link WHERE contentclassattribute_id != 0 AND NOT EXISTS (SELECT * FROM ezcontentclass_attribute WHERE ezcontentclass_attribute.id = ezcontentobject_link.contentclassattribute_id);

:: Next >>