Sunday, 27 September 2015

Win one of five free NorDevCon tickets and help shape Norfolk Developers in 2016

In 2016 we want to make Norfolk Developers more focussed around the needs of the community. Up to now both the regular evening events and the workshops have been based around what we thought would be interesting to you. Next year we’d like to know which topics you would like to hear about in the evenings and what you would like to learn in the workshops.

We hope that you find Norfolk Developers workshops excellent value for money and teach valuable skills. We want to increase their value to the community by providing workshops that cover the skills needed by you and/or your business. Please help us by letting us know what skills you and/or your business will need in the next twelve months. If there is someone within your organisation who is better placed to answer this question, please send this survey to them as well.

If you complete this survey you’ll put into a draw for one of five free NorDevCon tickets.

  1. What topics and speakers would you like to see at the regular Norfolk Developers evening meetups in 2016?
  2. What topics and skills would you like to see covered by a Norfolk Developers half or full day workshop in 2016?
  3. What other services could Norfolk Developers provide that would help you or your business?

Complete the survey here

Thursday, 24 September 2015

NorDevCon 2016 to Support The Curly Hair Project

Autism spectrum disorders (ASD), which include Asperger’s Syndrome, have been at the centre of documentaries, an oscar winning movie starring Dustin Hoffman and a best selling novel that even went on to take Broadway and the West End by storm. But most research so far has focused on the male presentation, with the challenges facing females who are affected just starting to be explored. The curly hair project (CHP) is a social enterprise with worldwide appeal, dedicated to supporting females with Asperger’s Syndrome (AS) and other autism spectrum disorders (ASD).

NorDevCon 2016 will support The Curly Hair Project as its chosen good cause to help spread the word about this important project. Sam Ramsay, Associate Trainer at CHP reveals her hopes for what the exposure at the conference may mean for the project, “Firstly we’re delighted to have been invited to be a part of NorDevCon. We hope that we are able to use this forum to raise awareness in the technology industry of the challenges that those on the autistic spectrum face on a daily basis, from an industry that is very important to those on the spectrum. The online community provides great support for those with Autistic Spectrum Disorder, and it is suspected that there are many undiagnosed with ASD in technology and IT industries. The Curly Hair Project aims to educate those both on the spectrum and their neurotypical loved ones of the benefits that can be gained through understanding and improved communication.”

NorDevCon presents a unique opportunity for many businesses across a wide variety of sectors. We asked Sam why she thinks NorDevCon offers such a valuable opportunity for CHP; “This is a unique opportunity to reach a community who may not all have seen the amazing work that the Curly Hair Project does, for those on the Autistic Spectrum and their neurotypical loved ones.

Many people with ASD are great with technology and we would like to improve awareness of what someone with ASD can offer an organisation. We hope to educate employers when considering  ASD applicants – you will gain a highly focused, reliable and dedicated employee with a real gift for attention to detail. The ASD employee is also likely to have very logical thought processing skills – a real asset for the technology and IT industry. So don’t dismiss them because they have ASD, shortlist them!”

The NHS define ASD as “a condition that affects social interaction, communication, interests and behaviour. It includes Asperger’s Syndrome and childhood autism.” Living with the condition, or living with someone with the condition can be challenging but also very rewarding. The Curly Hair Project (CHP) reaches people through a whole range of media from books to workshops and social media to blogs. Even if you’re not directly affected by ASD at home, Sam believes that “it is still really helpful to learn more about the condition in order to be more understanding of others at work and in social settings.”

Paul Grenyer, NorDevCon organiser and director at Naked Element, explains “My eldest son was diagnosed with Asperger’s Syndrome just over a year ago, so I wanted to find out more about about what it is and what it means for him. My wife did some research, came across The Girl with the Curly Hair book and suggested I read it. I found that it was a really useful tool in understanding the disorder and some really important things, like why he reacts the way he does to certain things. In fact I found the book so insightful and useful in my own search for information about Asperger’s Syndrome, that the Curly Hair Project was the natural choice as the good cause to support at NorDevCon 2016.”

From speaking with Sam it’s clear that her passion for CHP transcends into its efforts to raise awareness of ASD as well as the important work the project do for the female ASD community. Sam reaffirms “The Curly Hair Project is thrilled to be the good cause of choice this year as we are keen to reach a new section of the community who may not have seen our work before. We are grateful for the opportunity to work alongside NorDevCon and by doing so, will hopefully add a new dimension to the world of technology in East Anglia and beyond. Thank you for inviting us, we look forward to meeting you all!”

NorDevCon 2016 will take place from the 25th - 27th February 2016 at The King’s Centre in Norwich. To buy tickets or find out about sponsorship opportunities go to www.nordevcon.com

Tuesday, 22 September 2015

Learning Node.js with Richard Astbury Part 2a: Going solo with Bootstrap

In Part 2 Richard Astbury showed me how to add Hogan to the web app and use a template for all the views in the app. Between us we also added Bootstrap to the app. One of the advantages of a template is that you can have a common navigation bar on every view in your app and one of the advantages of Bootstrap is that it has a ready made ‘navbar’. To add the navbar to the app, I copied and pasted the sample from the Bootstrap website and refreshed the browser:
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title> {{title}}  </title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"></style>
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>    
  </head>
  <body>
  <div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="/">Naked Logs</a>
        </div>
        <div class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
          </ul>
        </div>
    </div>
  </div>
    {{{yield}}}
  </body>
</html>
This mostly worked. I had the navbar with one item ‘Naked Logs’ which takes users to the root of the application, but the time stamp was now obscured by the navbar. I investigated a simple example from Bootstrap website and discovered that I needed a little bit of custom CSS to move the body down in the template. I remembered what Richard had taught me about the public area of the project for static files and created a css folder there and a CSS file for the application:

mkdir public/css
touch public/css/nakedlogs.css

I put the CSS that would move the body down into the CSS file:

body {
  padding-top: 50px;
}

and added the CSS file to the template:
<head>
  <meta charset="utf-8">
  <title> {{title}}  </title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"></style>
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
  <link rel="stylesheet" href="/css/nakedlogs.css">
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>    
</head>
Refreshed the browser and hey presto, the timestamp was back in the client area!

Then it was time to check in and wait for the next instalment from Richard.

Monday, 21 September 2015

Learning Node.js with Richard Astbury Part 2: Serving Angle Brackets

In part 1, ‘Learning node.js with Richard Astbury’ I followed Richard's instructions to create my own node.js web application using Express. Next Richard wrote a blog post with instructions on how to serve static pages and create a template to be used for all pages in the web application.

First Richard describes how to configure Express to serve static web pages from a public directory in the root of the application:

// load the path package
var path = require('path');

// load the express package
var express = require('express');

// create an express application 
var app = express();

// register middleware to serve static pages
app.use(express.static(path.join(__dirname, 'public')));

// handle GET requests at /
app.get('/', function(req, res){

  // respond with plain text
  res.send('hello world');
});

// start listening on Heroku port or port 8080
app.listen(process.env.PORT || 8080);

and then how to create the directory itself:

mkdir public

Richard suggested putting a favicon in the public directory as a test. So I grabbed and renamed the icon from the Naked Element website:

cd public
wget http://nakedelement.co.uk/wp-content/uploads/2015/04/nefavicon1.jpg
mv nefavicon1.jpg  favicon.ico

And then switched back to the root directory to test it.

cd ..
node server.js

I was hoping to see the favicon in the browser tab, but it wasn’t there, so I tried accessing it directly:

http://localhost:8080/favicon.ico

and it was displayed in the client area of the browser. Keen to see it online, I committed to git and then pushed to Heroku:

git add .
git commit -m"Added middleware to server static content."
git push heroku master

Now when I went to the app on Heroku:

https://nakedlogs.herokuapp.com/

it gave me the icon in the browser tab! Result!

Next Richard explains how to install Hogan for server side templating.

npm install hogan-express --save

I remember from Richard’s previous blog post that using --save should add the dependency to package.json. Let’s see:

git status

  modified:  package.json

Well, git certainly thinks it’s been modified. Let’s have a look at the file itself:

{
  "name": "nakedlogs",
  "version": "0.0.0",
  "description": "A remote logging web application",
  "main": "server.js",
  "dependencies": {
    "express": "~4.13.3",
    "hogan-express": "~0.5.2"
  },
  "devDependencies": {},
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node server.js"
  },
  "author": "Naked Element Ltd.",
  "license": "BSD-2-Clause"
}

Yep, there it is. Next I followed Richard's instructions and registered Hogan with the application so it would serve views:

// create an express application 
var app = express();

// Register middleware to serve views
app.engine('html', require('hogan-express'));
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'html');
app.set('layout', 'layout');

// register middleware to serve static pages
app.use(express.static(path.join(__dirname, 'public')));

Richard’s explanation about how it all worked was very clear. Next I created the views folder which would hold the views:

mkdir views

and the file which would serve as the template for all the views in the app:

touch views/layout.html

and then I pasted in Richard’s template:



 
   
    {{title}}  
   
   
 
 
    {{{yield}}}
 


This was just what I’d been looking for. The {{title}} and {{{yield}}} notation showed me exactly where a title for each page would be inserted and then where the content of each page would be rendered. Next I added a simple view that would display the current time:

touch views/time.html


  The time is : {{time}}


and adjusted the get method in server.js to set the title for the view and get the current time to be inserted into the view:

// load the path package
var path = require('path');

// load the express package
var express = require('express');

// create an express application 
var app = express();

// Register middleware to serve views
app.engine('html', require('hogan-express'));
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'html');
app.set('layout', 'layout');

// register middleware to serve static pages
app.use(express.static(path.join(__dirname, 'public')));

// handle GET requests at /
app.get('/', function(req, res){
  res.locals.time = new Date();
  res.locals.title = 'the current time';
  res.render('time');
});

// start listening on Heroku port or port 8080
app.listen(process.env.PORT || 8080);

Then I fired up the app:

node server.js

and went to a web browser to see the current time. Bang! There it was.

This is where Richard’s instructions finished, but I know I’m going to want to use lots of features of Bootstrap and JQuery so, I also went on the add the necessary style sheets and JavaScript:



 
   
    {{title}}  
   
   
   
   
   
    
 
 
    {{{yield}}}
 


I also modified time.html to emphasise the bootstrap styling:


 

The time is : {{time}}


When I have time, I’ll be adding a Bootstrap menu bar across the top and possibly a sidebar. This was one of the requirements I had for my app, so I’m really pleased that Richard has shown me how use a single template for all my pages as it will allow me to have the same menu and sidebar on every page.

I’m already looking forward to databases ‘the node way!’

Sunday, 20 September 2015

Learning Node.js with Richard Astbury

I recently found myself a little side project which I decided I wanted to implement using Node.js. Although I did the Norfolk Developer’s Node.js workshop, it was quite a while ago and I don’t really remember much of it, so I asked Richard Astbury if he’d help me. Richard agreed and is writing a series of blog posts to help me learn. The first one explains how to create a Node.js project which uses the Express web framework. Below is my account of how I got on.

Richard’s instructions start from the point at which Node.js is installed. He then took me through creating a new directory for the application and installing Express:

mkdir nakedlogs
cd nakedlogs
npm install express

npm http GET https://registry.npmjs.org/express
...
express@4.13.3 node_modules/express
├── escape-html@1.0.2
├── merge-descriptors@1.0.0
├── array-flatten@1.1.1
├── cookie@0.1.3
├── utils-merge@1.0.0
├── cookie-signature@1.0.6
├── methods@1.1.1
├── path-to-regexp@0.1.7
├── range-parser@1.0.2
├── vary@1.0.1
├── fresh@0.3.0
├── etag@1.7.0
├── content-type@1.0.1
├── parseurl@1.3.0
├── content-disposition@0.5.0
├── serve-static@1.10.0
├── depd@1.0.1
├── qs@4.0.0
├── finalhandler@0.4.0 (unpipe@1.0.0)
├── proxy-addr@1.0.8 (forwarded@0.1.0, ipaddr.js@1.0.1)
├── on-finished@2.3.0 (ee-first@1.1.1)
├── debug@2.2.0 (ms@0.7.1)
├── type-is@1.6.8 (media-typer@0.3.0, mime-types@2.1.6)
├── accepts@1.2.13 (negotiator@0.5.3, mime-types@2.1.6)
└── send@0.13.0 (destroy@1.0.3, ms@0.7.1, statuses@1.2.1, mime@1.3.4, http-errors@1.3.1)

After installing Express I could see all the code in the new express directory in the node_modules directory, just as Richard said I would.

Next I needed to implement the obligatory ‘Hello World’, so I followed Richard’s instructions and created a server.js file in the root directory of the project:

// load the express package
var express = require('express');

// create an express application 
var app = express();

// handle GET requests at /
app.get('/', function(req, res){

  // respond with plain text
  res.send('hello world');
});

// start listening on port 8080
app.listen(8080);

It was really easy to get the application to run. All I had to do was enter:

node server.js

at the command line and then use a browser to go to

http://localhost:8080

to see the ‘Hello World’ message.

Richard suggested using npm init to create a package.js file. It was really easy to do:

npm init

This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sane defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install --save` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
name: (nakedlogs) 
version: (0.0.0) 
git repository: 
keywords: 
license: (BSD-2-Clause) 
About to write to /home/paul/dev/nakedlog/astbury/nakedlogs/package.json:

{
  "name": "nakedlogs",
  "version": "0.0.0",
  "description": "A remote logging web application",
  "main": "server.js",
  "dependencies": {
    "express": "~4.13.3"
  },
  "devDependencies": {},
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node server.js"
  },
  "author": "Naked Element Ltd.",
  "license": "BSD-2-Clause"
}

Is this ok? (yes) yes

Richard’s instructions finish at this point. However I like to see web applications running on the web and Heroku makes it really easy to do that (I know Richard is an Azure fan, but I haven't used that before).

Heroku uses a git repository that you deploy your code to, so the first thing I needed to do was get my project into a git repository, which means I needed a .gitignore file suitable for Node.js. A quick Google revealed that the following would do the trick:

# Logs
logs
*.log
npm-debug.log*

# Runtime data
pids
*.pid
*.seed

# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov

# Coverage directory used by tools like istanbul
coverage

# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
.grunt

# node-waf configuration
.lock-wscript

# Compiled binary addons (http://nodejs.org/api/addons.html)
build/Release

# Dependency directory
# https://docs.npmjs.com/misc/faq#should-i-check-my-node-modules-folder-into-git
node_modules

Then it’s just a case of initialising git:

git init

and checking all the files in:

git add .
git commit -m”Initial commit.”

Heroku has what it calls a ‘Toolbelt’ which is a command line tool for creating and manipulating Heroku apps. Creating an app is very simple:

heroku create nakedlogs
Creating nakedlogs... done, stack is cedar-14
https://nakedlogs.herokuapp.com/ | https://git.heroku.com/nakedlogs.git
Git remote heroku added

Heroku needs to know how to start the new app and for that we need to supply a Procfile which is executed when the app is started:

web: node server.js

This is telling Heroku that it needs to start a web process and execute the server.js file using Node.js. The Procfile needs to be added to the repository and checked in too. Heroku likes to specify the port an app runs on, so the server.js file needs to be modified to read the port from the Heroku environment:

// start listening on Heroku port or port 8080
app.listen(process.env.PORT || 8080);

Once modified, the server.js file needs to be checked in. Then the repository needs to be pushed to Heroku:

git push heroku master
Counting objects: 8, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (7/7), done.
Writing objects: 100% (8/8), 1.25 KiB | 0 bytes/s, done.
Total 8 (delta 1), reused 0 (delta 0)
remote: Compressing source files... done.
remote: Building source:
remote: 
remote: -----> Node.js app detected
remote: 
remote: -----> Creating runtime environment
remote:        
remote:        NPM_CONFIG_LOGLEVEL=error
remote:        NPM_CONFIG_PRODUCTION=true
remote:        NODE_ENV=production
remote:        NODE_MODULES_CACHE=true
remote: 
remote: -----> Installing binaries
remote:        engines.node (package.json):  unspecified
remote:        engines.npm (package.json):   unspecified (use default)
remote:        
remote:        Resolving node version (latest stable) via semver.io...
remote:        Downloading and installing node 0.12.7...
remote:        Using default npm version: 2.11.3
remote: 
remote: -----> Restoring cache
remote:        Loading 1 from cacheDirectories (default):
remote:        - node_modules
remote: 
remote: -----> Building dependencies
remote:        Pruning any extraneous modules
remote:        Installing node modules (package.json)
remote: 
remote: -----> Caching build
remote:        Clearing previous node cache
remote:        Saving 1 cacheDirectories (default):
remote:        - node_modules
remote: 
remote: -----> Build succeeded!
remote:        └── express@4.13.3
remote:        
remote: -----> Discovering process types
remote:        Procfile declares types -> web
remote: 
remote: -----> Compressing... done, 9.9MB
remote: -----> Launching... done, v4
remote:        https://nakedlogs.herokuapp.com/ deployed to Heroku
remote: 
remote: Verifying deploy.... done.
To https://git.heroku.com/nakedlogs.git
 * [new branch]      master -> master

The app can then be accessed on Heroku via a web browser:

https://nakedlogs.herokuapp.com/

I’m reasonably pleased with myself. I was able to follow Richard’s instructions and build a simple web application with Node.js and Express and get it running on Heroku. I wonder what Richard will have for me to do next? In my application I would like to:

  • Use bootstrap and a templating library
  • Authenticate and administer users
  • Make RESTful web service calls



Thursday, 3 September 2015

NorDev Event: Agile on the Bench (September)

When: Wednesday, September 30, 2015, 12:30pm to 1:30pm

Where: Band Stand - Chapelfield Gardens, Norwich

Sign-up: http://www.meetup.com/Norfolk-Developers-NorDev/events/225066351/

Agile on the bench is a lunchtime "stand-up" session with ad-hoc content provided by attendees.

Each talk is 5 minutes. Please let us know if you would like to come and give a talk: nordev@nakedelement.co.uk.

Speakers so far include:

  • Tom Price (Proxama) 
  • Lisa Donovan (Aviva) 
  • Rupert Redington (Neontribe)
  • Matt Osborne (Liftshare) 
  • Williams Gareth (Validus)

You can read about the first Agile on the Bench in Norwich here.