Skip to content

shama/letswritecode

Folders and files

NameName
Last commit message
Last commit date

Latest commit

3102a79 Â· Nov 6, 2019

History

90 Commits
Mar 25, 2018
Jun 16, 2015
Apr 13, 2015
Oct 7, 2015
May 5, 2015
Sep 8, 2015
Mar 25, 2018
Mar 21, 2018
Apr 18, 2018
May 2, 2018
Nov 6, 2019
Oct 16, 2015
Sep 24, 2015
May 26, 2015
Mar 25, 2018
Jun 30, 2016
May 18, 2015
Mar 27, 2018
Mar 25, 2018
Jun 22, 2019
Mar 25, 2018
Jul 14, 2015
May 23, 2018
Jan 28, 2016
Mar 25, 2018
May 14, 2018
Apr 23, 2015
Apr 24, 2015
Apr 26, 2018
Mar 25, 2018
Mar 25, 2018
Mar 25, 2018
Apr 13, 2015
Mar 25, 2018
Mar 21, 2018
Jul 29, 2015
Dec 27, 2015
Aug 4, 2015
Aug 19, 2015
Jan 9, 2016
Nov 20, 2015
May 9, 2018
Jun 15, 2016
Jul 1, 2015
Jun 4, 2015
Apr 13, 2015
Jun 6, 2018
Jan 6, 2016
Jun 1, 2015
Mar 21, 2018
May 27, 2018

Repository files navigation

Let's Write Code

All the code examples for the youtube series Let's Write Code

Ideas?

If you have any screencast you'd like to see or suggestions, please open an issue here. Thanks!

Dev Setup

Throughout these videos I typically use the same development environment. This is a guide through that development setup.

Dependencies

Rather than copying / pasting script tags into my HTML for 3rd party code, I use npm. The npm command comes with Node.js. When I run npm install jquery, it downloads the 3rd party files into the node_modules/jquery/ folder.

The package.json file can hold those dependencies and versions, so the next time you want to install those files, run npm install in the same folder.

Build Tool

Browserify is a tool that reads your JavaScript source files and files you've installed with npm. Then outputs those files loaded in the correct order to a single bundled file.

You can install the browserify command on your machine with: npm install browserify -g.

To create a bundled file, run browserify index.js -o bundle.js, where index.js is the entry point to all your scripts.

In your index.js file, you can include other files with require('./other.js') or a 3rd party file installed with npm by doing require('jquery').

Once you have generated this bundle.js file, you can add a single script tag in your HTML: <script src="bundle.js"></script> and host those assets like any other HTML, JavaScript and CSS files.

Dev Server

While rapidly developing, running the browserify command every time you make a change in the code can get tedious. Also having to FTP, git push or some other method to deploy the code to a server can slow your development down.

I use a tool called budo which runs a server locally on your machine (http://localhost:9966) and automatically bundles your code with Browserify as you refresh the page or live as you make changes if you have the --live option on.

Install the budo command with: npm install budo and run the server with: budo index.js. Now you can rapidly develop the code by viewing localhost:9966.

For convenience, I add the budo command to the scripts section of my package.json:

{
  "scripts": {
    "start": "budo index.js:bundle.js"
  }
}

Now I only need to run npm start to start developing code.

Deployment

After you're done developing the code, run browserify index.js -o bundle.js to create your JavaScript bundle. Add the script tag to your HTML: <script src="bundle.js"></script> to load that JavaScript file.

Then upload those files to your remote server. Either via FTP/SFTP, git deploying, heroku, firebase or whatever method you normally use to deploy your website.

Releases

No releases published

Packages

No packages published

Languages