Back at it – Can you say Full Stack Web Development?

Admist a flurry of finishing up final year of my computing degree and that oft unforeseen but ever present pummelling that life likes to give when you least expect it, I am completely drained – mentally, physically, intellectually and emotionally – in all sorts and manners. Add to which I LOVE to put my fingers in more pies than I have fingers and over extend myself. A figurative fly that built its own reticular web onto which it has entangled itself – ahhh so relaxing. So there you have a quick glimpse of my overall state.

One of the main things I’m focusing on at the moment:
Full-Stack Web Development Mini-Degree from Zenva

I’m going through the paces of HTML/CSS/Bootstrap what have you. It does give a fair bit of exposure around the basics, and builds something practical which you can use to salvage parts from later. The responsive web design part left a bit wanting, but, at this stage i’m going to reserve judgement till I’ve completed more parts of the course.

These are the courses as part of the program

  • Learn HTML and CSS by creating a responsive company website
  • The Complete Responsive Web Design Course
  • Intro to Bootstrap
  • The Complete Guide to Bootstrap 4
  • JavaScript Programming – Learn by Making a Mobile Game
  • Create Interactive Pages with JavaScript and the DOM API
  • Build JavaScript Applications with Vue.js
  • Discover jQuery – Create Interactive Websites
  • Reponsive Admin Pages with Semantic UI
  • Node.js for Beginners – Create Server-Side Apps with JavaScript
  • Modern JavaScript – From ES6 to ES9
  • Express for Beginners
  • MongoDB for Beginners
  • Server-Side Rendered Webapps with Node.js, Express and MongoDB
  • Create REST APIs with Express and MongoDB
  • Build Web Applications with React
  • Intro to Next.js
  • Project-Based Next.js – Games Website
  • Intermediate React and Redux
  • Introduction to GraphQL
  • TypeScript for Beginners
  • Learn Angular by Creating a Web Application
  • Git and Github – Version Control and Collaboration
  • AWS Deployment for Node.js Applications
  • Azure Deployment for Node.js Applications

Quite the set of tutorials. However I’m just aching to get back into JavaScript. So while I’m currently at the beginning levels and won’t be jumping in some juicy JS as soon as I’d like, I’ve decided to take up one of my old projects, Simple Luas App [Repo], and rebuild it using a framework. Thinking React because why not.

I know there’s some redesign, structural changes and additions I need to do to the site, but hey this sounds like more fun. So stay tuned for that and till then auf wiedersehen.



A brief intro to Node.js

This is a topic I’ve been meaning to approach for a while now. As it happens, one of my college courses – Web Applications – requires a project built using Node.js, so what better time to tackle this.

I had mentioned Node.js in a previous post, where I was talking about the various environments JavaScript can be run in. This post won’t go into the history or specifics of Node.js; the main exercise will examine the various items found in the sample code for creating a simple Node.js server – which will explore and detail node specific aspects as well as JavaScript patterns used. The code can be found on the About page on the Node.js site:

const http = require('http');

const hostname = '127.0.0.1';
const port = 3000;

const server = http.createServer((req, res) => {
  res.statusCode = 200;
  res.setHeader('Content-Type', 'text/plain');
  res.end('Hello World\n');
});

server.listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}/`);
});

Play by play

The very first line of code, allows us to import the module ‘http’.

const http = require('http');

This is the implementation method that is specified in CommonJS, which is an ecosystem for JavaScript outside the browser. This is a synchronous system which allows importing of modules or files; since everything will be on the server side. This allows us to import the module http.

The next two lines set the IP address of the localhost (the machine you are currently on) and the port to listen to for incoming requests.

const hostname = '127.0.0.1';
const port = 3000;

Immediately following that, the createServer() method is called on the http instance we created on the first line. Which is then assigned to a constant called server.

const server = http.createServer((req, res) => {
  res.statusCode = 200;
  res.setHeader('Content-Type', 'text/plain');
  res.end('Hello World\n');
});

This is passed a call back function with two parameters and uses an arrow function (read more about it here [1] [2]). This createServer() method will be invoked by an incoming event, in this case web requests. The req parameter will contain all the incoming request’s details. The res parameter will handle the response which will be sent out. In this case it’s setting its statusCode to 200, which signifies that the request was handled successfully. After which the response’s header information is set to indicate it’s content which in this case is plain text. And finally some plain text output is shown while closing the response – this will be displayed in the browser.

The final section of the code, referencing the server which points to the http.createServer() call, is set to listen on the port and host IP address set above.

server.listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}/`);
});

The arrow function will display the message indicated while the server is running in the node.js environment giving us a visual that things are working.

There you go, this was just a quick run down to help try and elucidate, both for me and anyone reading this, what is happening within this simple node.js server code. Stay tuned for more practical topics on the matter.