Skip to content

Third party software and services

Shubhangi edited this page Jul 30, 2018 · 16 revisions

This is not an exhaustive list, but these are the most important for you to know about. We rely heavily on open source code and high quality services to speed development and focus on building CodeCombat, and these tools are what inspire us to open source our own work as well: to give back to the community that has given us all this.

You don't need to learn how to use all of these tools, but please take some time to familiarize yourself with at least the ones you'll be using for the area(s) you'd like to work on.

Core Languages

  • CoffeeScript: Used throughout the site instead of JavaScript. If you're familiar with Python or Ruby then you'll feel right at home. If you're familiar with JavaScript, you'll find CoffeeScript seeks to fix many of JavaScript's faults and, we think, does a pretty good job.
  • Pug (formerly called Jade): HTML needs to be rendered on the client. Pug(Jade) files get compiled into JavaScript functions that, given a context object, returns an HTML string. All our pages are written in Pug; use it rather than other HTML generation methods like jQuery.
  • Sass: These are compiled in to CSS files and provide many nice features CSS does not have.
  • Markdown: Used for static HTML strings, such as in database text documents or incorporated in some text-heavy Pug templates (see the legal page for an example). We use Marked as our Markdown processor.

Browser-side

Site-wide Libraries

  • Backbone.js: Provides a lot of the basic structure we use. The classes they provide are subclassed and extended. Each collection in the database has a parallel Backbone Model and each page on the site has one View which can contain many more Views. The Event system is also used, though perhaps underutilized for objects other than Views.
  • Validated-Backbone-Mediator: A mediator so wide-spread classes and views can communicate with one another more easily, now with JSON Schema validation.
  • jQuery: Used largely for manipulating DOM elements. When it comes to utilities, Lo-Dash tends to be used instead.
  • jQueryUI: autocomplete and others.
  • Keymaster: Keyboard bound events.
  • Bootstrap: Used mainly for styling and its JavaScript components. Scaffolding isn't really used.
  • Moment: Formats times and dates.
  • Treema: Custom built library for editing schema-defined JSON data. Used for all editors.
  • jsondiffpatch: Adds support for showing diffs and patching JS objects.
  • i18next: Handling our i18n needs (CodeCombat is translated into 45+ languages).
  • d3: Data vis!
  • Zatanna: Manages CodeCombat-style autocomplete for the ACE editor.
  • nanoScroller.js: For when you need those scrollbars to get out of the way until you use them.
  • Modernizr: Helps with browser feature detection and fallbacks.
  • Flying Focus: Makes it easier to see what your browser focus is doing.
  • Lo-Dash and Underscore.String: Great utility libraries.
  • TV4: JSON-Schema validation. Whole other article on this subject.

Gameplay Libraries and Services

  • CreateJS: A suite of four libraries, all of which are used extensively for animation, tweening, sound and loading resources. It has its own internal event system, so that's used in lieu of Backbone events when required.
  • ACE: The code editor in game, and also used when editing code everywhere else on the site.
  • Box2D: Physics engine.
  • Aether: Custom built library for running and deeply analyzing code. Used in gameplay to show things like what code is running at any given frame or where the code breaks and why. Transpiles multiple programming languages to JavaScript.
  • Firebase: Service that synchronizes data between multiple clients. Used for synchronizing gameplay data when multiple people are playing on the same level. We also plan to use it for other inter-player communications, like chatting with friends or inviting other players to join in a campaign.
  • Firepad: Collaborative text-editor built on top of Firebase, used in CodeCombat's code editor.

Other tools

  • Jasmine: Used for testing.
  • BrowserStack: Used for browser compatibility testing and Nightwatch automation.
  • Karma: Test runner.
  • webpack: Assembles the project, and is pretty much central to everything development.
  • Discourse: Actually good forum software. CodeCombat is blessed by Jeff Atwood and Discourse.
  • SETT: High-engagement blogging software. Good for startup blogging.
  • Dexecure: Automatically lowers users’ bandwidth demands for images and CSS files.
Clone this wiki locally