JavaScript HTML Other
Switch branches/tags
Nothing to show
Clone or download
Latest commit 4cdd81a Jun 6, 2018
Permalink
Failed to load latest commit information.
ajax-requests Updating budo for security warnings Mar 25, 2018
async-js-with-promises Async js with promises Jun 16, 2015
beginning-client-server-javascript-with-io-node Beginning client/server js with io/node Apr 13, 2015
content-security-policy CSP Oct 7, 2015
creating-desktop-apps-with-electron Adding readmes May 5, 2015
css-selector-precedence css selector precedence Sep 8, 2015
debugging-javascript Updating budo for security warnings Mar 25, 2018
dom-event-listeners Add readme for dom event listeners Mar 21, 2018
drawing-animating-svgs drawing animating with svgs Apr 18, 2018
easier-webgl-shaders-stackgl easier webgl and shaders May 2, 2018
electron-webpack-vuejs Add electron, webpack, vue example Jun 1, 2018
ember-computed-properties ember computed properties Oct 16, 2015
ember-fundamentals Ember Fundamentals Sep 24, 2015
essential-es6-es2015 essential es6 May 26, 2015
getting-started-with-browserify Updating deps and config Mar 25, 2018
getting-started-with-electron-1.0 Getting started with electron 1.x Jun 30, 2016
getting-started-with-virtual-dom readme May 18, 2015
getting-started-with-vuejs Getting started with Vue.js Mar 27, 2018
getting-started-with-webpack Updating deps and config Mar 25, 2018
how-to-make-chrome-extensions Add chrome extension example Apr 11, 2018
intro-to-leveldb Updating budo for security warnings Mar 25, 2018
intro-to-webgl-and-shaders Intro to webgl and shaders Jul 14, 2015
javascript-filereader filereader May 23, 2018
javascript-generators javascript generators Jan 28, 2016
javascript-modules Updating budo for security warnings Mar 25, 2018
javascript-mutation-observer mutation observer May 14, 2018
javascript-prototypal-inheritance proto inheritance Apr 23, 2015
javascript-prototype-fun js prototype fun Apr 24, 2015
javascript-proxy JS proxy Apr 26, 2018
js-arrays Updating budo for security warnings Mar 25, 2018
js-timers Updating budo for security warnings Mar 25, 2018
learn-to-yo-yo Updating budo for security warnings Mar 25, 2018
learning-js-functions js functions and 2d animations Apr 13, 2015
mastering-callbacks Updating budo for security warnings Mar 25, 2018
multi-window-electron-desktop-app Fix crlf Mar 21, 2018
node-process-child-process Node process and child process Jul 29, 2015
node-streams add start script Dec 27, 2015
nodejs-cli nodejs cli Aug 4, 2015
nodejs-server Node.js Server Aug 19, 2015
p2p-video-chat-webrtc Use the gitusermedia library Jan 9, 2016
packaging-distributing-electron-apps Update README.md Nov 20, 2015
simple-p2p-with-webrtc Fix link to video May 9, 2018
tagged-template-literals Add tagged templater literals Jun 15, 2016
testing-client-server-javascript Add readme Jul 1, 2015
transform-your-bundles-with-browserify transform your bundles with browserify Jun 4, 2015
two-d-animations-with-canvas-javascript js functions and 2d animations Apr 13, 2015
vuejs-computed-properties vuejs computed properties Jun 6, 2018
what-is-async-javascript What is async js Jan 6, 2016
what-is-isomorphic-javascript Add what is isomorphic javascript Jun 1, 2015
.gitignore dom event listeners example Mar 21, 2018
README.md Update README.md May 27, 2018

README.md

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.