ralis.net  

Web development news for the 39th week of 2011:

JavaScript

JavaScript Weekly, Issue #46 – September 30, 2011

Google releases a JS test framework built on V8, JavaScript console tutorial video by Paul Irish, check out JSNES (an impressive nintendo emulator), …

General

Nicholas Zackas talks about the web standards process and how they are failing us: When Web Standards Fail Us.

HTML 5

HTML 5 Weekly, Issue #6 – September 28, 2011

FireFox 7 released and is a big improvement over 6, Paul Irish discusses browser version pollution, Drag and drop editing, …

Other

Sorry for the late posting, I replaced my harddrive with an SSD and managed to misconfigure the permissions of my blogging virtualhost directory. The final article in the Continuous Deployment series is nearly done and I am outlining an article about setting your development environment up for easily working on multiple computers.

Web development news for the 40th week of 2011:

JavaScript

JavaScript Weekly, Issue #47 – October 7, 2011

Future proofing your JavaScript application, Cross-Origin resource sharing, the Zynga Scroller (a rendering and event framework) …

Mootools has release version 1.4.1, fixing a few bugs from its last release.

General

Another great article by Nicholas Zackas, explaining how to use HTML comments for Simple, Maintanable Templating with JavaScript.

HTML 5

HTML 5 Weekly, Issue #7 – October 5, 2011

FireFox has released Aurora 9 (planned to be FireFox 9), Chrome to take over the #2 browser position, optimizing for mobile performance, updating your favicon in real time, the IE 6 song, …

Web development news for the 41st week of 2011:

JavaScript

JavaScript Weekly, Issue #48 – October 14, 2011

JavaScript++ is a new language derived from JavaScript (plus a bit more), a special roundup of Dart resources, Isogenic Engine is modern Web-based MMO game engine built in JavaScript and HTML 5, …

HTML 5

HTML 5 Weekly, Issue #8 – October 12, 2011

FireFox has released an android tablet focues version, HTTP Strict Tranport Security (HSTS), Joe Hewitt looks at some tricks with iOS’s webkit to improve animation, …

Web development news for the 46th week of 2011:

JavaScript

JavaScript Weekly, Issue #53 – November 18th, 2011

Learn about techniques to build better Third Party JavaScript, understand why or Why Not AMD (Asynchronous Module Definition), BicaVM is a proof of concept Java Virtual Machine, Written in JavaScript, …

HTML 5

HTML 5 Weekly, Issue #13 – November 16th, 2011

Mozilla announces insertAdjacentHTML() Enables Faster HTML Snippet Injection in FireFox 8, Mozilla’s Draft ‘Web Joystick API’ for those of use who want to build better web games, Google Swiffy: Convert Flash SWFs to HTML5, …

Web Development

Another great article by Nicholas Zakas, discussing how to setup multi user apache on an EC2 machine.

General

Sorry, for the date mixup in your RSS readers. I fixed a bunch of titles and in doing say caused most readers to think that it was new content. Anyway, I will try to be more diligent about mistakes like that in the future.

Also, I have been working on rewriting the blog in Python/Django. I expect some small changes over the next couple months. My plan is to continue to be backwards compatible with the current schema, but I will be moving the blog to blog.mattsnider.com with permanent redirects from the root domain.

Web development news for the 42nd week of 2011:

JavaScript

JavaScript Weekly, Issue #49 – October 21, 2011

A new release of JavaScriptMVC, a good screencast for building a backbone driven application, the next version of jQuery is coming soon, …

Nicholas C. Zakas reposts an article originally by Hans Brough, So You Want to Write JavaScript for a Living Repost. The title says it all.

HTML 5

HTML 5 Weekly, Issue #9 – October 19, 2011

Google maps offers a WebGL-powered option, Maximiliano Firtman presents an overview of Safari on iOS 5, best-practices cheat sheet for designing web forms, …

Other

PPK of Quirksmode consolidates public information on Apple’s pattern of business cycles. While not web development exactly, I found it to be an interesting read: Apples Cycles.

Web development news for the 43rd week of 2011:

JavaScript

JavaScript Weekly, Issue #50 – October 28, 2011

A free performance ebook when you signup for New Relic, David Flanagan on HTML parsing with JavaScript, Douglas Crockford on JavaScript Programming Style and Your Brain, …

HTML 5

HTML 5 Weekly, Issue #10 – October 26, 2011

Kindle Format 8 To Introduce HTML5 Support in E-Books, Opera Adds getUserMedia and Native Pages Support, 10 Essential Differences Between HTML4 and HTML5, What Feature Would Improve the Web? survey results, …

Other

Microsoft explains the best practices way to modify vendor prefixed CSS properties using JavaScript, A Best Practice for Programming with Vendor Prefixes.

Web development news for the 44th week of 2011:

JavaScript

JavaScript Weekly, Issue #51 – November 4th, 2011

Examples for making your JavaScript more terse, an explaination of the WebKit JavaScript implementation, a fun tool to pimp your JavaScript, …

Part of the 1.7 jQuery released last week is the beginning of project to slim down the project by removing unused, confusing, or bulky features from the project’s core. Hopefully, some of those features will live as plugins, but it may not be necessary. Anyway, the original article by jQuery is building a slimmer jQuery.

For those of us who have ever tried to build expanding textareas, you will know how quirky it can be. Neil Jenkins attempts to explain how to make expanding text areas elegantly in his A List Apart article.

HTML 5

HTML 5 Weekly, Issue #11 – November 2, 2011

Say goodbye to the <time> and hello to the <data> element, description of Mozilla’s efforts to make it’s JavaScript engine (SpiderMonkey) use less memory, how to implement a 3D engine in HTML5, …

Web development news for the 45th week of 2011:

JavaScript

JavaScript Weekly, Issue #52 – November 11th, 2011

Adobe Turns Away from Mobile Flash to Focus on HTML5, Michael Woloszynowicz explains why You Don’t Know JavaScript, Microsoft and Joyent Deliver ‘First Stable Build’ of Node.js on Windows, …

HTML 5

HTML 5 Weekly, Issue #12 – November 7, 2011

After Developer Backlash, HTML5 Gets Its ‘Time’ Element Back, CSS3 Secrets: 10 Things You Might Not Know About CSS3, Will HTML5 Replace Native Apps? Here’s How to Figure Out When, …

Web development news for the 44th week of 2011:

JavaScript

JavaScript Weekly, Issue #51 – November 4th, 2011

Examples for making your JavaScript more terse, an explaination of the WebKit JavaScript implementation, a fun tool to pimp your JavaScript, …

Part of the 1.7 jQuery released last week is the beginning of project to slim down the project by removing unused, confusing, or bulky features from the project’s core. Hopefully, some of those features will live as plugins, but it may not be necessary. Anyway, the original article by jQuery is building a slimmer jQuery.

For those of us who have ever tried to build expanding textareas, you will know how quirky it can be. Neil Jenkins attempts to explain how to make expanding text areas elegantly in his A List Apart article.

HTML 5

HTML 5 Weekly, Issue #11 – November 2, 2011

Say goodbye to the <time> and hello to the <data> element, description of Mozilla’s efforts to make it’s JavaScript engine (SpiderMonkey) use less memory, how to implement a 3D engine in HTML5, …

This article finishes the series on building a continuous deployment environment using Python and Django.

• Starting Your First Django Project
• Testing and Django
• Mock and Coverage
• Using Fabric for Painless Scripting
• Using Celery for Asynchronous Processes
• Deployment/Monitoring Strategies

If you have been following along, hopefully you’re already on your way to building a continuous deployment environment. The final touch is to setup a deployment and monitoring strategy. You can use a variety of services for this, such as Hudson, Continuum, CruiseControl, etc. At Votizen.com we decided to use CruiseControl, but regardless of the service used, it should manage your deployment process, complain loudly when deployment fails, and regularly monitor the health of your servers.

Getting ready

This article will discuss how I setup CruiseControl (CC) at Votizen. CC will require JAVA 1.6, so make sure you have it installed before you start. Begin by installing CC from http://cruisecontrol.sourceforge.net/ (this example will install it to your home directory, but it can be installed whereever you like it):

cd ~
wget DIRECT_LINK_HERE  cruisecontrol-bin-2.8.4.zip
unzip cruisecontrol*.zip
rm cruisecontrol*.zip
ln -s ~/cruisecontrol-bin-2.8.4 ~/cruisecontrol

CC has really good remote monitoring for CSV and SVN, but for GIT it requires a local clone of a repository to monitor for chanages. Clone your repository into the CC projects directory:

cd ~/cruisecontrol/projects/
git clone {YOUR_REPOSITORY_HERE}

Use whatever service manager you like. If you like init.d, here is the script Votizen uses CruiseControl Init.d. Put it in /etc/init.d/:

sudo cp {PATH_TO_SCRIPT} /etc/init.d/cruisecontrol
sudo chmod a+x /etc/init.d/cruisecontrol

Lastly, if ‘java’ on your machine doesn’t point to JAVA 1.6, then replace java $CC_OPTS with {PATH_TO_JAVA}/java $CC_OPTS in ~/cruisecontrol/cruisecontrol.sh. Now, you can start, stop, and restart CC with the installed init.d command:

sudo /etc/init.d/cruisecontrol start
sudo /etc/init.d/cruisecontrol stop
sudo /etc/init.d/cruisecontrol restart

How to do it…

Once you have the CC environment setup, you need to configure it for your projet. Here is a sample configuration ~/cruisecontrol/config.xml:

<cruisecontrol>
    <property name="buildmaster.email" value="{YOUR_EMAIL}"/>
    <property name="buildmaster.name" value="{YOUR_NAME}"/>
    <property name="buildmaster.returnaddress" value="{YOUR_EMAIL}"/>

    <property name="mail.host" value="{YOUR_HOST_NAME}"/>
    <property name="mail.name" value="{YOUR_USER_NAME}"/>
    <property name="mail.pass" value="{YOUR_PASSWORD}"/>

	<property name="pathToProject" value="projects/{YOUR_REPO_NAME}" />

	<project name="{PROJECT_NAME}" buildafterfailed="false">

		<property name="run_scripts" value="${pathToProject}/cruisecontrol/{PROJECT_NAME}.xml"/>

		 <listeners>
			<currentbuildstatuslistener file="logs/${project.name}/buildstatus.txt"/>
		 </listeners>

		<!-- Bootstrappers are run every time the build runs,
			*before* the modification checks -->
		<bootstrappers>
			<antbootstrapper anthome="apache-ant-1.7.0" buildfile="${run_scripts}" target="clean" />
		</bootstrappers>

		<!-- Defines where cruise looks for changes, to decide whether to run the build -->
		<modificationset quietperiod="30">
			<git LocalWorkingCopy="${pathToProject}"/>
		</modificationset>

		<!-- Configures the actual build loop, how often and which build file/target -->
		<schedule interval="300">
			<exec workingdir="${pathToProject}/cruisecontrol/" command="./deploy.sh" timeout="600" />
		</schedule>

		<!-- directory to write build logs to -->
		<log dir="logs/${project.name}"/>

		<!-- Publishers are run *after* a build completes -->
		<publishers>
            <htmlemail returnaddress="${buildmaster.returnaddress}"
                mailhost="${mail.host}"
                username="${mail.name}"
                password="${mail.pass}"
                usessl="True"
                subjectprefix="[CruiseControl]">
                <always address="${buildmaster.email}"/>
				<failure address="${buildmaster.email}"/>
			</htmlemail>
		</publishers>
	</project>

	<project name="monitorStatus" buildafterfailed="true">
		 <listeners>
			<currentbuildstatuslistener file="logs/${project.name}/buildstatus.txt"/>
		 </listeners>

		<!-- Defines where cruise looks for changes, to decide whether to run the build -->
		<modificationset quietperiod="30">
			<alwaysbuild/>
		</modificationset>

		<!-- Configures the actual build loop, how often and which build file/target -->
		<schedule interval="300">
			<exec workingdir="${pathToProject}/cruisecontrol/" command="./monitorServer.sh" timeout="20" />
		</schedule>

		<!-- directory to write build logs to -->
		<log dir="logs/${project.name}"/>

		<!-- Publishers are run *after* a build completes -->
		<publishers>
            <htmlemail returnaddress="${buildmaster.returnaddress}"
                mailhost="${mail.host}"
                username="${mail.name}"
                password="${mail.pass}"
                usessl="True"
                subjectprefix="[CruiseControl]">
                <always address="${buildmaster.email}"/>
				<failure address="${buildmaster.email}"/>
			</htmlemail>
		</publishers>

	</project>

	<project name="pollGit" buildafterfailed="true">
		 <listeners>
			<currentbuildstatuslistener file="logs/${project.name}/buildstatus.txt"/>
		 </listeners>

		<!-- Defines where cruise looks for changes, to decide whether to run the build -->
		<modificationset quietperiod="30">
			<alwaysbuild/>
		</modificationset>

		<!-- Configures the actual build loop, how often and which build file/target -->
		<schedule interval="300">
			<exec workingdir="${pathToProject}/cruisecontrol/" command="./updateGitRepos.sh" timeout="60" />
		</schedule>

		<!-- directory to write build logs to -->
		<log dir="logs/${project.name}"/>

	</project>

</cruisecontrol>

Replace all the {UPPER_CASE} values with your own. The values prefaced with a $ are variables that will be used by CC. In your project’s repository create a cruisecontrol/ directory and add the following files:

deploy.sh
monitorServer.sh
updateGitRepos.sh

If any of the shell scripts print to stderr, then CC will treat it as a failure, otherwise it will be considered successful.

Here is a simple monitorServer.sh that executes a fab script for monitoring the web server and related services (assumes there is a fabfile.py with a monitor_server task defined in the root of your repo):

#!/bin/bash
cd ../ && fab prod monitor_server

Here is a simple updateGitRepos.sh that simply updates the clone of your git repo:

#!/bin/bash
cd ../ && git pull origin master

Here is a simple deploy.sh that deploys your project:

#!/bin/bash
cd ../ && fab prod deploy

Make sure all the files have +x permissions.

How it works…

When CC starts it parses the config.xml file and determines the projects to monitor. The modificationset tag determines when the CC project task should execute. Two of the projects in the XML above use the alwaysbuild directive and one the git directive, which points to the local git clone and monitors for changes. The schedule tag indicates the frequency that the modificationset should be evaluated and what to do when the modificationset returns true. The exec comman can be used inside the schedule tag to run a shell script. The publishers tag is used to indicate who should be notified of failures and success. The remaining tags are used internally by CC and shouldn’t be modified, unless you know what you are doing.

A complete list of all the tags is available at the Configuration Reference.

The cruisecontrol directory added to the main repo, makes maintaining CC for that project easy and under version control. Additionally, it creates a template that is easy to clone for additional projects. I use fabric to do any real scripting, but you could use bash or any other scripting tool to monitor and deploy servers.

Running CC with this configuration causes CC to do three things every five minutes: pull from the repo to keep the local clone up-to-date, check the local repo for changes and deploy when a change is detected, and execute a script that monitors the servers for errors/problems.

The monitoring strategy Votizen uses is to expose a protected web URL that prints out each service and its status. This task hits that URL and fails if failed appears anywhere on that webpage. Ultimately, you will want to monitor logs for errors, and this task could be improved for that, or you could use another service like sentry.

That wraps up our discussion on using CC to deploy a project. I hope this was not too confusing. Leave comments below, if you have questions.

There’s more…

There is a great tool, CCMenu, that is available for most operating systems making the monitoring of CC even easier. I use this exclusively to keep track of status of my servers.

Here are some useful links:

• Cruise Control Homepage
• Configuration Reference
• CC Menu