Tag Archives: Bootstrap

Getting Started with Jekyll (plus a Free Bootstrap 3 Starter Theme)


Getting Started with Jekyll (plus a Free Bootstrap 3 Starter Theme)
// Scotch.io

build-a-static-blog-with-jekyll-600x250.png

Jekyll is a simple and blog-aware static site generator built in Ruby. In laymen terms, it’s just a tool to let you have all the cool features of a full-blown CMS without having to worry about managing a database. This means hosting is extremely easy and scalable since all you’re doing is managing a bunch of files.

In this tutorial, we’ll cover everything you need to know to get started. It doesn’t matter if your a seasoned Ruby developer or have never written a line of Ruby in your life. We’ll also walk-through some best practice approaches and provide you with an awesome free starter Jekyll theme with Bootstrap 3 for you to fork and repurpose.

bootstrap-plus-jekyll

You can check-out a demo the blog we’re building here or dive straight into the theme’s code here. Our starter theme should be helpful for several reasons:

  • Bootstrap 3 integrated
  • Organized global variables
  • All config settings setup
  • Pages setup in their own folder
  • Simple BS3 pagination demo
  • Dead simple layout simple
  • .gitignore already setup
  • Multiple post options: Featured Image, Video, Lead Text, etc.
  • Category and tag integration
  • Huge, in-your-face, blog-style you can easily change (accepting pull requests)

Designing Sites Using Bootswatch


Designing Sites Using Bootswatch
// C-Sharpcorner Latest Articles

In this article I am going to explain how we can design our own site using readymade styles.

Video: Create Elegant and Responsive Bootstrap Buttons


Watch: Create Elegant and Responsive Bootstrap Buttons
// SitePoint

In this screencast, I will show you how to create elegant responsive Bootstrap buttons including overcoming white-space issues and hiding content at various screen sizes.

You can find code samples for this screencast on GitHub. This is the first video in the Quick Real World Bootstrap Tricks series.

Loading the player…

Continue reading %Watch: Create Elegant and Responsive Bootstrap Buttons%

Build a NodeJS Powered Chatroom Web App Part 3: Node, MongoDB and Socket


 Build a Node.js-powered Chatroom Web App: Node, MongoDB and Socket
// Kogonuso

sshot-10600.png
This article is part of a web dev tech series from Microsoft. Thank you for supporting the partners who make SitePoint possible.
This Node.js tutorial series will help you build a Node.js-powered real-time chatroom web app fully deployed in the cloud. In this series, you will learn how to setup Node.js on your Windows machine (or just learn the concepts if you’re on Mac), how to develop a web frontend with Express, how to deploy a Node.js Express app to Azure, how to use Socket.IO to add a real-time layer, and how to deploy it all together.
The tutorial will use the optional Visual Studio and the Node.js Tools for Visual Studio plug-in as a development environment. I have provided links to free downloads of both tools. This is a beginner to intermediate-level article –you’re expected to know HTML5 and JavaScript.

Part 1 – Introduction to Node.js
Part 2 – Welcome to Express with Node.js and Azure
Part 3 – Building a Backend with Node.js, Mongo and Socket.IO
Part 4 – Building a Chatroom UI with Bootstrap
Part 5 – Connecting the Chatroom with WebSockets
Part 6 – The Finale and Debugging Remote Node.js Apps

Part 3 – Building a Chatroom Backend with Node.js, Socket.IO and Mongo

Welcome to Part 3 of the hands-on Node.js tutorial series: Build a Node.js-powered chatroom web app. In this installment, I will show you how to use your existing express-based Node.js app to create a chatroom backend with WebSocket support.

What are WebSockets? What is Socket.IO?

WebSocket is a protocol designed to allow web applications to create a full-duplex channel over TCP (i.e. to have bi-directional communication) between the web browser and a web server. It is fully compatible with HTTP and uses TCP port number 80. WebSocket has allowed web applications to become real-time and support advanced interactions between the client and the server. It is supported by several browsers including Internet Explorer, Google Chrome, Firefox, Safari and Opera.
Socket.IO is a JavaScript library and Node.js module that allows you to create real-time bidirectional event-based communication apps simply and quickly. It simplifies the process of using WebSockets significantly. We will be using Socket.IO v1.0 to make our chatroom app.

Adding Socket.IO to package.json

package.json is a file that holds various metadata relevant to the project, including its dependencies. npm can use this file to download modules required by the project. Take a look at this interactive explanation of package.json and what it can contain.
Let’s add Socket.IO to the project as a dependency. There are two ways to do that.

  1. If you have been following the tutorial series and have a project in Visual Studio setup, right-click on the npm part of the project and select “Install New npm Packages…”

1428380897image_0.jpg
Once the window has opened, search for “socket.io”, select the top result and check the “Add to package.json” checkbox. Click the “Install Package” button. This will install Socket.IO into your project and add it to the package.json file.
1428380891image_1.jpg
package.json

{
"name": "NodeChatroom",
"version": "0.0.0",
"description": "NodeChatroom",
"main": "app.js",
"author": {
"name": "Rami Sayar",
"email": ""
},
"dependencies": {
"express": "3.4.4",
"jade": "*",
"socket.io": "^1.0.6",
"stylus": "*"
}
}
  1. If you’re on OS X or Linux, you can achieve the same action as the above by running the following command in the root of your project folder.
npm install --save socket.io

Adding Socket.IO to app.js

The next step is to add Socket.IO to app.js. You can achieve this by replacing the following code…

http.createServer(app).listen(app.get('port'), function(){
console.log('Express server listening on port ' + app.get('port'));
});

…with:

var serve = http.createServer(app);
var io = require('socket.io')(serve);
serve.listen(app.get('port'), function() {
console.log('Express server listening on port ' + app.get('port'));
});

This will capture the HTTP server in a variable called serve and pass that HTTP server so that the Socket.IO module can attach to it. The last code block takes the serve variable and executes the listen function which starts the HTTP server.

Logging a User Joining and Leaving

Ideally, we want to log a user joining the chatroom. The following code accomplishes that by hooking a callback function to be executed on every single connection event via WebSocket to our HTTP server. In the callback function, we call console.log to log that a user connected. We can add this code after we call serve.listen.

io.on('connection', function (socket) {
console.log('a user connected');
});

To do the same for when a user disconnects, we have to hook up the disconnect event for each socket. Add the following code inside after the console log of the previous code block.

socket.on('disconnect', function () {
console.log('user disconnected');
});

Finally, the code will look like this:

io.on('connection', function (socket) {
console.log('a user connected');
socket.on('disconnect', function () {
console.log('user disconnected');
});
});

Broadcasting a Message Received on the Chat Channel

Socket.IO gives us a function called emit to send events.
Any message received on the chat channel will be broadcast to all the other connections on this socket by calling emit with the broadcast flag in the callback.

socket.on('chat', function (msg) {
socket.broadcast.emit('chat', msg);
});

Finally, the code will look like this:

io.on('connection', function (socket) {
console.log('a user connected');
socket.on('disconnect', function () {
console.log('user disconnected');
});
socket.on('chat', function (msg) {
socket.broadcast.emit('chat', msg);
});
});

Saving Messages to a NoSQL Database

The chatroom should save chat messages to a simple data store. Normally, there are two ways to save to a database in Node; you can use a database-specific driver or you can use an ORM. In this tutorial, I will show you how to save the messages to MongoDB. Of course, you can use any other database you like, including SQL databases like PostgreSQL or MySQL.
You should make sure you have a MongoDB to connect to. You can use a third-party service to host your MongoDB such as MongoHQ or MongoLab. Take a look at this tutorial to see how you can create a MongoDB using the MongoLab Add-On in Azure. You can stop reading when you get to the section “Create the App”, just make sure to save the MONGOLAB_URI somewhere you can access easily later.
Once you have created a MongoDB and you have the MONGOLAB_URI for the database – Under Connection info that you have copied to your clipboard – you will want to ensure that the URI is available to the application. It is not best practice to add sensitive information such as this URI into your code or into a configuration file in your source code management tool. You can add the value to the Connection Strings list in the Configuration menu of your Azure Web application (such as in the tutorial you used) or you can add it to the App Setting list (with Name CUSTOMCONNSTR_MONGOLAB_URI). On your local machine, you can add it to the environment variables with the name CUSTOMCONNSTR_MONGOLAB_URI and value of the URI.
The next step is to add support for MongoDB to our project. You can do that by adding the following line to the dependencies object in package.json. Make sure to save your changes to the file.

"mongodb": "^1.4.10",

Right-click on the npm part of the project in the Solution Explorer to reveal the right-click context menu. Click “Install missing packages” from the content menu to install the MongoDB package so that it can be used as a module.
1428380887image_2.png
We want to import that module to be able to use the MongoDB client object in app.js. You can add the following lines of code after the first require('') function calls, such as on line 11.

var mongo = require('mongodb').MongoClient;

We want to connect to the database using the URI we have in the CUSTOMCONNSTR_MONGOLAB_URI environment variable. Once connected, we want to insert the chat message received in the socket connection.

mongo.connect(process.env.CUSTOMCONNSTR_MONGOLAB_URI, function (err, db) {
var collection = db.collection('chat messages');
collection.insert({ content: msg }, function(err, o) {
if (err) { console.warn(err.message); }
else { console.log("chat message inserted into db: " + msg); }
});
});

As you can see in the above code, we use the process.env object to get the environment variable value. We go into a collection in the database and we call the insert function with the content in an object.
Every message is now being saved into our MongoDB database.

Emitting the Last 10 Messages Received

Of course, we don’t want our users to feel lost once joining the chatroom, so we should make sure to send the last 10 messages received to the server so at the very least we can give them some context. To do that, we need to connect MongoDB. In this case, I am refraining from wrapping all of the socket code with one connection to the database so that I can still have the server working even if it loses the database connection.
We will also want to sort and limit my query to the last 10 messages, we will use the MongoDB generated _id as it contains a timestamp (although in more scalable situations, you will want to create a dedicated timestamp in the chat message) and we will call the limit function to limit the results to only 10 messages.
We will stream the results from MongoDB so that I can emit them as soon as possible to the chatroom as they arrive.

mongo.connect(process.env.CUSTOMCONNSTR_MONGOLAB_URI, function (err, db) {
var collection = db.collection('chat messages')
var stream = collection.find().sort({ _id : -1 }).limit(10).stream();
stream.on('data', function (chat) { socket.emit('chat', chat.content); });
});

The above code does the job as explained in the previous paragraphs.

Deploying to Azure

You can redeploy to Azure by following the past tutorials (such as part 2).

Conclusion

In conclusion, we have a chat system capable of broadcasting a message received via WebSockets to all other connected clients. The system saves the message to the database and retrieves the last 10 messages to give context to every new user who joins the chatroom.

Stay Tuned for Part 4!

Part 4 — Building a Chatroom UI with Bootstrap is here. You can stay up-to-date on this and other articles by following my twitter account.

More Learning for Node on Azure

For more in-depth learning on node, my course is available here on Microsoft Virtual Academy.
Or some shorter-format videos on similar node subjects:

This article is part of the web dev tech series from Microsoft. We’re excited to share Project Spartan and its new rendering engine with you. Get free virtual machines or test remotely on your Mac, iOS, Android, or Windows device at modern.IE.

Rami Sayar is a technical evangelist at Microsoft Canada focusing on web development (JavaScript, AngularJS, Node.js, HTML5, CSS3, D3.js, Backbone.js, Babylon.js), open data and open source technologies (Python, PHP, Java, Android, Linux, etc.) Read his blog or follow him on Twitter.

—-

Shared via my feedly reader

Build a NodeJS powered Chatroom Web App Part 6: Debugging Remotely


Build a Node.js-powered Chatroom Web App: Debugging Remotely
// Kogonuso

sshot-10593.png
This article is part of a web dev tech series from Microsoft. Thank you for supporting the partners who make SitePoint possible.
This Node.js tutorial series will help you build a Node.js-powered real-time chatroom web app fully deployed in the cloud. In this series, you will learn how to setup Node.js on your Windows machine (or just learn the concepts if you’re on Mac), how to develop a web frontend with Express, how to deploy a Node.js Express app to Azure, how to use Socket.IO to add a real-time layer, and how to deploy it all together.
The tutorial will use the optional Visual Studio and the Node.js Tools for Visual Studio plug-in as a development environment. I have provided links to free downloads of both tools. This is a beginner to intermediate-level article—you’re expected to know HTML5 and JavaScript.

Part 1 – Introduction to Node.js
Part 2 – Welcome to Express with Node.js and Azure
Part 3 – Building a Backend with Node.js, Mongo and Socket.IO
Part 4 – Building a Chatroom UI with Bootstrap
Part 5 – Connecting the Chatroom with WebSockets
Part 6 – The Finale and Debugging Remote Node.js Apps

Part 6 – The Finale and Debugging Remote Node Apps

Welcome to Part 6 of the hands-on Node.js tutorial series: Build a Node.js-powered chatroom web app.
In this final installment, I will show you how to do a final deployment of your chatroom and how to perform remote debugging.

Deploying to Azure

Now that we’ve got our Node.js-powered anonymous chatroom app working, let’s deploy it to the cloud in a few clicks. You can deploy to any cloud that supports Node.js. I will be using Microsoft Azure as I can run a Node.js website on there for free.
You can sign up for a free trial of Microsoft Azure here. You will get trial credits to spend on all Azure services. For the service we are using, Azure Websites, you can actually run 10 websites without spending a dime.

  1. Once you have your Azure account set up, go back to the IDE, right click on the project and click Publish.
    1428560674NodeJS-Article-6-01-06-Publishing-Via-Azure.png
  2. Clicking Publish will open a wizard with a few options, select the target Microsoft Azure Websites.
  3. You will be asked to sign in at this step, please use the same Microsoft Account here as you did on the Azure sign up.
  4. Click New to create a new Azure website or, if you already have one created, you can select it from the dropdown.
    1428560708NodeJS-Article-6-02-Publishing-New-Azure-Website.jpg
  5. You will want to complete the fields in the wizard (just like below). Make sure to choose a unique site name, and then click Create.
    1428560703NodeJS-Article-6-03-Completing-the-Wizard.png
  6. You will be presented with a pre-filled wizard. Click Publish.
    1428560697NodeJS-Article-6-04-Publishing-Final-Step.png

We’ve deployed to the cloud but the work is not over yet!

Enabling WebSockets in Azure Websites

There are a few things you need to do to ensure that WebSockets are enabled for your website. If you want more detailed steps or FAQ, be sure to visit this page.
First, you will need to enable WebSockets from the Azure command-line or the Configuration tab, like so:
1428560692NodeJS-Article-6-05-Enabling-Web-Sockets.png
Second, you will want to modify your web.config file and the following line to the system.webServer XML element.

<webSocket enabled="false" />

It may seem counterintuitive, but this disables the IIS WebSockets module, which includes its own implementation of WebSockets and conflicts with Node.js specific WebSockets modules such as Socket.IO.

Debugging Remote Node.js Apps

Node Tools for Visual Studio comes with several advanced debugging features such as conditional breakpoints, “hit count” breakpoints, tracepoints and remote debugging support for Windows, Linux and OS X. Read more here.

Connecting to Remote Node.js Instances

NTVS has support for remote debugging code running on Azure Web Sites. Unlike regular remote debugging, the target machine is not directly accessible over TCP. NTVS comes with a WebSocket proxy for the debugging protocol that exposes the debugger protocol via HTTP. When you create a new Windows Azure project, the proxy is fully configured for you in Web.Debug.config, and will be enabled on the Azure WebSite if you publish your project in the Debug configuration by following the next couple of steps.

  1. Right click on the project and select Publish.
    1428560674NodeJS-Article-6-01-06-Publishing-Via-Azure.png
  2. Select the Settings tab on the left and be sure to choose the Debug configuration from the dropdown.
    1428560687NodeJS-Article-6-07-Publishing-to-the-Web-in-Debug-Mode.jpg
  3. Click Publish.

Once your project is properly deployed and WebSockets are enabled, you can attach to the web site from Server Explorer. If you do not have the Server Explorer window open, you can open it via View → Server Explorer. Then, locate your web site under Windows Azure → Web Sites, and right-click on it. If it is running, and your project has been deployed to it using the Debug configuration, you should see the Attach Debugger (Node.js) command in the context menu.
1428560683NodeJS-Article-6-08-Attach-Node.js-Debugger.png

Reading Logs and Streaming Logs

If you want to stream the latest logs, it’s quite easy! All you have to do is right click on your website in the Server Explorer and choose View Stream Logs.
1428560678NodeJS-Article-6-09-Streaming-Logs.png

Conclusion

Voila! There you have it! You now have an anonymous, real-time chatroom in the cloud! Throughout this series, we learned how to set up Node.js, develop a web front-end with Express, deploy our app to the cloud, how to use Socket.IO to add a real-time layer, and then how to deploy it all together!
1428562937barney.gif
Be sure to reread the different parts on my blog as I may occasionally add updates to this tutorial. You can stay up-to-date on this and other articles by following my Twitter account
P.S. If you want more success GIFs, go here.

More learning for Node.js on Azure

For more in-depth learning on node, my course is available here on Microsoft Virtual Academy.
Or some shorter-format videos on similar node subjects:

This article is part of the web dev tech series from Microsoft. We’re excited to share Project Spartan and its new rendering engine with you. Get free virtual machines or test remotely on your Mac, iOS, Android, or Windows device at modern.IE.

Rami Sayar is a technical evangelist at Microsoft Canada focusing on web development (JavaScript, AngularJS, Node.js, HTML5, CSS3, D3.js, Backbone.js, Babylon.js), open data and open source technologies (Python, PHP, Java, Android, Linux, etc.) Read his blog or follow him on Twitter.

Mastering Your Inbox with the Gmail JavaScript API


Mastering Your Inbox with the Gmail JavaScript API
// SitePoint

In this article, we’re going to build a basic Gmail inbox and message viewing app using the Gmail RESTful API. The purpose of this article is to give you a good starting point to create cool new JavaScript apps of your own using this API. We’re going to use jQuery and Bootstrap to take some weight out of the code base so we can focus on getting something working quickly without worrying about cross-browser JavaScript inconsistencies and basic styling.

As ever the complete code for this article can be found on our GitHub repo.

Gmail Logo

Enabling the Gmail API on Your Google Account

First off, we need to enable Gmail API access to get our API credentials. To do this, we need to visit Google’s Developer Console in our favourite web browser. From there, we need to create a project (or choose an existing one) and go to the APIs section. Choose “Gmail API” under the Google Apps APIs section and click the “Enable API” button.

Now we need to create two sets of credentials, one for an OAuth 2.0 client ID for a web application and the other to create a browser API key. This can be done in the credentials section of the Google Developer Console by clicking the “Add Credentials” button.

Add credentials screenshot

For the browser API key we need to only fill in the “name” field. However, for production I’d recommend adding a HTTP referrer (this will prevent abuse of our API key from non-authorized domains). For the OAuth 2.0 client ID we must enter at least one authorized JavaScript origin. For a local development environment this will likely be http://localhost or similar. We do not need to enter an authorized redirect URI.

Once we’ve filled in the necessary fields we should be able to see our credentials back in the Credentials section. Keep this info open in a browser tab for later.

Connecting to the Gmail API

[author_more]

Even though the Gmail API is a standard REST API using OAuth 2.0 we recommend using Google’s own JavaScript libraries for connecting to and working with any Google-authored APIs. This is because Google has already packaged up authentication logic and the required dependencies into a single include file — less work for us!

So, first things first – let’s set up our HTML file which we’re going to use as the base of our app. For the purpose of this app we’re going to include all of our code in a single HTML file. In a production environment Id recommend splitting out HTML, CSS and JavaScript into separate files.

<!doctype html> <html> <head> <title>Gmail API demo</title> <meta charset="UTF-8"> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> <style> .hidden{ display: none; } </style> </head> <body>

Gmail API demo

Authorize

//ahref= //ahref= var clientId = ‘xxxxxxxxxxxx-xxxxxxxxxxxxxxxxxxxxxxx.apps.googleusercontent.com‘; var apiKey = ‘xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx’; var scopes = ‘https://www.googleapis.com/auth/gmail.readonly’; http://ahref= </body> </html>

Right at the bottom (above the closing </body> tag) is where we include Google’s JavaScript client library. Notice the query string on the end, this contains the callback function which will be executed once the script has loaded — we’ll use that to initialize our app a little later. Just above that is where we are defining our API credentials, we need to paste these from the Google Developer Console Credentials section. We also define which permissions we’ll require from the user, these are known as scopes. For the purpose of this app we only require read-only Gmail access. It’s good practice to request as few permissions as possible from the user — this provides the user peace of mind that we’re not going to do something nefarious like send emails on their behalf without them knowing.

Other than that we’ve got a button which will allow the user to authorize us to access their Gmail account, and we’ve also stubbed out a table to hold our inbox data once we fetch it. And, as mentioned earlier, we’ve included the necessary files for jQuery and Bootstrap.

Authenticating the User

Now we’re going to provide a mechanism for the user to authenticate us to access their Gmail account. As mentioned above, we need to build out a function named handleClientLoad() which will automatically be called once Google’s JavaScript client library has loaded into the page. This function will then call a chain of other functions which will eventually lead us to fetching their inbox.

function handleClientLoad() { gapi.client.setApiKey(apiKey); window.setTimeout(checkAuth, 1); } function checkAuth() { gapi.auth.authorize({ client_id: clientId, scope: scopes, immediate: true }, handleAuthResult); } function handleAuthClick() { gapi.auth.authorize({ client_id: clientId, scope: scopes, immediate: false }, handleAuthResult); return false; } function handleAuthResult(authResult) { if(authResult && !authResult.error) { loadGmailApi(); $('#authorize-button').remove(); $('.table-inbox').removeClass("hidden"); } else { $('#authorize-button').removeClass("hidden"); $('#authorize-button').on('click', function(){ handleAuthClick(); }); } } function loadGmailApi() { gapi.client.load('gmail', 'v1', displayInbox); } 

We should insert this code directly below where we set the API credentials, within the same SCRIPT block.

To summarise the process this chain of function calls goes through:

  1. handleClientLoad() simply sets the API key and passes off to checkAuth() after 1 millisecond.
  2. checkAuth() checks if the user has previously authenticated our app with Google. Setting the immediate parameter to true here means that we do not prompt the user with a login/permissions modal if they are not authenticated. We then pass the authentication result to handleAuthResult().
  3. handleAuthResult() then does one of two things; if the user is already authenticated it’ll load the Gmail API using loadGmailApi(), alternatively it’ll display the authorize button on the UI and attach a click event to it which will trigger handleAuthClick()
  4. handleAuthClick() simply executes the same authentication function as checkAuth() but will present the user with a login/permissions modal. Once the user authenticates the same handleAuthResult() function from before is triggered.
  5. Once those series of functions have been executed and the user has authenticated we should always find ourselves at the loadGmailApi() function. This simply loads the Gmail API functionality from Google’s JavaScript client library and then calls our displayInbox() function.

Continue reading %Mastering Your Inbox with the Gmail JavaScript API%

AngularJS as the alternative choice for building web interface


via Developers Corner: AngularJs as the alternative choice for building web interface.

Recently, we were invited to conduct a joint talk with a UX designer, Andrew from Viki on Improving communications between Design and Development for Singasug.  The main focus of the talk was to introduce AngularJS and elaborate on how it help to improve collaboration between developers and designer from both sides of view. To illustrate the topic, we work together on revamping the Pet Clinic Spring sample application.

Over one month of working remotely, mostly on spare time, we have managed to refresh the Pet Clinic application with a new interface, which built on AngularJS and Bootstrap. Based on what we have been through, we delivered the talk to share what have been done with Spring community.

In this article, we want to re-share the story with a different focus, that is using AngularJs as the alternative choice for building web application