{"id":16532029,"url":"https://github.com/shama/letswritecode","last_synced_at":"2025-05-16T06:00:22.451Z","repository":{"id":30271253,"uuid":"33822705","full_name":"shama/letswritecode","owner":"shama","description":":mortar_board: code examples for Let's Write Code","archived":false,"fork":false,"pushed_at":"2022-01-22T20:03:30.000Z","size":691,"stargazers_count":803,"open_issues_count":15,"forks_count":760,"subscribers_count":72,"default_branch":"master","last_synced_at":"2024-10-19T03:59:35.295Z","etag":null,"topics":["education","javascript","video"],"latest_commit_sha":null,"homepage":"https://www.youtube.com/user/kylerobinsonyoung","language":"JavaScript","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/shama.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}},"created_at":"2015-04-12T15:43:04.000Z","updated_at":"2024-10-04T11:39:50.000Z","dependencies_parsed_at":"2022-08-07T15:01:37.656Z","dependency_job_id":null,"html_url":"https://github.com/shama/letswritecode","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shama%2Fletswritecode","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shama%2Fletswritecode/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shama%2Fletswritecode/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shama%2Fletswritecode/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/shama","download_url":"https://codeload.github.com/shama/letswritecode/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254478160,"owners_count":22077675,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["education","javascript","video"],"created_at":"2024-10-11T18:11:29.161Z","updated_at":"2025-05-16T06:00:22.291Z","avatar_url":"https://github.com/shama.png","language":"JavaScript","readme":"# Let's Write Code\n\nAll the code examples for the youtube series\n[Let's Write Code](https://www.youtube.com/user/kylerobinsonyoung)\n\n## Ideas?\nIf you have any screencast you'd like to see or suggestions, please\n[open an issue here](https://github.com/shama/letswritecode/issues). Thanks!\n\n## Dev Setup\nThroughout these videos I typically use the same development environment. This\nis a guide through that development setup.\n\n### Dependencies\nRather than copying / pasting script tags into my HTML for 3rd party code, I use\n[npm](https://www.npmjs.com/). The `npm` command comes with Node.js. When I run\n`npm install jquery`, it downloads the 3rd party files into the `node_modules/jquery/`\nfolder.\n\nThe `package.json` file can hold those dependencies and versions, so the next\ntime you want to install those files, run `npm install` in the same folder.\n\n### Build Tool\n[Browserify](http://browserify.org/) is a tool that reads your JavaScript source\nfiles and files you've installed with `npm`. Then outputs those files loaded in\nthe correct order to a single bundled file.\n\nYou can install the `browserify` command on your machine with: `npm install browserify -g`.\n\nTo create a bundled file, run `browserify index.js -o bundle.js`, where `index.js`\nis the entry point to all your scripts.\n\nIn your `index.js` file, you can include other files with `require('./other.js')`\nor a 3rd party file installed with `npm` by doing `require('jquery')`.\n\nOnce you have generated this `bundle.js` file, you can add a single script tag in\nyour HTML: `\u003cscript src=\"bundle.js\"\u003e\u003c/script\u003e` and host those assets like any\nother HTML, JavaScript and CSS files.\n\n### Dev Server\nWhile rapidly developing, running the `browserify` command every time you make\na change in the code can get tedious. Also having to FTP, git push or some other\nmethod to deploy the code to a server can slow your development down.\n\nI use a tool called [budo](https://www.npmjs.com/package/budo) which runs a server\nlocally on your machine (`http://localhost:9966`) and automatically bundles your\ncode with Browserify as you refresh the page or live as you make changes if you\nhave the `--live` option on.\n\nInstall the `budo` command with: `npm install budo` and run the server with:\n`budo index.js`. Now you can rapidly develop the code by viewing `localhost:9966`.\n\nFor convenience, I add the `budo` command to the `scripts` section of my\n`package.json`:\n\n```json\n{\n  \"scripts\": {\n    \"start\": \"budo index.js:bundle.js\"\n  }\n}\n```\n\nNow I only need to run `npm start` to start developing code.\n\n### Deployment\nAfter you're done developing the code, run `browserify index.js -o bundle.js` to\ncreate your JavaScript bundle. Add the script tag to your HTML:\n`\u003cscript src=\"bundle.js\"\u003e\u003c/script\u003e` to load that JavaScript file.\n\nThen upload those files to your remote server. Either via FTP/SFTP,\n[`git` deploying](https://www.youtube.com/watch?v=9qIK8ZC9BnU),\n[heroku](https://devcenter.heroku.com/categories/deployment),\n[firebase](https://firebase.google.com/docs/hosting/deploying) or whatever method\nyou normally use to deploy your website.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshama%2Fletswritecode","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshama%2Fletswritecode","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshama%2Fletswritecode/lists"}