Skip to content

Instantly share code, notes, and snippets.

@gmcerveny

gmcerveny/00_Orientation.md

Last active December 26, 2015 06:39
Show Gist options
  • Save gmcerveny/7109858 to your computer and use it in GitHub Desktop.
Save gmcerveny/7109858 to your computer and use it in GitHub Desktop.
Download ZIP
JS Course
Raw
00_Orientation.md

JavaScript Course Orientation

Welcome to our little experiment where we become more awesome over the course of 6 weeks.

Contact Information

Greg Cerveny 303-810-7068 @gmcerveny [email protected]

Dustin Larimer @larimer [email protected]

Crazy Things You Can Do with JavaScript

Or you know, normal things like http://jquery.com, http://angularjs.org, and http://backbonejs.org.

Why Use JavaScript

Learn one language, use it everywhere.

Node.js has a lot of big partners like eBay, Microsoft, LinkedIn as well as new forward thinking projects like Ghost. http://nodejs.org/industry/

You can leverage lots of cloud services inluding Heroku for hosting your application and Firebase for handling your data.

Resources

3 ways to start writing JavaScript

Examples from Class

http://jsfiddle.net/75Sq7/

Individual Projects

You will be picking and completing a personal project over the course of 6 weeks. This is in part to guide learning and in part to practice, the only real way to learn a skill. However, you're also a team, so you will be aware of everyone's projects and learn about the technologies they are using so you will have an understanding.

Schedule

Upcoming dates will be:

  • Tues Oct 29 - Halycyon
  • Tues Nov 5
  • Tues Nov 12
  • Tues Nov 19
  • Tues Nov 26 HOLIDAY, NO MEETING
  • Tues Dec 3
  • Tues Dec 10

Tuition

6 week course, 90 minutes per session, $35 per session, 8:15-9:45 on Tuesdays

Books

Read this book, it's FREE!

Eloquent Javascript

Some good recommendations for a self directed path:

Derek Sivers - Learning Javascript Advice

Assignment

Write down the basic information your project will need to record. For example a business card would need a name, title, e-mail address, phone number, website, and company name.

Raw
01_Data.md

Data

This lesson covers how we describe, communicate, and store data in JavaScript applications.

Describing Data

There are only a handful of different types of data that you need to learn.

  • numbers
  • strings
  • booleans

And a way to group these simple variables into more descriptive chunks.

  • arrays : ordered lists of data
  • objects : named properties and values

Links to more resources:

Communicating Data

In order to communicate data we use a special language called JSON which stands for JavaScript Object Notation. Luckily, this is identical to the symbols we use to program in JavaScript.

It looks like this:

  • strings: "Hello"
  • numbers: 32
  • booleans: true,false
  • arrays: [1,2,3,4]
  • objects: {name:"Greg", age:32}

Tutorials & Resouces

BONUS

You can convert to and from JSON with the following code:

JSON.stringify({task:"Learn JS, done:false});
JSON.parse("[1,2,3,4]");

Persisting Data

At some point you're going to want to save your data beyond when the application is running. You can save data in a simple text file, a database, or through a web service.

Firebase is one such service which nicely bundles a few popular techniques and is easy to use. Firebase includes a simple javascript object that makes it easy to send data back and forth to your application. Their admin tool even lets you upload and download JSON directly.

The 5 minute tutorial provides an excellent guide: https://www.firebase.com/tutorial/#gettingstarted.

Class Example

https://github.com/gmcerveny/Firebase_Survey

Homework

Create plain html files for each one of the screens in your app.

Raw
02_Bootstrap.md

Bootstrap

Hopefully you've all had a chance to read over the Bootstrap docs a bit.. http://getbootstrap.com/css/#overview

Here's a breakdown on their grid system, with a few notes of my own:

Grid systems are used for creating page layouts through a series of rows and columns that house your content. Here's how the Bootstrap grid system works:

Rows must be placed within a .container div (

) for proper alignment and padding. Use rows to create horizontal groups of columns. Content should be placed within columns, and only columns may be immediate children of rows. Predefined grid classes like .row and .col-xs-4 are available for quickly making grid layouts. Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via negative margin on .rows. (Check out the element inspector and see how the first and last columns have special padding overrides) Grid columns are created by specifying the number of twelve available columns you wish to span. For example, three equal columns would use three .col-xs-4. (The '-xs-' part is explained below) Example of the basic grid: » http://getbootstrap.com/css/#grid-example-basic

You can use '-xs-' and '-md-' classes (plus a few others) to set different column sizes on different devices. '-xs-' takes effect on mobile-sized screens (extra small) and '-md-' takes effect on desktop-sized screens (medium). You can test these by dragging the corner of your browser around to resize the window.

This screen-size detection is handled by bootstrap by default. So that means you just set these different classes on the same columns and the different rules take effect automagically.. neato!

Example: http://getbootstrap.com/css/#grid-example-mixed

.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4

Here's a big 'ol list of examples that you can use to jumpstart your own pages, if you haven't already: http://getbootstrap.com/getting-started/#examples

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment