Category: Tutorials

Rapid Prototyping with JS is out!

Rapid Prototyping with JS is a hands-on book which introduces you to rapid software prototyping using the latest cutting-edge web and mobile technologies including NodeJS, MongoDB, BackboneJS, Twitter Bootstrap, LESS, jQuery, Parse.com, Heroku and others.

The Book is on LeanPub

Rapid Prototyping with JS is a hands-on book which introduces you to rapid software prototyping using the latest cutting-edge web and mobile technologies including NodeJS, MongoDB, BackboneJS, Twitter Bootstrap, LESS, jQuery, Parse.com, Heroku and others.

The book has 84 pages (in PDF format) or 13,616 words to be precise, step-by-step set-up, best practice advices, web development overview, 11 code examples (also available ready-to-go in GitHub repository azat-co/rpjs), flexible pricing ($9.99–19.99).

Order your copy of Rapid Prototyping with JS at LeanPub: leanpub.com/rapid-prototyping-with-js.

Rapid Prototyping with JS
Rapid Prototyping with JS: Learn how to build web and mobile apps using JavaScript and Node.js

LeanPub platform allows readers to receive infinite future updates (current version of the book is 0.3) and read the book in the most popular digital formats: PDF, ePub/iPad, MOBI/Kindle. The PDF version has footnote links which make it suitable for printing.

Download a free sample at samples.leanpub.com/rapid-prototyping-with-js-sample.pdf.

What Readers Say

Rapid Prototyping with JS is being successfully used at StartupMonthly as a training manual. Here are some of our trainees’ testimonials:

“Thanks a lot to all and special thanks to Azat and Yuri. I enjoyed it a lot and felt motivated to work hard to know these technologies.” — Shelly Arora

“Thanks for putting this workshop together this weekend… what we did with Bootstrap + Parse was really quick & awesome.” — Mariya Yao

“Thanks Yuri and all of you folks. It was a great session – very educative, and it certainly helped me brush up on my Javascript skills. Look forward to seeing/working with you in the future.” — Sam Sur

Who This Book is For

The book is designed for advanced-beginner and intermediate level web and mobile developers: somebody who has just started programming and somebody who is an expert in other languages like Ruby on Rails, PHP, and Java and wants to learn JavaScript and Node.js.

Rapid Prototyping with JS, as you can tell from the name, is about taking your idea to a functional prototype in the form of a web or a mobile application as fast as possible. This thinking adheres to the Lean Startup methodology. Therefore, this book would be more valuable to startup founders, but big companies’ employees might also find it useful, especially if they plan to add new skills to their resume.

Prerequisite

Mac OS X or UNIX/Linux systems are highly recommended for this book’s examples and for web development in general, although it’s still possible to hack your way on a Windows-based system.

Contents

Acknowledgment

Introduction

  1. Who This Book is For
  2. Prerequisite
  3. What to Expect
  4. Notation
  5. Web Basics: Hyper Text Markup Language, Cascading Style Sheets, JavaScript
  6. Agile Methodologies: Scrum, Test-Driven Development, Continuous Deployment, Paired Programming
  7. Node.js
  8. NoSQL and MongoDB
  9. Cloud Computing
  10. HTTP Requests and Responses
  11. RESTful API

Getting Started

  1. Development Folder
  2. Browsers
  3. IDEs and Text Editors
  4. Version Control Systems
  5. Local HTTP Servers
  6. Database: MongoDB
  7. Other Components: NodeJS, jQuery, LESS
  8. SSH Keys
  9. GitHub
  10. Windows Azure
  11. Heroku
  12. Cloud9

Building Front-End Application

  1. JSON
  2. AJAX
  3. Cross-Domain Calls
  4. jQuery
  5. Twitter Bootstrap
  6. LESS
  7. BackboneJS
  8. Example of using Twitter REST API and jQuery
  9. Parse.com
  10. Message Board with Parse.com
  11. Message Board with Parse.com: REST API and jQuery version
  12. Pushing to GitHub
  13. Deployment to Windows Azure
  14. Deployment to Heroku
  15. Message Board with Parse.com: JavaScript SDK and BackboneJS version
  16. Deploying Message Board to PaaS
  17. Enhancing Message Board
  18. Building Back-End Application

Building “Hello World” in NodeJS

  1. NodeJS Core Modules
  2. Node Package Manager
  3. Deploying “Hello World” to PaaS
  4. Deploying to Windows Azure
  5. Deploying to Heroku
  6. Message Board: Run-Time Memory version
  7. Test Case for Message Board
  8. MongoDB Shell
  9. MongoDB Native Driver
  10. MongoDB on Heroku: MongoHQ MongoHQ URL
  11. BSON
  12. Message Board: MongoDB version

Putting it All Together

  1. Different Domain Deployment
  2. Changing Endpoints
  3. Message Board Application
  4. Deployment
  5. Same Domain Deployment

Further Reading

About the Author

Order your copy of Rapid Prototyping with JS at LeanPub: leanpub.com/rapid-prototyping-with-js.

Markdown Goodness

I’ve been introduced to Markdown by my co-worker through GitHub and the need to document the services we’ve been working on at Gizmo. And soon I’ve become a huge fan of Markdown. Honestly, I don’t think I would have been so productive writing blog posts, training manual and Rapid Prototyping with JS book without the help of Markdown and my favorite Markdown apps which I’ll list later.

Markdown is a lightweight text formatting syntax which allows you to write in a plain text, read what you’ve written, and convert marked text cleanly, without any additional mess, into HTML. It is a very accessible and efficient way of writing books, blog posts, articles, technical documentation and pretty much everything which is meant to be on the Internet. Markdown is de-facto a standard in a tech community, since it’s perfect for inserting code blocks and links. Also Markdown is gaining popularity in book publishing, e.g., LeanPub is accepting books only in Markdown.

I’ve been introduced to Markdown by my co-worker through GitHub and the need to document the services we’ve been working on at Gizmo. And soon I’ve become a huge fan of Markdown. Honestly, I don’t think I would have been so productive writing blog posts, training manual and Rapid Prototyping with JS book without the help of Markdown and my favorite Markdown apps which I’ll list later.

Beautiful iA Write - my favorite Markdown app
Beautiful iA Write – my favorite Markdown app

Markdown is a lightweight text formatting syntax which allows you to write in a plain text, read what you’ve written, and convert marked text cleanly, without any additional mess, into HTML. It is a very accessible and efficient way of writing books, blog posts, articles, technical documentation and pretty much everything which is meant to be on the Internet. Markdown is de-facto a standard in a tech community, since it’s perfect for inserting code blocks and links. Also Markdown is gaining popularity in book publishing, e.g., LeanPub is accepting books only in Markdown.

Because Markdown doesn’t require typing too much extra code, like plain HTML, or using your touchpad/mouse, like Word, Pages, or Google Docs, Markdown is just a pure bliss. On the other hand if you’ve been dealing with plain HTML or WYSIWYG editors you know that it’s a matter of putting all those opening and closing angle brackets (<>) or cleaning up the extra mess. Really, who has time for that?

Markdown Sample
Markdown Sample

Here are the five most used styles, which according to 80/20 rule, aka Pareto Principle, will give you the most bang for you time:

  • Headers: use #,##, ###,…, e.g., # Markdown Post
  • Links: use: ([](), <>), e.g., [Cool blog](http://webapplog.com) will turn into Cool blog
  • Emphasis: for Bold use **bold** and Italic use *italic*;
  • Lists: just start with 1. item or * item and follow by space
  • Code: use var a=[]; or tabbed line before.

In case you have to dive deeper in to the markup, here is the original John Gruber’s Markdown: Syntax.

Note: there are many flavors of Markdown, such as GitHub or LeanPub, but those five styles should apply to all of them as they are considered to be the foundation.

And finally, here is my favorite Markdown tools which I can’t live without:

  • ByWord: apps which have nice UI/UX, tons of features, iCloud/Dropbox support, versions for: iPad/iPhone, and Mac OS X;
  • iA Writer: and similar to ByWord, although apps have less features which I guess was made on purpose to keep attention on the writing, versions for: iPhone/iPad, and Mac OS X;
  • Marked: preview app which supports multiple CSS files and many exporting functionalities, version for Max OS X;
  • Mou: free The missing Markdown editor for web developers which has live preview, version for Max OS X;
  • TextMate: plain code/text editor dubbed The Missing Editor for Mac OS X, version for Mac OS X.

And of course, you can use any text editor like Emacs, Vim, Sublime or Notepad for writing Markdown, — it’s just a text after all! Extra bonus: many websites and blogging platforms now support Markdown right off the bat, check with theirs FAQ/help.

Deployment of Static Files to Heroku

If you use Ruby on Rails, Django or NodeJS frameworks on the same domains they have special folders, usually called static, public or assets. But what if you what deploy just “static” file which are usually not so static, by they way.

Heroku uses Cedar stack as an application creation tool and it doesn’t support flat-out deployment of static files such as HTML, CSS or JavaScript, unless they come with some server-side language, e.g, PHP, Ruby, Python. This might come in handy if you are using front-end applications build with jQuery or BackboneJS framework and services like Parse.com or Firebase.com or consume your own back-end deployed as a different application on different instance and/or domain.

There are multiple ways to trick Heroku and Cedar into thinking that your HTML, CSS and JavaScript files are PHP or Ruby on Rails, or any other legitimate Cedar stack, applications. Here is the simplest way is to create index.php file in your project folder, on the same level as your .git folder. You can do this in terminal with this command:

$ touch index.php

Then we turn off PHP with .htaccess directive. You can add line to .htaccess and create it with this terminal command: 

$ echo 'php_flag engine off' > .htaccess

This two terminal command will create empty index.php file and .htaccess file which turns PHP off. This solution was discovered by Kenneth Reitz.

Another approach is less elegant but also involves PHP. Create file index.php on the same level as index.html in the project folder which you would like to publish/deploy to Heroku with the following content:

<?php echo file_get_contents('index.html'); ?>

Third way is to use Ruby and Ruby Bamboo stack. In this case, we would need the following structure:

 -project folder
    config.ru
   /public
      index.html
      /css
      app.js
      ...

The path in index.html to CSS and other assets should be relative. i.e. ‘css/style.css’. The config.ru file should contain the following code:

use Rack::Static, 
  :urls => ["/stylesheets", "/images"],
  :root => "public"

run lambda { |env|
  [
    200, 
    {
      'Content-Type'  => 'text/html', 
      'Cache-Control' => 'public, max-age=86400' 
    },
    File.open('public/index.html', File::RDONLY)
  ]
}

For more details, you could refer to official Bamboo Heroku documentation.

Last but not least, for Python and Django developers, you could add following to your urls.py:

urlpatterns += patterns(”, (r’^static/(?P.*)$’, ‘django.views.static.serve’, {‘document_root’: settings.STATIC_ROOT}),)

Or with this Procfile line:

web: python my_django_app/manage.py collectstatic --noinput; bin/gunicorn_django --workers=4 --bind=0.0.0.0:$PORT my_django_app/settings.py

The full Django post is at Managing Django Static Files on Heroku.

If you use NodeJS, here is how to write your own server:

var http = require("http"),
url = require("url"),
path = require("path"),
fs = require("fs")
port = process.argv[2] || 8888;

http.createServer(function(request, response) {

  var uri = url.parse(request.url).pathname
    , filename = path.join(process.cwd(), uri);

  path.exists(filename, function(exists) {
    if(!exists) {
      response.writeHead(404, {"Content-Type": "text/plain"});
      response.write("404 Not Found\n");
      response.end();
      return;
    }

    if (fs.statSync(filename).isDirectory()) filename += '/index.html';

    fs.readFile(filename, "binary", function(err, file) {
      if(err) {        
        response.writeHead(500, {"Content-Type": "text/plain"});
        response.write(err + "\n");
        response.end();
        return;
      }

      response.writeHead(200);
      response.write(file, "binary");
      response.end();
    });
  });
}).listen(parseInt(port, 10));

console.log("Static file server running at\n  => http://localhost:" + port + "/\nCTRL + C to shutdown");