Loose Bits

Node.js in Production

Curiosity Media runs the world’s largest Spanish learning website, SpanishDict.com, backed by many different Node.js applications. Since rolling out our first Node.js applications over a year ago, we have collected a fair amount of good and bad operational experiences.

I created a talk about our journey with Node.js for the Seattle Node.js Meetup group’s May 8th, 2013 event. My slides are available at the following locations:

• GitHub Site: A live, navigable reveal.js website. (Note: use the space bar to advance slides and arrow keys to navigate.)
• SlideShare: More traditional format, with download (PDF) links.

And, here’s an embedded format:

Bringing Bootswatch to Sphinx

The Bootstrap Theme for Sphinx documentation continues to evolve, and I’m pleased to announce the v0.2.0 release. The theme integrates Twitter’s Bootstrap library into Sphinx, and v0.2.0 adds new support for Bootswatch CSS extensions, which provide a lot of great new UI possibilities for your documentation. We’ve also internally updated to Bootstrap 2.3.1.

The project’s demonstration site now uses the ”united” Bootswatch theme to give a clean and well… orange-ish feel to the site. Here is a screenshot of the demonstration site in a desktop viewport:

The project is available for download from GitHub and PyPi. You are encouraged to update and try out some Bootswatch goodness!

Sphinx Bootstrap Theme

The Sphinx Bootstrap Theme is an extension for the Sphinx documentation tool, used for Python-based API documentation and static website authoring. The theme integrates Twitter Bootstrap, which is a wildly popular frontend framework. The theme GitHub project provides a demonstration site using the theme.

The theme project continues to move along, and as it has been a while since my last update post, here are some of the changes in version 0.1.6 (since 0.1.0):

• Update to Bootstrap v2.3.0.
• Enable configuration of the depth of the Global TOC (“Site” tab).
• Add footer divider and various other styling tweaks.
• Add Bootstrap styling for tables and inline code snippets

In addition, much of the underlying rendering JavaScript code has been revised. For example, Twitter Bootstrap v2.3.0 handles behavior like dropdown menu clicks in mobile much better than previous versions, enabling removal of some hacks and patches in the theme.

Sphinx Bootstrap Theme Updates!

Almost a year ago, I created the Sphinx Bootstrap Theme project to bring together two of my favorite open source technologies - Sphinx and Twitter Bootstrap. Sphinx is a widely-used Python-based authoring tool for creating static websites and API documentation. Twitter Bootstrap is a frontend JavaScript / CSS framework that offers a consistent UI experience, typography, grid systems, navigation / button / other components, and responsive features for mobile design.

Since its introduction, I now use Sphinx with the Bootstrap Theme for my open source Python projects and we use the theme for all internal technical documentation at work. Coming up on the project’s anniversary, it seemed appropriate to add some tweaks and enhancements to increase the usability and extensibility of the theme.

Improvements now available in version 0.1.0 include:

• Upgraded the Bootstrap libraries to version 2.2.1.
• Added new theme options to control UI appearance and behavior.
• Navigation bar menus now have hierarchical sub-menus for a more intuitive experience.
• Reworked the underlying layout code to support fully responsive design, allowing any site to look great on mobile devices like an iPhone or iPad.
• Created a PyPI package to permit installation via pip install sphinx_bootstrap_theme.

So let’s see how everything looks and works with the new v0.1.0 theme.

Theme Options

The theme has several new options that you can set in the “conf.py” configuration file.

Bootstrap Theme Demo Site

Let’s start with the Bootstrap Theme’s own demonstration website.

AMD/RequireJS

The Asynchronous Module Definition (AMD) provides a framework for predictable loading of JavaScript modules and dependencies. AMD is an extension of (and possible transport for) the CommonJS specification.

The RequireJS library implements AMD with loading, bundling and other functionality. It brings sensible imports (with define and require) to frontend JavaScript, instead of the usual array of script includes into the global namespace. Interestingly, as Node.js implements CommonJS-style require’s, there are also support modules to bring Node.js code under AMD.

Take both of things together and we have the real potential for shared JavaScript code across the browser and server. As we use this exact approach at work for our new Backbone.js frontend / Express Node.js backend web application, I created a short talk that I presented at the November 11, 2012 Node.DC meetup, entitled “Shared Code with AMD/RequireJS”.