BLOG

Node, Restify, Mongoose REST API Boilerplate

I was playing around at the weekend learning about different ways of creating REST APIs with NODE. I came across a tutorial and ended up with working with Restify http://restify.com/ which is an awesome tool for creating REST APIs. The database is handled by Mongoose and it was all so easy to use, understand and implement I thought that I would create a Git repo for it and use it as a boilerplate for any future projects.

Feel free to use and you please!

https://github.com/GlenHughes/node-restify-mongoose

Looping Arrays ES6 Style

Looping through an array in JavaScript natively has been traditionally completed with the following code:

But now ES6 offers an easy to understand native solution with the following code:

As you can see, this is a lot simpler and easy to understand.

Looping arrays in JavaScript elegantly

I’ve been playing around with some JavaScript code and come across an article which showed a really nice way of looping array items in JavaScript. Rather than having to write something like this:

A more elegant way would be like this by using the — operator like this:

One main drawback I can see is that we will be accessing the array items from back to front. We can counter that by using reverse() as shown:

Again that would require another bit of code which wouldn’t be needed doing it the “normal” way. This is just a bit of fun and playing around learning. Any comments or thoughts are more than welcome!

SuperJack!

I’ve created a simple little game in JavaScript called SuperJack. Incase you don’t know, my son is called Jack and he is at the time of writing this 10 months old. The game is very basic and I am looking to add some cool features as and when I can. Please feel free to make any changes and a pull request if you have any awesome ideas!

Play the game: http://glenhughes.me/superjack/
Git: https://github.com/GlenHughes/superjack

Current ideas and todos:

  • Add x axis movements
  • Store score via API
  • Leaderboard
  • Ability to shoot
  • Implement various item speeds
  • Improve collision detection
  • Limit movement to inside window

Part 2: Creating your page structure.

Moving on from the previous tutorial Part 1: Creating your first hand coded web page! we are now going to work on actually putting some structure to your page. We are going to be using HTML5 which is the latest version of HTML to come out and comes with lot’s of new tags and features.

What is HTML5? (from Wiki)

HTML5 is a markup language used for structuring and presenting content for the World Wide Web and a core technology of the Internet. It is the fifth revision of the HTML standard (created in 1990 and standardized as HTML 4 as of 1997)[2] and, as of December 2012, is a candidate recommendationof the World Wide Web Consortium (W3C).[3] Its core aims have been to improve the language with support for the latest multimedia while keeping it easily readable by humans and consistently understood by computers and devices (web browsersparsers, etc.). HTML5 is intended to subsume not only HTML 4, but also XHTML 1 and DOM Level 2 HTML.

To put that into plain English: HTML5 is the structure of our page. It allows use to give meaningful areas outlined in the code to different sections of the website. For example: we set one area as the nav and this is where we place our links to other pages.

Working from the code in our previous tutorial we are going to add a navigation, 2 columns for the content and a footer. In-case you haven’t read the previous tutorial I suggest you give it a read. Below is where we got to and includes new code for this tutorial.

New Code:

There’s lot’s of new code but don’t worry I will explain what everything does and why I have added it. We are of course writing HTML5 which is the latest version of HTML (still in development) but it is supported in all major browsers except for older versions of Internet Explorer (version 9 and lower). The first part that I added was a container. As the name suggests it contains all of our pages elements, navigations, text, images etc. The next part was the nav (short for navigation) which will be how users of the page go from one page to another. Inside the nav I created a ul (unordered list) and added 3 li (list item) tags and inside those I created anchor tags a (links).

I then created an article which will contain all the web pages content. That’s where we would place the content of the page. If we was building a recipe page then that’s where we would place the recipe and any related images.

The aside tag is the side bar where for example you could have related pages linked and maybe a input field for a user to sign up to your newsletter (we will be in the future building a program to handle that). I created again an unordered list with some list items and some links.

The last section is the footer which we wrapped with the footer tag (who would of thought hey). Inside the footer I created a paragraph and placed some pretty standard text.

That wraps up this lesson. Next time we are going to add some CSS3 and style and position the elements we’ve just added to give our website a nice clean look. I strongly suggest you type out this code by hand rather the copy and pasting for it to sink in properly.

 

Part 1: Creating your first hand coded web page!

To start off my weekly web development blog I’m going to create a series of tutorials starting off with HTML5. We will go straight from the beginning of creating a website and lead up to more advanced features as the tutorial progresses. This is the first time that I have created something like this before so any feedback and where I can improve would be greatly appreciated!

First of all you are going to have to download a text editor so we can start writing some code. I’m going to recommend Notepad++ it’s FREE and is in my opinion the best one out there for getting started. Once you have got that downloaded and installed open up Notepad++ and create a new file.

From the code above we firstly have to declare our document type and we do that by setting the HTML5 doc type. This tells the browser that we are using HTML5.

The next part of the code is the head and body. The head is for things like the page title, description, CSS, JavaScript and many other things which we will go more into the latter in future tutorials. The body section is for the website’s actual content (what you see when you load the page). We then wrapped both of them tags inside a <html> tag again to tell the browser that we are using HTML.

Now we will add some properties to the head section of our page. We are going to add a title, meta tags (information to tell search engines about our page).

The <title> tag is (you guessed it) the page title. That’s the text you see in a tab or the main heading on a Google search (in blue). This is a really important part of any web page and can have quite an affect on your websites SEO (Search Engine Optimisation). The next tag is meta and then we set the name to description for one and keywords for the other. Hopefully that’s pretty self-explanatory. You set the values for those tags with the content value.

We will now move onto actually adding some content to our body (what the end user see’s when they load the page).

I’ve added some new HTML markup into the body section. The first tag is the <h1> (Heading 1) which is the most prominent tag on your page. If your website was for example about books by a certain author then setting the value to that would be a good idea. The second tag is a paragraph and this is where you would of course place all of the paragraphs. The third new tag the <a> (Anchor) tag. This is how you create links within a web page. The href value is where you set where the user goes when they click on that link. The text between the <a>This text</a> is what the user sees. The last tag is the <img> (Image) tag. This is how you place an image within your website. The src attributeis the path to the image and the alt attribute sets the text when a user hovers their mouse over the image.

To test out your code just type (copy and paste if your lazy) into Notepad++ and save the file as firstpage.html and then open the file with your chosen web browser (Chrome, FireFox etc).

That’s all for today but I will in the next blog post start going into how to make this look much better by using CSS (Cascading Style Sheets).