habdas.org

The Holy Grail: Full-stack JavaScript MVC with Rendr

Josh Habdas — Wed, 01 May 2013 02:13:06 +0000

Spike at Airbnb just mentioned during a live TechTalk webcast that the Rendr framework they built was open sourced earlier this month: https://github.com/airbnb/rendr. The framework leverages Node.js and Backbone.js to allow full-stack JavaScript MVC using a common set of code–greatly improving time to content, improving crawability, and reduces overall application complexity.

During the talk, Meteor and Derby were mentioned, and Mojito *sigh*. And Stitch was also mentioned, as a part of the stack they’re using. So anyway, there you have it. The Holy Grail I talked about. It’s out, but admittedly, according to Spike, not quite “finished”. Caveat emptor.

Later in the talk Spike mentions they were heavily inspired by Chaplin, which you can set up quickly by reading my recent post on developing modern web applications.

The post The Holy Grail: Full-stack JavaScript MVC with Rendr appeared first on habdas.org.

Developing modern web applications on Windows with Vagrant

Josh Habdas — Sun, 28 Apr 2013 00:09:17 +0000

I earlier this month I spent way too much time writing an article on how to SFTP to Ubuntu Server with Sublime Text. The purpose of the SFTP effort was to set myself up for developing modern web applications on a new Windows 8 machine I bought to play SimCity 2013. And after getting everything working I realized the SFTP method had some gremlins and the file syncing reminded me of Dreamweaver–it simply wasn’t fast enough.

Lately, unless you were running a Linux machine or had the pleasure of owning a Mac with OS X, developing modern web applications has been a bit of a kludge. Enter Vagrant.

Vagrant is a tool for building complete development environments. With an easy-to-use workflow and focus on automation, Vagrant lowers development environment setup time, increases development/production parity, and makes the “works on my machine” excuse a relic of the past.

In this article I’ll explain how to set up a development environment in Windows using a virtualized Linux box, suitable for rapid prototyping. Then I’ll take it a step further and explain how to integrate a Backbone-based application framework with Vagrant and Sublime Text, greatly increasing the speed for developing modern web applications on Windows.

Applications used

The following core applications will be used to pull off this little stunt. The only one that costs money is Windows. Download and install all of these before moving forward:

Windows. Where do you want to go today?
Git for Windows. We’ll be using this for the Git Shell that comes with it.
Vagrant. Described above in marketing jargon. It does stuff with virtual machines.
VirtualBox. Open Source virtualization software.
Sublime Text. Wicked quick code editor. Nagware.
Google Chrome. Make this your default browser.

This article will touch on or use a number of ancillary programs. These are free as well. Do not try and download these now; they will be installed and used at specific points during the article.

Ubuntu. Currently the most popular flavor of Linux out there.
Bash. A Unix shell. Will be used inside the Git Shell, which actually uses the Windows PowerShell by default. Result? Shellception.
Nginx. A web server and reverse proxy. It does email too.
Node.js. A server-side JS engine. Will be used for compiling application sources.
curl. Allows us to test the web server for an HTTP response, and more.
Brunch. An easy-to-use HTML5 application assembler.

Once the specified applications are installed it’s time to start configuring the dev environment.

Configure the development environment

Once the core applications are installed, start configuring the development environment.

First, open Git Shell from Windows and, at the command prompt, follow the simple Vagrant Getting Started instructions. This will download a Linux image for the VM, install and start it.

Note: The following steps will assume Vagrant installs Ubuntu 12.04 LTS, though other operating systems and versions are likely to be used in the future.

After the virtual machine starts, connect to it with Vagrant SSH. Once at the bash prompt, pictured below, type pwd to confirm the current directory is the vagrant home directory.

Screenshot of Ubuntu SSH log-in with Vagrant using Git Shell

Then, from the prompt, run the following commands, in sequence, and accepting any intermediate prompts presented, to install Node.js, Nginx and curl, set-up Vagrant synced folders and start the web server.

sudo apt-get update
sudo apt-get install python-software-properties python g++ make
sudo add-apt-repository ppa:chris-lea/node.js
sudo apt-get update
sudo apt-get install nodejs
sudo apt-get install nginx
sudo apt-get install curl
sudo mv /usr/share/nginx/www /vagrant
sudo ln -fs /vagrant/www /usr/share/nginx/www
sudo /usr/sbin/nginx

Once complete, execute curl localhost at the bash prompt to verify the web server started and is sending an expected HTTP response, as shown below.



Welcome to nginx!


Welcome to nginx!

If the response is successful, network the VM with Windows–the host machine–by editing the Vagrantfile (a text file created when the VM was created), uncommenting the following line and saving the file.

# config.vm.network :forwarded_port, guest: 80, host: 8080

Next, run vagrant reload from Git Shell. (Note: Open a new Git Shell to do this, or exit the Ubuntu bash shell first.) Doing so will restart the VM with the updated config and begin forwarding traffic to it, from port 8080 on the host machine to port 80 on the VM.

Try it out by opening a browser and navigating to http://localhost:8080. If the port forwarding is working properly, the page will contain a Nginx welcome message.

Screenshot of the port-forwarded response from Nginx running in the VM

Pretty cool, huh? Just wait…

In case it went unnoticed, the Vagrantfile parent directory now contains a www folder. Drag that folder from Windows Explorer and drop it into an open Sublime Text window.

From Sublime, press Ctrl+P to open the Goto Anything feature, type ix and press Enter to open index.html. Look familiar? That’s because it’s the same output from the curl statement issued earlier in bash.

Make some changes and save the file, then reload the browser window and watch the changes automagically appear.

Screenshot of the port-forwarded response from Nginx running in the VM, showing changes

Now that is cool! Vagrant is not only port forwarding to the guest VM, it’s also syncing file systems. And with that confirmation, the configuration is complete. Time to do something interesting.

Developing modern web applications

To create a modern web application, often times referred to as a Rich Internet Application, or RIA, this article will leverage an HTML5 application assembler called Brunch.io and one of the many available application skeletons called Brunch with Chaplin, which builds on Backbone and can be used to create a SPA.

It’s worth mentioning that Brunch has skeletons available for a number of other frameworks, including Ember, AngularJS and Spine. Not sure which one to pick? Check out TodoMVC for an understanding of the differences.

Install and configure the application framework

Back in Ubuntu (you may need to SSH in again), from the bash prompt, cd to /vagrant/www and enter the following at the prompt to install the Brunch application assembler, create a new application using the default Brunch skeleton, install dependencies and build the app:

sudo npm install -g brunch
brunch new todomvc && cd todomvc
sudo npm install --no-bin-links # Windows does not support symlinks
brunch b

With the last command, a public directory will be created with the compiled source files. And because Vagrant sync is doing its thing, the application will immediately become available within Chrome at the following location: http://localhost:8080/todomvc/public/index.html.

But opening the page shows nothing, and there are few errors on the page. Let’s take a look at the page source and debug in the browser.

View the source and debug the errors

At first when the page is pulled up, errors are preventing the content from loading. The errors can be confirmed by opening the console in Chrome using Chrome Dev Tools (Ctrl+Shift+J).

Uncaught SyntaxError: Unexpected token < vendor.js:1
Uncaught SyntaxError: Unexpected token < app.js:1
Uncaught ReferenceError: require is not defined

Debugging will show that Nginx is responding with HTML for the external CSS and JS files, instead of the expected style and script resources. Why is that? Let’s take a look at the page source and find out. It should look something like the following:



  

  
  
  Brunch example application
  
  /stylesheets/app.css">

It’s a fairly vanilla HTML5 document with some conditional comments for IE, Unicode character encoding, a couple of other meta tags, an empty body element and three root-relative external resources.

The errors themselves are occurring because the external resources cannot be located relative to the web root and so Nginx has decided instead to return the default index.html file–the one modified earlier. There are a few ways to fix this:

Change the paths of the external resources to be document- rather than root-relative;
Change the web root to point to the application’s public directory; and
Configure Brunch to deploy files to the web root.

Though any of these options would work, we’re going to go with configuring brunch to deploy files to the web root. And, in the process, we’re going to move the web root back to its original location outside the reach of Vagrant synced folders. (Note: Storing generated files under synced folders is not recommended, and may lead to errors in the browser after running multiple builds.)

Move the web root outside of Vagrant synced folders

Earlier, the web root was modified by moving the Nginx www folder to /vagrant/www and creating a symlink pointing to the new location. Remove that symlink and create a new www folder in its place, so generated application files can be deployed to a location outside of Vagrant synced folders.

sudo rm /usr/share/nginx/www && sudo mkdir /usr/share/nginx/www

Configure app to deploy files to the web root

To configure the Brunch app to deploy files to the new location, modify the configuration file in the application root directory (e.g. /vagrant/www/todovmc/config.coffee), add the following paths directive, save the file, and rebuild the application with sudo privileges:

paths:
  public: '/usr/share/nginx/www'

cd /vagrant/www/todomvc && sudo brunch b

If done correctly, the Brunch app will now be available at the web root, or http://localhost:8080, free of errors and displaying an example application (as pictured below).

Screenshot of Brunch sample application running in Google Chrome

Looking at the page source again will show that the markup has not changed. That’s because the Brunch application is updating the DOM using JavaScript. To get a look at the actual DOM, open the Elements panel in Chrome Dev Tools or view the generated source using a bookmarklet.

Before going any further, now is a good time to get acquainted with the application stack.

Get aquainted with the application stack

Once you have the sample app up-and-running, pull up the page source once more and notice the following two external scripts:

These files contain script generated via Node.js, by way of the Brunch build system. To see where their contents come from, expand the app and vendor folders under todomvc in Sublime Text as shown.

Screenshot of the application’s app and vendor folders expanded in Sublime Text

Each of the two JS files in the page source represent all of the individual script files in each of the two directories, concatenated together as specified in config.coffee. Of the items under vendor, notice that Backbone and Underscore are included: two libraries that work well alongside jQuery (or Zepto, depending on when you read this) to produce the application structure necessary for developing modern web applications.

The stylesheets for the application are created in a similar manner, except that, unlike the script files, both the vendor and app stylesheets are combined into a single file. The behavior for CSS is determined by the following files statement in config.coffee:

'stylesheets/app.css': /^(app|vendor)/

Glance over the Brunch documentation for a better understanding of the application structure and file concatenation before making any file modifications if none of this looks familiar.

Modify an application asset: the index.html

Modern web applications aren’t all dynamic. Just like the webpages developed with Dreamweaver back in the early 2000′s, RIAs are made of the same great stuff: HTML, CSS, JS and media like images.

To add some content to the document, start Sublime’s Goto Anything feature (Ctrl+P), type ix and select the index.html file under the assets directory, as pictured, to open the file.

Screenshot of the Sublime Text Goto Anything search for the index.html asset

The contents of this file are the exact same as the corresponding file in the public directory (now deployed to the web root). But because this file is a pre-generated, static asset, it will actually overwrite the the same file in the public directory whenever a change is saved and the application is compiled.

Go ahead and change the title element of index.html, and then save the file. Then tell brunch to compile the application again using sudo brunch b from the application root.

Once rebuilt, reload the page on the localhost and notice the page title has changed.

To summarize what happened here:

Vagrant synced the index.html from Windows with the corresponding file on the VM
Utilizing Node.js, Brunch noticed the change to the filesystem, and compiled the application
The generated source was deployed to the web root directory Nginx uses
The page was reloaded in the Windows browser, and Vagrant port-forwarded the request to Nginx running on the virtual machine
Nginx served up the index.html file and generated application resources

And that’s just the beginning.

The more you know

There’s a lot more to learn about Vagrant, Backbone, and Brunch, not to mention the libraries they rely on and plug-ins available for them. As an exercise, consider reviewing the Brunch documentation and learn how to build the application sources with file minification enabled. Simple, right? Now try installing Bootstrap… (Hint: Take a look at how Chapless Brunch does it.)

Knowing what an application framework is capable of, and how to use it properly, can easily save many hours reinventing the wheel or digging out of coding anti-patterns, and can prove to be an enjoyable learning experience. In my personal experience, difficult problems can often be simplified by expanding one’s knowledge and finding a better way to do things. And I encourage others to do the same.

Summary

This article covered a series of steps which can be used for developing modern web applications on Windows. It started with a development environment configuration using Vagrant, progressed thru the steps needed for developing modern applications, and ended with some learning exercises and personal suggestions. Developing modern web applications no longer requires a Linux box or Mac OS X. So boot up that Windows machine, go forth and code.

The post Developing modern web applications on Windows with Vagrant appeared first on habdas.org.

Installing and using rupa/z

Josh Habdas — Sat, 27 Apr 2013 13:22:49 +0000

rupa/z is an amazing shell script that allows users to traverse a filesystem hierarchy in no time flat, with minimal effort. Use it if you spend any time at all changing directories in a *nix environment. It will improve productivity and spare fat fingers quite a bit of backpedaling.

z can be installed right from github by curling the raw source, making it available in path and then sourcing the file, e.g.

cd /usr/bin
sudo curl -O https://raw.github.com/rupa/z/master/z.sh
sudo chmod 775 z.sh
. /usr/bin/z.sh

Note: Add the source command (the last one) to your $HOME/.bashrc file to ensure z is available after every log-in.

Try it out by changing to a few of your most commonly used directories and then issuing the z command, e.g.

cd /usr/share/nginx/www
cd ~
z ww # or simply 'z w'

Hat tip to Paul Irish, who demoed rupa/z at Fluent 2012.

The post Installing and using rupa/z appeared first on habdas.org.

Backbone.js Extensions, Plugins, Resources

Josh Habdas — Thu, 04 Apr 2013 16:53:32 +0000

Just unearthed this handy-looking list of extensions, plugins and resources for Backbone.js and wanted to share: https://github.com/documentcloud/backbone/wiki/Extensions,-Plugins,-Resources

The post Backbone.js Extensions, Plugins, Resources appeared first on habdas.org.

SFTP to Ubuntu server with Sublime Text

Josh Habdas — Mon, 01 Apr 2013 08:10:47 +0000

About a year ago I explained how to set-up a remote project in Eclipse. Since then I’ve ditched Eclipse in favor of Sublime Text. But, even with the cat’s pajamas of modern code editors (that’s Sublime), getting source files from development to production meant carrying around some extra baggage:

A deployment process, often manual, or, if automated, tightly coupled with the application sources (zomg! oh n0s!!), must be created and followed.
At least two environments, likely not running on the same platform, must be stood-up and carried: development and production.
Windows users, who may not have a good method for developing for today’s Linux-based hosting environments, are pretty much snowed from the get-go.

I’m deliberately oversimplifying here for the sake of TL;DR, so let me get the point. If you’re running a small site, are capable of failing fast and failing often, don’t have a lot of code contributors or are for some reason stuck working on an IBM Aptiva with 16MB RAM upgrade, you can pretty much skip the pain points in the list above and just manage code directly on the web server remotely. How is that possible? Simple. SFTP to Ubuntu server with Sublime Text as explained in this article.

Gather your forces

To SFTP to Ubuntu server with Sublime Text the following needed is:

Sublime Text, of course. Google it, or or simply follow my Sublime Text amp up tutorial.
An Ubuntu micro instance with shared SSH key and Nginx running, all of which can be set-up in about 10 minutes using Amazon Web Services.
Sublime SFTP package for Sublime Text.
If you’re running Windows *sigh*, you’re also going to need PuTTy.

Please note that this article assumes use of Ubuntu Server 12.04.01 LTS and Sublime Text 2. Obviously these steps may differ slightly for alternate configurations and may not hold steady as the ground moves beneath them over time.

Choose a file transfer method, durr

For secure file transfers we’re going to use SFTP (not to be confused with FTPS, which uses FTP over TLS/SSL), although the Sublime SFTP package supports both. FTP is not a good option in general as it sends passwords unencrypted over the wire. The choice to use SFTP over FTPS was based on the following factors:

Using SFTP allows us to authenticate on the remote host using the same SSH key pair used for existing SSH connections, wereas FTPS requires passwords–though potentially encrypted over the wire–are stored unsecured in a plain text config file for use with the Sublime SFTP package.
SFTP utilizes the existing OpenSSH server pre-installed on the Ubuntu Server micro instance on AWS, whereas FTPS requires a separate tool such as vsftpd.
Based on my research FTPS is becoming antiquated and has a number of other drawbacks when compared with SFTP. So there!

Configure the server

In this section, we’ll configure the Ubuntu server by adding a new user account and allowing it to receive SSH connections, and then modify the server’s SSH configuration so that it’ll accept SFTP connections over port 22.

Create new user account for SFTP connections

While it may be possible to use an existing user account to perform SFTP, we’ll be creating a new user account specifically for SFTP connections.

Shell into the Ubuntu server using SSH as explained previously and issue the following commands in sequence, following any intermediary prompts presented, to create the new user account and add the authorized key for SSH logins:

sudo adduser sftpuser
sudo mkdir /home/sftpuser/.ssh
sudo chown sftpuser:sftpuser /home/sftpuser/.ssh
sudo cp /home/ubuntu/.ssh/authorized_keys /home/sftpuser/.ssh
sudo chown sftpuser:sftpuser /home/sftpuser/.ssh/authorized_keys

The above assumes the existing SSH-authorized user has the username ubuntu, from which we will borrow the authorized_keys file.

Confirm user account setup successful

To verify the new user account was set-up successfully, simply try shelling into it with the new username. If it works, you can skip the user account confirmations and just go hadoukening or something.

Otherwise, use the following commands to confirm things went as planned and debug common issues in creating the user account. Each command will be followed by an explanation of what it does and how to verify it worked.

ll /home/sftpuser

Lists directory contents with permissions, like ls -al. Use it to confirm the new user’s home directory has been created and that the .ssh subdirectory has the same ownership as other subdirectories within, e.g.

drwxr-xr-x 2 sftpuser sftpuser 4096 Mar 31 23:26 .ssh/

ll /home/sftpuser/.ssh/

Lists directory contents with permissions, like ls -al. Use it to confirm the new user’s .ssh subdirectory contains a file called authorized_keys, the authorized_keys file is contains the same ownership as the .ssh directory and the permissions are set properly, e.g.

-rw——- 1 sftpuser sftpuser 385 Mar 31 23:26 authorized_keys

sudo cat /home/sftpuser/.ssh/authorized_keys /home/ubuntu/.ssh/authorized_keys

Concatenates and outputs the contents of two files. Use it to confirm the authorzed_keys file under the sftpuser home directory contains the same data as the file by the same name under the ubuntu directory (based on configuration assumption, above).

sudo grep -i "sftpuser" /etc/shadow | awk -F':' '{ print $2 }'

Outputs the hash of the password for a specified user. Use it to confirm the password is set (i.e. longer than a single character) as SSH and SFTP authentication may not work without it.

Modify the SSH server configuration

I’m going to borrow some of these instructions from Ben Garrett, who admittedly borrowed them from Mark Van den Borre. I have chosen not to link the specific articles here so as not to let my readers meander into the unknown, because neither of those articles worked for this use case without further experimentation.

Backup and modify the SSH server configuration file, setting the cursor to line 76 of the file:

sudo cp /etc/ssh/sshd_config /etc/ssh/sshd_config.bak
sudo nano +76 /etc/ssh/sshd_config

Comment out the line shown below, and add the specified line below it:

#Subsystem sftp /usr/lib/openssh/sftp-server
Subsystem sftp internal-sftp

Add the following to the bottom of the file, save and exit:

# Custom for SFTP connections
Match group sftpuser
    ChrootDirectory /usr/share/nginx/www
    X11Forwarding no
    AllowTcpForwarding no
    ForceCommand internal-sftp

The above will set-up some basic security. It creates a match group set to the name of the group that was created earlier when the user account was added. It also jails users in the group to a specific chroot directory–in this case to the web root for Nginx, which can vary by system.

Once complete, restart the SSH server service to apply the configuration changes:

sudo service ssh restart

Set group permissions on the Nginx web root

The last step of the server configuration is to give the sftpuser group permissions to read, write and execute stuff within the Nginx web root directory:

sudo chgrp -R sftpuser /usr/share/nginx/www/*
sudo chmod -R 775 /usr/share/nginx/www/*

Give yourself a pat on the back if you didn’t botch this step because you weren’t reading. If the web root itself is given group write permissions, chrooted SFTP connections by users in this group will likely begin failing with the following fatal error:

Network error: Software caused connection abort

Configure Sublime SFTP

In this section, we’ll cover the Sublime SFTP configuration and integration with Sublime Text. This section assumes the server configuration above has been completed and is fully functional, and that the Sublime SFTP package has been installed in Sublime Text.

From the File drop-down menu choose SFTP/FTP > Setup Server… to open a boilerplate sftp-config.json file and make the following changes:

Set the host to your Ubuntu server’s public DNS, e.g.
"host": "ec2-54-245-25-94.us-west-2.compute.amazonaws.com",

Set the user to the user account created in the server configuration section, e.g.
"user": "sftpuser",

Set the remote path to the web root, e.g.
"remote_path": "/",

Uncomment and specify the value for the existing SSH key file, e.g.
"ssh_key_file": "C:\\Users\\Josh\\.ssh\\aws.ppk",

Once complete, save the sftp-config.json and Browse Server… to connect to and start managing your website from within Sublime Text, as pictured below.

Command Palette for SFTP in Sublime Text, with Browse Server… highlighted

If things seem to be not working correctly with the SFTP package, please visit the SFTP support page for helpful debugging information, including a flag to log debugging information.

SFTP Workflows

Once connected to the remote server using SFTP there are a number of ways to accomplish things. To learn how to sync files and folders, and upload and download from the server, check out the Sublime SFTP Workflows page.

The post SFTP to Ubuntu server with Sublime Text appeared first on habdas.org.

Host websites in the cloud in 10 minutes

Josh Habdas — Sun, 24 Mar 2013 17:08:33 +0000

Hosting companies Bluehost and Dreamhost offer simple, one-click installation of popular blogging platforms like WordPress, Drupal and Joomla. The affordable hosting plans offered are low-cost, but you tend to get what you pay for: shoddy up-time and slow server responses. What would our hero Mario do about this? I’m thinking he’d Tanooki suit up, make a mad dash and fly to the first cloud he found. And that’s what this post is all about. Read on to learn how to host a website in the cloud in 10 minutes. It may not be as simple as 1-click hosting, but it’ll almost certainly be faster. And you’ll earn some geek cred for doing something complicated to do something simple.

Getting started

To get started, create an AWS account. From there, you’ll be able to create virtual machine instances from the EC2 dashboard – just Launch Instance and follow the wizard. For my instance, I used 64-bit Ubuntu Server 12.04.1 LTS.

Once the instance is up, configure the security group to enable TCP traffic over port 22 (SSH) and port 80 (HTTP), and generate and share a SSH key pair for secure connections to the instance.

Windows users can use PuTTY to connect to the instance over SSH using the guide provided by Amazon. The method provided requires that PuTTYgen is used to convert the PEM private key format to the PPK format used by PuTTY.

Host websites in the cloud

Once the instance is created and configured to accept SSH and HTTP traffic, it can be used to run a web server so that it can receive web traffic. Follow the steps here to shell into the instance using its public DNS, and install and run a scalable web server called Nginx:

ssh -l ubuntu ec2-54-244-194-251.us-west-2.compute.amazonaws.com
sudo apt-get update
sudo apt-get install nginx
sudo service nginx start

For Amazon AMI instances, login with the username ec2-user and not ubuntu. And use yum instead of apt-get. Additionally, the command needed to start Nginx may differ by environment.

If using Windows with PuTTY to shell in, the first command above will not be necessary–though connections will still be required to authenticate with a username, as shown here:

Specifying the user to login as to PuTTY and authenticating using imported SSH key

Once authenticated and the above commands executed, you can test that the web server service started successfully by curling the localhost from the bash prompt:

curl localhost

If the web server is running, you’ll receive a response similar to the following:

Welcome to nginx!

`Welcome to nginx!`

Assuming the security groups were configured correctly, this is the same content that would be sent back to a browser if it were to hit the public DNS on port 80 (the default port for HTTP requests). Confirm this now by running the following command using the instance’s public DNS provided in the EC2 dashboard:

curl -v ec2-54-244-194-251.us-west-2.compute.amazonaws.com

The verbose flag will show some additional diagnostic information and will include the HTTP headers–useful for debugging.

If the server doesn’t respond, ensure the Ubuntu instance and Nginx are both running, and the security group has been configured to allow traffic on port 80. If you’re not able to curl the url, you can also try navigating to the public DNS using a web browser, as pictured here:

Page served by Nginx webserver running on the Amazon Web Services cloud

Personalizing the content

Now that the website is hosted and functional, the content can be personalized. To personalize the content, modify the index.html file containing the HTML being served by Nginx to say something less boring.

Note: Vim will be used for this exercise, though some users may find nano easier to wrap their heads around.

sudo vim /usr/share/nginx/www/index.html

Make some changes using the Vim cheat sheet for reference, and then save and exit Vim by pressing Esc followed by :wq and finally Enter.

So long as no caching is being done, Nginx will respond with the personalized content the next time the page is retrieved. And that’s all there is to host websites in the cloud.

Taking it to the next level

Assuming static pages are old hat, consider using Nginx to do something a tad more interesting, such as hosting a dynamic webapp using one of the Brunch.io Skeletons. Of course, to do that you’ll need to install a few more packages—and that, unfortunately, is going to take a little longer than 10 minutes.

Keep your head in the clouds

If you are using an affordable hosting solution like BlueHost or DreamHost, and looking to beef up performance and improve up-time without getting too complicated or going through too much effort, consider enabling a CDN like CloudFlare. Integrations can be set-up manually, or, in some cases, set up with a hosting company integration script. And depending on the amount of site traffic and CDN used, the service may come for free.

The post Host websites in the cloud in 10 minutes appeared first on habdas.org.

Using promises for non-ajax asynchronous callbacks in JavaScript

Josh Habdas — Tue, 19 Mar 2013 15:10:49 +0000

After recently falling prey (again) to the immediate execution of a counter-based timing function used to execute a non-Ajax asynchronous callback method in JS, I wanted to share this very useful article I stumbled upon while looking for an approach that would meet my needs: http://sporto.github.com/blog/2012/12/09/callbacks-listeners-promises/

The post Using promises for non-ajax asynchronous callbacks in JavaScript appeared first on habdas.org.

Movies on the cheap with VUDU In Home Disc to Digital

Josh Habdas — Sat, 09 Mar 2013 23:20:19 +0000

As I mentioned in late January, VUDU users now have the ability to upgrade their existing DVDs to HDX for $5 and stream them right at home. But I wanted to unpack this statement a little for those not on the Twitters and those who have not used VUDU or UltraViolet before. This information will be most useful to value-conscious consumers who already have DVD collections and are in the process of or have already purchased high-definition Internet TVs for their homes.

The value proposition

Individuals can start convert their existing DVD disc collections to 1080p HDX high-defintion digital format for a nominal fee, and stream the converted movies to their televisions and other devices using an internet connection. The current cost for conversion for DVDs is $2 per movie or $5 for a 1080p upgrade, and $2 for Blu-ray to HDX.

Moving to digital streaming unlocks some long-awaited advantages for thrifty cinephiles, including:

Ability to own 1080p HDX movies without spending a lot of extra money.
Stream movies instantly on many devices without need for an attached disc player.

Getting started

To get started you’ll need accounts with VUDU and UltraViolet; a computer with a DVD-ROM and VUDU In Home Disc to Digital (currently in beta); a 10mbps internet connection; and, for course, a credit card.

Converting movies

To convert a movie in seconds from home simply grab a disc from your video collection, feed it into a DVD-ROM and use the Disc To Digital feature of VUDU To Go app to pay for the conversion. The entire process takes only seconds, and the movie will be instantly available to stream once complete.

Screenshot showing a $5 DVD to HDX video conversion using VUDU To Go BETA

While not all movies can be converted, the amount of supported movies has been growing.

Watching movies

View movies added to the UltraViolet cloud using any compatible device or application; such as VUDU on a Smart TV, set-top box or game console, or from other UV supporting applications and devices. For more information, checkout the UV and VUDU websites.

Movies on the cheap

As the Blu-ray revolution has occurred, the price of DVDs has been driven down significantly. Consider purchasing used DVDs and then converting them with the HDX upgrade. Flea markets are a great place to find used DVDs. And the bargain bins at stores like FYE, Walmart and Best Buy are great places to look as well. According to UltraViolet, to ensure the film can be converted just search vudu.com and look for the UV icon.

The post Movies on the cheap with VUDU In Home Disc to Digital appeared first on habdas.org.

The Holy Grail of Rich Internet Applications

Josh Habdas — Tue, 26 Feb 2013 13:28:36 +0000

One of the largest perceived drawbacks to creating a SPA or other Rich Internet Application is that they’re not SEO friendly or very accessible. With the advent of technologies such as ARIA, HTML5 and Node.js, things are changing. Web apps are becoming more usable and accessible, though also making them crawlable and highly performant is a formidable challenge. To solve this problem I for one am behind Derick Bailey’s approach for using HTML5 pushState and PE to achieve SEO and accessibility. After all, the hashbang method suggested by Google has a major problem: the URLs are not semantic.

It seems as though I’m not alone in my belief that Progressive Enhancement is possible in a single-page application, and the following article by Airbnb points toward the fact that they were able to achieve PE in a RIA using a technique they’re calling The Holy Grail. Under the approach, and per my understanding, content is rendered server-side first using both the same templating logic, routes and models, served up to the user agent, and then progressively enhanced afterwards with JavaScript.

A successful quest for The Holy Grail should yield a fully-crawlable Rich Internet Application with phenomenal “time to content” that doesn’t tax crawlers with ajax and will function in most any browser, even with JavaScript disabled.

Check out the Airbnb article referenced, which depicts the Holy Grail in a linked image, and ask yourself if you’re drinking from the right cup. You must choose, but choose wisely.

The post The Holy Grail of Rich Internet Applications appeared first on habdas.org.

Amp up CoffeeScript coding with Sublime Text

Josh Habdas — Sat, 16 Feb 2013 19:41:31 +0000

Sublime Text with CoffeeScript is a JavaScript developer’s dream, but one that doesn’t evaporate in the fog of sleep shortly after waking. After learning about Sublime Text at Fluent Conf 2012 during a plenary talk by Paul Irish, I immediately began looking for ways to incorporate it into my workflow. And now, after having used it for over 8 months in my day-to-day work, I wanted to share a quick primer for those who want to amp up CoffeeScript coding with Sublime Text too.

But first thing’s first, go and download Sublime Text. The app is nagware until you purchase a license and register it, which I ended up doing after a couple of months of periodic and persistant annoyance (and, of course, once I realized how utterly awesome Sublime Text was). The licences are per-user, and not per-machine, meaning that users can purchase the app once and enjoy it on multiple machines using the same license. It almost feel’s like pirating–but it’s not.

Registered version of Sublime Text 2 running under Windows 8

In the above image we have a CoffeeScript file open, but all the code visible in the editor appears in a chilling bone white. How is that going to amp up coding speed? Simple: it’s not. So next step is to install some syntax highlighters and, while at it, some other useful packages as well.

By default, Sublime Text does not come with support for CoffeeScript.

To install the CoffeeScript syntax highlighter and other packages in Sublime Text with ease, we’re gonna need a package manager. Fortunately, there’s already one available, appropriately named Sublime Package Control. Go ahead and install that now.

With the package manager installed, use it to install the CoffeeScript package. Once installed successfully, CoffeeScript files (those ending in the .coffee extension) opened after the package is installed will begin appearing with syntax highlighting, like magic.

Sublime Text 2 showing CoffeeScript syntax highlighting

Syntax highlighting isn’t the only thing the CoffeeScript package does. It also provides a number of convenience code snippets and other facilities to help make working with CoffeeScript easy peasy. But one thing the CoffeeScript add-on for Sublime Text doesn’t do is static code analysis such as linting. However, with Sublime Package Control, adding linting capabilities for CoffeeScript, as well as many other popular languages, is as easy as a few keystrokes and the installation of the SublimeLinter. And presto! Now all you have to worry about for the most part are logic errors and workflow snafus. Unfortunately, the only known method for coping with those that I’m aware of are experience, a curious mind and constant experimentation to find what works best for you.

In summary, this primer has shown how to use a combination of tools to amp up CoffeeScript coding with Sublime Text for a better, faster and easier coding experience. The article covered installation of Sublime Text and Sublime Package Control, as well as two packages to help streamline CoffeeScript coding. Now, when the JS developer wakes up, they’ll be dreaming up the next innovative web application rather than the tools needed to build it.

Related Sublime packages to try

CoffeeCompile allows you to compile some or all of your CoffeeScript right from the editor

Other Sublime bundles worth checking out

Git enables easy code management using the Git DCVS
Stack Overflow allows quick knowledge base searches from within the editor
Stylus, LESS and Sass provide CSS preprocessor support, as needed
DocBlockr makes writing documentation a breeze

The post Amp up CoffeeScript coding with Sublime Text appeared first on habdas.org.