{"id":34730922,"url":"https://github.com/tgaff/js-teaching-style-guide","last_synced_at":"2026-04-01T22:39:32.741Z","repository":{"id":149220523,"uuid":"53764806","full_name":"tgaff/js-teaching-style-guide","owner":"tgaff","description":null,"archived":false,"fork":false,"pushed_at":"2016-03-14T18:52:11.000Z","size":6,"stargazers_count":0,"open_issues_count":0,"forks_count":2,"subscribers_count":0,"default_branch":"master","last_synced_at":"2026-03-27T23:42:07.791Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tgaff.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2016-03-13T03:01:40.000Z","updated_at":"2016-03-14T06:29:44.000Z","dependencies_parsed_at":null,"dependency_job_id":"f2f138eb-5b41-4e89-bf7f-d45b6c6d80a7","html_url":"https://github.com/tgaff/js-teaching-style-guide","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/tgaff/js-teaching-style-guide","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tgaff%2Fjs-teaching-style-guide","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tgaff%2Fjs-teaching-style-guide/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tgaff%2Fjs-teaching-style-guide/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tgaff%2Fjs-teaching-style-guide/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tgaff","download_url":"https://codeload.github.com/tgaff/js-teaching-style-guide/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tgaff%2Fjs-teaching-style-guide/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31292684,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-01T21:15:39.731Z","status":"ssl_error","status_checked_at":"2026-04-01T21:15:34.046Z","response_time":53,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-12-25T02:57:18.811Z","updated_at":"2026-04-01T22:39:32.720Z","avatar_url":"https://github.com/tgaff.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# Javascript and introduction to web development style-guide\n\n## Why?\nThere are style-guides already available for JavaScript and indeed, at least 3 tools for linting and verifying styles.  Why do we need another?\n\nThis styleguide is different in that it is focused on teaching \u0026 learning JS, starting with front-end JavaScript and CSS and eventually teaching jQuery, Node, Express and friends. When we teach we generally increase complexity over time. This guide aims to set guidelines to ensure that syntax across lessons is the same, while slowly introducing additional syntactical complexity.\n\n**tldr; This style-guide is intended to make learning easier for students new to JavaScript by increasing syntactical complexity slowly, over time.**\n\n\n\n## CSS\n\n#### Use two-spaces for indentation\n\n```css\n/* avoid tabs */\n.ridiculously-huge {\n\tfont-size: 100px;\n}\n\n/* recommended */\n.ridiculously-huge {\n  font-size: 100px;\n}\n```\n\n## Introductory JS\n\n\u003ca name=\"use-triple-equals\"\u003e\u003c/a\u003e\n#### Choose `===` and `!==` over `==` and `!=`. \u003csup\u003e[[link](#use-triple-equals)]\u003c/sup\u003e\n\n#### Use braces around any multi-line blocks.\n\n```js\n// avoid\nif (test)\n  return false;\n\n// recommended - single line\nif (test) return false;\n\n// recommended - multi-line\nif (test) {\n  return false;\n}\n```\n\n#### Use literal array syntax for array creation\n\n```js\n// avoid\nvar stuff = new Array();\n\n// recommended\nvar items = [];\n```\n\n#### Use array.push rather than index access\n\n```js\n// avoid\nsomeStuff[someStuff.length] = 'new todo';\n\n// recommended\nsomeStuff.push('new todo');\n```\n\n#### When returning multiple values use object destructuring, not arrays\n\n* It's safer if the return values are ever extended.\n* Avoids mistakes in handling return value order.\n\n```js\n// avoid\nfunction processInput(input) {\n  // ...\n  return [strangeness, spin, charm];\n}\n\n// recommended\nfunction processInput(input) {\n  // ...\n  return { strangeness: strangeness,\n           spin: spin,\n           charm: charm };\n}\n```\n\n#### Limit lines to around 100 characters and use multi-line String concatenation with +\n\nStrings that cause the line to exceed ~100 characters should be concatenated across multiple lines.\n\n```js\n// avoid\nvar html = '\u003col\u003e\u003cli\u003eOf shoes\u003c/li\u003e\u003cli\u003eand ships\u003c/li\u003e\u003cli\u003eand sealing-wax\u003c/li\u003e\u003cli\u003eOf cabbages\u003c/li\u003e\u003cli\u003eand kings\u003c/li\u003e\u003c/ol\u003e'; // Lewis Carroll\n\n// less bad\nvar html = '\u003col\u003e \\\n              \u003cli\u003eOf shoes\u003c/li\u003e \\\n              \u003cli\u003eand ships\u003c/li\u003e \\\n              \u003cli\u003eand sealing-wax\u003c/li\u003e \\\n              \u003cli\u003eOf cabbages\u003c/li\u003e \\\n              \u003cli\u003eand kings\u003c/li\u003e \\\n              \u003c/ol\u003e'; // Lewis Carroll\n\n\n// recommended\nvar html = '\u003col\u003e' +\n              '\u003cli\u003eOf shoes\u003c/li\u003e' +\n              '\u003cli\u003eand ships\u003c/li\u003e' +\n              '\u003cli\u003eand sealing-wax\u003c/li\u003e' +\n              '\u003cli\u003eOf cabbages\u003c/li\u003e' +\n              '\u003cli\u003eand kings\u003c/li\u003e' +\n            '\u003c/ol\u003e'; // Lewis Carroll\n```\n\n\n### Whitespace\n\n#### Use soft tabs set to 2 spaces.\n\n#### Use one-space before a leading brace.\n```js\n// avoid\nfunction yay(){\n  console.log('yay');\n}\n\n// recommended\nfunction yay() {\n  console.log('yay');\n}\n```\n\n#### Place 1 space before the opening parenthesis in control statements (if, while etc.).\n\n```js\n// avoid\nif(x === y) {\n  return x;\n}\n\n// recommended\nif (x === y) {\n  return x;\n}\n```\n\n#### Use spaces around operators\n\n```js\n// avoid\na=b+c-(d/2);\n\n// recommended\na = b + c - (d / 2);\n```\n\n#### Place no space between the argument list and the function name in function calls and declarations.\n\n```js\n// avoid\nfunction addNumbers( a, b ) { ... }\n\n// recommended\nfunction addNumbers(a,b) { ... }\n```\n\nfunction calls:\n\n```js\n// avoid\nvar addedNumbers = addNumbers( 1, x );\n\n// recommended\nvar addedNumbers = addNumbers(1, x);\n```\n\n##### When using anonymous functions a space is OK\n\n```js\n// OK\nvar saute = function () { ... };\n\n// also OK\nvar saute = function() { ... };\n```\n\n#### Use one space after a comment marker and indent multiple lines\n\n```js\n// avoid\n//my comment with no space\n\n// avoid\n/* This is a comment that doesn't\nuse indentation when continuing a sentence. */\n\n// recommended\n// my comment with a space\n\n/* This is a comment that does\n     use indentation when continuing a sentence. */\n```\n\n\n#### Use leading-dots and indentation when making long method chains.\n\n```js\n// avoid\n$('#items').\n  find('.selected').\n    highlight().\n    end().\n  find('.open').\n    updateCount();\n\n// recommended\n$('#items')\n  .find('.selected')\n    .highlight()\n    .end()\n  .find('.open')\n    .updateCount();\n\n```\n\n\u003e Example lifted from airbnb style-guide.\n\n\n\n\n\n\n\n### Functions\n\n#### Prefer named functions over anonymous functions\n\n\u003e This rule is particularly important in the first 2-3 weeks of the course.  However, we should eventually introduce and use anonymous functions.\n\n```js\n// avoid\n$.get(url).success(function(result) {\n  console.log(result);\n});\n\n// recommended\n$.get(url).success(handleIndexResult(result));\n\n// sometimes OK\n$.get(url).success(function handleIndexResult(result) {\n  console.log(result);\n});\n\n```\n\n#### Use function declarations instead of function expressions. jscs: requireFunctionDeclarations\n\n* Function declarations are fully hoisted.\n\n```js\n// bad\nvar boilPasta = function () {\n};\n\n// recommended\nfunction boilPasta() {\n}\n```\n\n#### Never declare a function in a non-function block (if, while, etc). Assign the function to a variable instead.\n\n\n#### Never name a parameter `arguments`.\n\n* It overrides the arguments object the function receives.\n\n```js\n// avoid\nfunction nope(name, options, arguments) {\n  // ...stuff...\n}\n\n// recommended\nfunction yup(name, options, args) {\n  // ...stuff...\n}\n```\n\n\u003e lifted from airbnb\n\n#### Classes or objects that will be `new`ed should use Dromedary Case\n\n```js\n// avoid\nfunction cat() {\n  this.sound = 'meow';\n}\n\nvar kitten = new cat;\n\n// recommended\nfunction Cat() {\n}\n\nvar kitten = new Cat;\n```\n\n## jQuery\n\n### Big over-arching example:\n\u003csup\u003eThanks Justin\u003c/sup\u003e\n\n```js\n// Using the core $.ajax() method\n$.ajax({\n\n    // The URL for the request\n    url: \"post.php\",\n\n    // The data to send (will be converted to a query string)\n    data: {\n        id: 123\n    },\n\n    // Whether this is a POST or GET request\n    type: \"GET\",\n\n    // The type of data we expect back\n    dataType : \"json\",\n\n    // Code to run if the request succeeds;\n    // the response is passed to the function\n    success: onSuccess,\n\n    // Code to run if the request fails; the raw request and\n    // status codes are passed to the function\n    error: onError,\n\n    // Code to run regardless of success or failure\n    complete: onComplete\n});\n\nfunction onSuccess( json ) {\n    $(\"\u003ch1\u003e\").text(json.title).appendTo(\"body\");\n    $(\"\u003cdiv class=\\\"content\\\"\u003e\").html(json.html).appendTo(\"body\");\n}\n\nfunction onError(xhr, status, errorThrown) {\n    alert(\"Sorry, there was a problem!\");\n    console.log(\"Error: \" + errorThrown);\n    console.log(\"Status: \" + status);\n    console.dir(xhr);\n}\n\nfunction onComplete( xhr, status ) {\n    alert(\"The request is complete!\");\n}\n```\n\n#### Use long form `$.ajax` over `$.get` and `$.post`\n\n* This makes the syntax identical for the more difficult PUT and DELETE operations.\n* Eventually students will discover the short-cut methods on their own; we should allow them to use them at that point.\n\n```js\n// avoid\n$.get(\"http://pokemon.com/api/pokemon\").success(renderPokemonList(json));\n\n// recommended\n$.ajax({\n    url: \"http://pokemon.com/api/pokemon\",\n    type: \"GET\",\n    dataType : \"json\",\n    success: renderPokemonList,\n    error: handlePokemonIndexError,\n});\n\nfunction renderPokemonList(json) { ... }\n```\n\n#### Use named, out-of-line functions for jQuery callbacks; introduce anonymous functions later.\n\n* In-line function definitions are hard to read and hard for students to find syntax errors around.\n* See above rule on anonymous functions as well.\n\n```js\n// avoid\n$.ajax({\n    url: \"http://pizza.com/api/toppings\",\n    type: \"GET\",\n\n  \t // named in-line function (avoid)\n    success: function populateToppingsList(data) {\n    \t// possibly many lines of code\n    \t// possibly many lines of code\n    },\n\n    // anonymous in-line function (avoid)\n    error: function(xhr, status, errorThrown) {\n      // possibly many lines of code\n      // possibly many lines of code\n    },\n});\n\n\n// recommended\nfunction populateToppingsList(data) {\n  // many lines of code\n}\n\nfunction handleToppingsError(xhr, status, errorThrown) {\n  // many lines of code\n}\n\n$.ajax({\n    url: \"http://pizza.com/api/toppings\",\n    type: \"GET\",\n    success: populateToppingsList,\n    error: handleToppingsError,\n});\n```\n\n\n## File Organization\n\n\u003c!--\n#### Separate assets into directories `scripts`, `styles`\n--\u003e\n#### Name the initial client-side JS file `app.js`\n\n### Node file organization\n\nMain example:\n\u003cpre\u003e\n.\n├── server.js\n├── config\n│   └── routes.js\n├── controllers\n│   └── quotesController.js\n├── models\n│   ├── index.js\n│   └── quote.js\n├── package.json\n├── public\n│   └── css\n│       └── style.css\n│   └── js\n│       └── app.js\n└── views\n    ├── partials\n    │   ├── footer.hbs\n    │   ├── head.hbs\n    │   └── header.hbs\n    └── quotes\n        ├── index.hbs\n        └── new.hbs\n\u003c/pre\u003e\n\n#### Start with all server-side code in `server.js`\n\n\n##### Later separate code into `server.js`, `config/*`, `controllers/*`, `models/*`\n\n* This follows GA-global curriculum except we use `server.js` instead of `app.js` (which we reserve for the client).\n\n\u003cpre\u003e\n.\n├── server.js\n├── config\n│   └── routes.js\n└── models\n    ├── index.js\n    └── quote.js\n\u003c/pre\u003e\n\n##### Use index.js in each directory\n* promote use of the module pattern\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftgaff%2Fjs-teaching-style-guide","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftgaff%2Fjs-teaching-style-guide","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftgaff%2Fjs-teaching-style-guide/lists"}