Archive | Html RSS for this section

Static Website With node.JS


I am really addicted to nodejs stuffs and modules, not just because of javascript; but also because of a few videos and blogs that I read, made me spend time with learning nodejs. I am at the beginning stage of learning and exploring nodejs. Hence, I am putting everything I have experienced here.

My previous article “Introduction to Nodejs” helps you install and start programming on node platform. This time, I am going to help you create a simple static website on top of nodejs and how to use node modules. This static site can be done with simple HTML and CSS. However, in my opinion, learning in practical manner will add more value in lesser time than reading lots of theories. The following article helps in your Node learning curve rather than a real world problem solver.

Let me take a simple use-case before getting started. I want a simple Shopping cart app built on top of nodejs I will be using this use-case throughout my series of articles.

Why Nodejs?

  • I want my application to serve concurrent requests at same time
  • I want my application to run on distribute environment
  • Javascript is my favourite language and Nodejs is much similar to Javascript

Lets first install Pre-Requisites!

Node Package Manager(npm) is a package manager for node. You can use it to install and publish your node programs. It manages dependencies automatically and can be lot more useful. To install npm, use the following command:

curl http://npmjs.org/install.sh | sh

To verify the installation, type the following command:

npm –v

This will print the version of npm installed. As of now, npm is supported only in Linux. We can make use of the npm to install node modules that we need. There are a bunch of node modules we will be using for our site

  • Express, a web framework
  • EJS, a template module
  • LessJS, a styling module

Lets me explain those modules in detail in my upcoming articles. Now, we can just install them by using the Node Package Manager(npm).

npm install express
npm install ejs
npm install less

Getting started

We need a simple page which should display “Coming Soon!” message. The URL for the site will be http://localhost:3000

First we need to run a webserver that will be reached at http://localhost:3000

I just created a folder named “Node_Shop” to place all my code for this project. Create a file server.js, where we can start a server with express and made it to listen on port 3000.

var express = require(‘express’); //This will include expressjs module that we have installed.
var server = express.createServer(); //creating express server
server.get(‘/’,function(req,res){
res.set(“hello world”);
});
server.listen(3000); //will make server listen at port 3000
console.log(“Running at http://localhost:3000”);

The server.js can be executed as:

node server.js

When we hit the url http://localhost:3000 in browser, we will end up with a hello world display!

Now, create a folder “views” under Node_Shop, where all our layout files get stored. After creating the folder, edit server.js and set the path for our template and specify the template engine(in this case, it’s ejs).

server.configure(function(){
server.set(‘views’, __dirname + ‘/views’); //specifying template path
server.set(‘view engine’, ‘ejs’); //specifying template engine
server.use(express.bodyParser());
server.use(express.methodOverride());
});

Lets add our view files layout.ejs,and index.ejs. The ejs extention is nothing but a template page. There are many template modules in nodejs, like Jade, haml, etc., that can be used with express. The layout.ejs contain common layout that all pages have. A simple layout.ejs for our site is given below:

<!DOCTYPE>
<html>
< head>
<title>Node Shop</title>
</head>
<body>
<%- body %>
</body>
</html>

In this, is where the content from other view pages will fit. To create a “coming soon” page as the default index page, edit the index.ejs and add the content given below:

<h1>Coming soon</h1>

Lets reset our get response to render the index.ejs by using the render function.

server.get(‘/’,function(req,res){
res.render(‘index’);
});

The template engine(ejs) will smartly render the index.ejs by combining both the index.ejs and layout.ejs as a single template. After running the server, in the browser, do a right click and view the source. We can see the combined template page.

<!DOCTYPE>
<html>
<head>
<title>Node Shop</title>
</head>
<body>
<h1>Coming soon</h1>
</body>
</html>

In this article, I am not going to compile lessjs via express server. I am going to do it via normal include of file less.js on head.

Create another folder “static” under Node_Shop where we can store all the static files such as style sheets, images and javascript files. Place a “main.less” file with your desired style within the folder. Finally, we shall style the page with lessjs by including *.less files within the head tag.

server.use({ src: __dirname + ‘/static’ });
server.use(app.router);
server.use(express.static(__dirname + ‘/static’));

and the fully rendered HTML page

<!DOCTYPE>
<html>
<head>
<title>Node Shop</title>
<link rel=”stylesheet/less” href=”/static/main.less”>
<script src=”/js/less-1.1.3.min.js”></script>
</head>
<body>
<h1>Comming soon</h1>
</body>
</html>

Lessjs is something to add greatness to the styling. We can either include the *.less files within the head tag or we can compile the files via express server itself. I will explain lessjs briefly in the later part of this series.

The complete code can be found on my git-hub repository https://github.com/anandrc/Node-Shop

Thanks and I hope this article might help some one new to nodejs

Flexible Font Sizes with FitText


Imagine, how your design layout would appear to users on a nifty handheld device and to the person viewing it on a hi-res wide screen. With so many browsing options (iPad, Tablets, Mobile Phones, Wide Screen Monitors etc.), you can limit your design to pre-defined scales. It has to be fluid and scalable – not just the layout but the entire text in your website/web application so users can read contents easily. Challenging? Not actually, at least not with FitText.

FitText is a jQuery plugin to make font-sizes flexible. Use this plugin on your fluid or responsive layout to achieve scalable headlines that fill the width of a parent element. FitText is a perfect choice while developing cross-platform websites (scalable for all those nifty devices and displays).

 

Website: http://fittextjs.com/
Download: https://github.com/davatron5000/FitText.js
License: Free to use