May 12, 2013
Bootstrap Carousel

#1 on Bootstrap Top 10 Questions

The Bootstrap “slider” solution is the ‘Carousel’. If you check out the ‘twitter-bootstrap’ tag on Stackoverflow on any given day you’ll find an abundance of questions on the Carousel.

Carousel Basics

The most common problem I found with the Bootstrap Carousel is that people couldn’t actually get it to work (trivial, right?). Once it is working developers want the carousel not to delay or to be full-screen.

"My Bootstrap Carousel Won’t Start"

"My Carousel Delays Before It Starts"

"How do I Make the Carousel Full Screen?"

April 28, 2013
Bootstrap Playground

The popularity of Twitter Bootstrap has helped it to become #1 on GitHub, and developers are taking notice. The Bootstrap framework is giving developers an edge on responsive, consistent, customizable design. The latest innovation to hit the Bootstrap design and development community is Bootply.

Bootply is a HTML, JavaScript and CSS editor app built just for Bootstrap. Bootply enables developers to easily apply the Bootstrap Framework to their projects using a JSFiddle style interface. The browser-based Bootply editor lets developers select and paste Bootstrap friendly code snippets. Bootply can be used to test, manage and share any Bootstrap code, from small snippets to entire Bootstrap-ready themes. Bootply launched its Beta yesterday.

http://bootply.com

April 26, 2013
Fiddle with Bootstrap! A new editor with the best of jQuery and Bootstrap.
http://Bootply.com

Fiddle with Bootstrap! A new editor with the best of jQuery and Bootstrap.
http://Bootply.com

January 29, 2013
Single Page App with Twitter Bootstrap and Node.js

This is Part 2 of a 3 part series on a single page application for Node.JS.

image

In Part 1, I reviewed the server-side, and you got to see how the routes are set-up in a typical modular Node.js app using the Express Framework.

Part 2 of my single-page app lesson covers the UI (presentation) layer including the EJS (Embedded Javascript) templates and rendering.

There are several template engines for Node such as Jade, EJS, HAML and Hogan. I decided to go with EJS since it lets us define templates using familiar HTML tags.

Things have changed slightly on EJS configuration from Express 2.x to Express 3.x. The layout file (master template used as a wrapper) must be explicitly set in app.locals, and we must “require” ejs-locals module to use the layout file in Express 3.x.

Using EJS

In app.js, EJS is configured as the template engine:

	app.locals({
		_layoutFile:'layout.ejs'
	});
		
	app.configure(function(){
		app.set('views', __dirname + '/views');
		app.set('view engine', 'ejs');
		.
		.
	});

	app.engine('ejs', require('ejs-locals'));

The ‘layout.ejs’ file is the wrapper template for the single-page app. This includes the HTML doctype, HEAD, META tags, links to any Javascript and CSS files that are used. The layout also includes any app-level scripts that we want to reference. The scripts are used to control elements such as the dot navigation, scrolling effect and alerts.

The layout.ejs template contains a <%- body %> tag which is where EJS will render content from the page-level ‘index.ejs' template.

<!DOCTYPE html>
<html lang="en">
  <head> .. </head>
  <body>..<%- body %>..</body>
</html>

When a server-side request is routed, the response contains a Javascript object that is used to pass data from the Node server to EJS. The values in the Javascript object can be reference anywhere we need to render data (content). There are basically 3 ways to reference data values in the EJS templates:

<%- value %> - Unescape HTML for literal rendering of HTML or script.

<%= value %> - Escaped HTML for standard HTML rendering of content.

<% code %> - Is used for Javascript code blocks.

For example, consider the Javascript object sent by the default single page ‘/’ route. The object is passed to the ‘index.ejs’ template using res.render in Express:

..
res.render('index.ejs', {locals:locals,sections:sectionsDb,app:appDb.get('app'),page:appDb.get('page'),msg:req.query.msg,err:req.query.err});
..

Rendering app-level data in layout.ejs:

The ‘app’ Javascript object contains app-level data loaded from the appDb. The ‘app’ object looks like:

{
 "name":"PortalApp",
 "title":"Single page app",
 "keywords":"one page,single page,app,bootstrap,mobile",
 "description":"PortalApp is a demo of the single page app."
}


So we can render these values in the ‘layout.ejs’ template using:

<title><%= app.title %></title>
<meta name="description" content="<%= app.description %>">
<meta name="keywords" content="<%= app.keywords %>">

Rendering section data in index.ejs:

The ‘sections’ object (loaded by the server from the ‘sectionsDb’ database) contains a Javascript array with content for each section to display on the page. Each section object contains a unique key and value. The value object contains several properties (heading,content,etc..) with the actual content to be rendered. In the template we can use dot-notation (sections[0].value.content) to reference values in the object.

Here is the logic in the ‘index.ejs’ template that iterates the ‘sections’ array to display each section of content:

<% sections.forEach( function( key,val ){ %>
<% if (val && val.enabled=="1"){ %>
<section id="<%=key%>">
    <% if (val.heading){ %><h2><%- val.heading %></h2><% } %>
    <%- val.content %>
</section>
<% } %>
<% }); %>

As you can see above a .forEach loop is used to get each key and val from the sections array. Then we check to make sure that the section is enabled (val.enabled==1), before displaying val.heading and val.content.

In the next Part 3, I’ll take a look at the Administration tools that enable content management in the single-page app.

Part 1 | Demo | Download

January 19, 2013
Coder: 14 Places for JQuery Plugin Authors to Post Plugins

iatek:

So you’ve developed a new jQuery plugin and now you want to tell the world about it. Knowing that the http://plugins.jquery.com site is still offline, you set out on a mission to find other sites that will help you to market your plugin. Facing the same challenge, I compiled this list of…

January 19, 2013
TJ Holowaychuk: Components

tjholowaychuk:

With the advent of numerous client-side JavaScript package managers, I wanted to write up some of my thoughts about the fragmentation that we have today, and some ways that I think we could really improve delivering packages a community. Keep in mind that these are only my opinions, everyone has…

(Source: tjholowaychuk)

6:31am  |   URL: http://tmblr.co/ZleRdvc6o91r
  
Filed under: javascript node node.js 
January 10, 2013
Single Page App with Twitter Bootstrap and Node.js

This is Part 1 of a 3 part series on a single page application for Node.JS.

image

I love Twitter Bootstrap. Yes, there are several similar frameworks, but I like the fact that Bootstrap works on nearly all modern browsers (Firefox, Chrome, Safari (Stinkin) IE 8+). Although Twitter Bootstrap was not initially great for Mobile apps, they have done some recent updates that provide near compatibility on mobile devices like iPad, iPhone and Android.

I started this project as a boilerplate for single-page apps, and later realized that it’s a good backend for Bootstrap. There are several great Bootstrap mods, themes and UI layer tools have emerged: Bootswatch, Font Awesome and tons more (thus this amazing list on The Big Badass List of Bootstrap Resources). But, I couldn’t find an adequate starter-kit for the server side so I decided to write my own.

Node.js is a good fit for single-page apps. While Socket.IO would seemingly provide cleaner HTTP better suited to single-page apps, I decided to go with Express 3.0 because I’m more comfortable with it’s session management, templating, form parsing and routing features.

The idea of the single-page app is heavy use of AJAX for the server calls which minimizes full page reloads in the browser. This app is in the long scrolling vertical page style, and I hope later to add a parallax style. Since it is a one page app, it would also be well suited for a tabbed layout which is something I intend to implement later. I’ll get into the details later, but here is a demo the single page application.

image


Part 1: Server-side Code

If you’re new to Node.JS, there is great getting started tutorial here. Once Node and NPM are up and running you’re ready to look at the backend of this single page app. As stated earlier, this app uses the Express framework which is high-performance layer that simplifies app fundamentals such as routing, sessions and request/response.

Express Configuration

app.js

This file uses “require” to load Express, EJS-locals and defines the app settings.

	var express = require('express'),
	engine = require('ejs-locals'),
	app = express();
		
	exports.init = function(port) {

	app.locals({
		_layoutFile:'layout.ejs'
	})
		
	app.configure(function(){
		app.set('views', __dirname + '/views');
		app.set('view engine', 'ejs');
		app.use(express.static(__dirname + '/static'));
		app.use(express.bodyParser());
		app.use(express.methodOverride());
		app.use(express.cookieParser());
		app.use(express.cookieSession({cookie:{path:'/',httpOnly:true,maxAge:null},secret:'skeletor'}));
		app.use(app.router);
		app.enable("jsonp callback");
	});

	app.engine('ejs', engine);
		
	app.configure('development', function(){
	   app.use(express.errorHandler({ dumpExceptions: true, showStack: true }));
	});

	app.configure('production', function(){
	   app.use(express.errorHandler()); 
	});

	app.use(function(err, req, res, next){
	   res.render('500.ejs', { locals: { error: err },status: 500 });	
	});
		
	server = app.listen(port);
	console.log("Listening on port %d in %s mode", server.address().port, app.settings.env);

	return app;
	}	

Session and Cookie Management

	.
	.
	app.use(express.cookieParser());
	app.use(express.cookieSession({cookie:{path:'/',httpOnly:true,maxAge:null},secret:'skeletor'}));
	.
	.

Serving Static Pages

	.
	.
	app.use(express.static(__dirname + '/static'));
	.
	.

Routing

server.js

This is the startup file for our app. Server.js loads the app settings from app.js and defines each app route. Express 3.0 is most of the magic here. Express uses app. methods to provide the routing functionality, where is one of the HTTP methods (ie; get, post, del). Below is a stubbed view of server.js that defines each route in the application. Notice the use of “app.get”, “app.post” and “app.del” accordingly:

	var port = process.env.PORT || 4000,
	app = require('./app').init(port),
	dirty = require('dirty');

	// define the routes
	app.get('*', function(req,res,next){
		// this is called for every GET request
	});

	/* home page route */
	app.get('/', function(req,res){
		console.log("render home page");
	});

	/* contact form route */
	app.post('/contact', function(req,res){
		console.log("post from contact form");
	});
		
	/* login routes */
	app.get('/login', function(req,res){
		console.log("render login page");
	});

	app.post('/login', function(req,res){
		console.log("logging in");
	});

	app.get('/logout', function(req,res){
		console.log("logging out");
	});
		
	/* administration routes */
	app.get('/admin', function(req,res){
		console.log("render admin page");
	});

	app.post('/admin/app', function(req,res){
		console.log("saving app settings");
	});

	app.post('/admin/page', function(req,res){
		console.log("saving page settings");
	});

	app.post('/admin/sections/:k', function(req,res){
		console.log("saving section");
	});

	app.del('/admin/sections/:k', function(req,res){
		console.log("deleting section");
	});

	app.post('/admin/sections', function(req,res){
		console.log("saving sections");
	});

	.
	.
	
	/* The 404 Route (ALWAYS Keep this as the last route) */
	app.get('/*', function(req, res){
		res.render('404.ejs', locals);
	});

As you can see the routes define 4 HTTP GET (app.get) endpoints:

  1. / (default/home page)
  2. /login
  3. /logout
  4. /admin

Persistence

For this single-page app I wanted to keep the database lightweight and simple. I chose “Dirty”, a file-based schemaless data store for Node which is ideal for apps with Connect modules. I found Dirty well suited for this app as it eliminates the need to stand-up a separate database server, and keeps deployment stupid simple.


In our server.js we load the node-dirty module using require:

	.
	dirty = require('dirty');
	.
	.

There are 5 database files that provide persistence:

  1. app.db - Stores application level settings
  2. sections.db - Stores section settings and content
  3. user.db - Stores user credentials for /admin authentication
  4. snippet.db - Stores code snippets to pre-populate section content
  5. post.db - Stores results posted from contact and email forms

Code Details

Lets look closer at the code that executes when the default URL (http://www.myapp.com/) is requested:

	app.get('/', function(req,res){
		console.log("show home page");
		
		var appDb = dirty('app.db'),
		sectionsDb;
		
		appDb.on('load', function() {
			sectionsDb = dirty('sections.db');
			sectionsDb.on('load', function() {
if (typeof req.session.once=="undefined") { // once per user session to display message/alert locals.once=appDb.get('page').once; req.session.once=1; } res.render('index.ejs', {locals:locals,sections:sectionsDb,app:appDb.get('app'),page:appDb.get('page'),msg:req.query.msg,err:req.query.err}); }); }); });

The code above provides an example of reading from the ‘dirty’ database, and is fairly self-explanatory. First, the application settings are loaded into variable ‘appDb’. When the appDb ‘load’ event occurs, we get the section content and load it into variable ‘sectionDb’. With node-dirty, we always wait for the 'load' event when reading from the databases, and use '.get' to read a record (based upon its’ unique key). The call to res.render passes the loaded data as a JSON object to the ‘index.ejs’ template file. The JSON object contains the data for ‘sections’ and ‘app’ that can be referenced in the ‘index.ejs’ template (ie. <%= section.title %>). I also use the ‘msg’ and ‘err’ to pass in any notifications that we need to display when ‘index.ejs’ is rendered.

In Part 2, I’ll cover the UI (presentation) portion of the single page app including a detailed look at the EJS templates and Twitter Bootstrap.

Demo | Download

Update! Part 2 - The UI with EJS

December 10, 2012
One Page App for Twitter Bootstrap on Node.js. Here is a responsive app for the Web or mobile devices like iPad, iPhone.

One Page App for Twitter Bootstrap on Node.js. Here is a responsive app for the Web or mobile devices like iPad, iPhone.

November 20, 2012
Combine multiple social channels in one stream: in1.com

Combine multiple social channels in one stream: in1.com

November 20, 2012
Trends 2013: Social Merchandising

Tools will emerge that simplify the complexity of social marketing, social commerce, and unlock the potential of social merchandising.


As social media marketing evolved, brands focused on digital campaigns to share messages (ads) across multiple social channels. Numerous social media marketing tools emerged providing ways to share, monitor and analyze multiple social networks. But, the social Web is no longer about posting text updates on Facebook or Twitter. While the most successful brands are “simple”, simplicity is complex — especially when it comes to social marketing. Social channels have become highly visual and interactive since the emergence of platforms like Instagram, Pinterest and YouTube.

Social engagement involves telling a story and listening. Brands have to manage profiles on multiple social platforms that each offer unique advantages and characteristics. Brands are sharing content around specific products, services and events. Social campaigns are used to build momentum around product launches or seasonal events. All of this adds to the complexity and requires an increased level of coordination between marketers, product managers and technical staff. New tools will emerge that simplify the complexity social marketing, and unlock the potential of social merchandising. These tools will provide integrated solutions that enable brands to involve their marketing and product teams accordingly to impact consumer purchase decisions. Social Merchandising (sometimes called, “customer-driven merchandising”) tools will provide better alignment between products and the consumers that are interested in them. While Social Marketing enables brands to encourage content sharing, Social Merchandising enables brands to encourage content curation, and target consumer based on their interests and product popularity. Social Merchandising will be most apparent in the retail sector, and enable campaigns to be more aligned with the entire business and its’ brand strategy.


Social Merchandising Companies to Watch in 2013:


http://in1.com