Skip to content

DLavin/JSLAB

BranchesTags
 
 

Repository files navigation

JSLAB

JSLAB

Welcome to JSLAB (JavaScript Lab) pronounced "JS Lab".

Too long didn't read... (tldr;)

Our goal here is to get you interested in the world of Programming and Computer Science through weekly workshops (labs). Each lab will have the same format every week and will consist of an official two-hour meeting (1 hour basic JS lecture and 1 hour lab), followed by an unofficial happy hour (socializing).

Lab starts at every other Wednesday 7:00 sharp as of 12/21/2016. If this lab becomes more successful, we might change the meetup time. Eventually, we want to make this a weekly program, so you will be able to get credit for your lab work and labs will be a sort of cheaper and less formal kind of code camp. If you are interested in receiving lab credit, please let a volunteer know after the lab is over and please sign-up for the next meeting.

  • Hour 1: The Basics

    • Every week, we will cover the very basics of the JavaScript language (ES5-ES7 - The ECMAScript Specification). This is important because it allows new people to join us every week, regardless of their experience level. This hour will become redundant for many attendees, so the basics are optional. Eventually, you can receive partial credit (0.5) for every time you attend a follow-up basics session. 1 Credit

  • Hour 2: The Lab

    • You learn by doing. So bring your most polite and professional self to the lab to participate with other attendees and volunteers. This will be an open lab session, where you can ask any questions and receive direct help from volunteers, professionals and enthusiasts. We will be happy to go over your projects and problems, homework, etc. In fact, your project does not strictly have to be JavaScript. It may be math homework, another CS language, statistics, whatever. Just remember that this is JSLAB, so our JS volunteers might not have the expertise you are looking for. You may have to ask around to see if someone else can help. 1 Credit

  • Hour 3: Socializing

    • You are human. We are all friends (or will be). Use this time to work on human skills. Feel free to talk about coding, work, politics, economics, whatever. Just be polite, friendly and kind. This is a strictly no-conflict zone. People who don't respect other people may be asked to leave and may be put on a permanent black list. Please keep this time safe and family friendly. No drinking if there are minors present. Also use this time to clean up before you leave. Bottles and cans should be recycled. Please plan on staying no more than one hour per lab. No Credit

The Basics

WHOAMI

amir djavaherian Programmer, Musician, Maker, Pizza Connoseiur

What is this?

What is JavaScript?

Demo: Let's use some Javascript.

http://bit.ly/JSLAB2017

Here's our first task. Add your name to the attendees section of the JSLAB readme (sign up for a github account while you're at it). See what happened? You just used JavaScript. In fact if you're using a computer and surfing the Internet. JavaScript is everywhere. Pretty much every interaction you have with a web site is using JavaScript under the hood. That's work to be done, and you can do it!

The Math

Let's talk about Math. You might be good at it, bad at it, really bad at it, whatever. Just don't be scared of it. Although pretty much everything related to computers and computer science is made up or backed up by some serious math, you'll find that once you get familiar with some of the core concepts of computer science and programming, you may not even use very much or any math in your day to day programming. Don't get me wrong, the more math and science you know, the better. But don't be scared of it. Its just like pitching a softball, you start slow and eventually with practice, you master the art of the strikeout.

Core Concepts

At the heart of any programming language are usually a few consistent concepts.

  • You have concepts like state which is kind of like your application's memory.
  • And speed which is how fast your application can do something.
  • You have structures like objects which are also like memory.
  • You have classes which are like collections of objects.
  • You'll see functions or methods which are interchangeable terms for doing some kind of work
  • There's variables which are like little units of memory or references to memory that help you do work.
  • There's booleans true and false, 0 or 1, on or off, whatever. Computers work in binary or boolean numbers.
  • There's loops which are like built-in functions
  • And conditionals that help you make descisions about what your code should do in real time

All these concepts are usually working together in the same application. Their syntax and implementation might be different from language to language, but just like the difference between Mandarin Chinese, and American English, there are always words for "mom" or "water" or "food" or "friend".

Let's take a look at the language

Let's do some 101... More 101... CodePen

Wrap-up.

Here's an exhaustive list of reading to get you jazzed about JavaScript. Do your homework, read, watch videos, do something, get inspired and we'll help you work on your project for another hour or so. Don't forget to sign up for the next meetup.

Required Reading (Online resources) essential-javascript-links

Required Viewing

Exercises

Spec

  • ES5 Spec An annotated, hyperlinked version of the ES5 spec
  • ES6 Spec ECMAScript® 2015 Language Specification

Books

Dev tools & collaboration

  • nvm First install this...
  • Node Then install Node (with nvm). You'll need this even if you're a front-end dev.
  • npm Install lots of other things with npm. The package manager for JavaScript. Comes with Node.
  • Atom Nice, hackable editor by GitHub.
  • Node Inspector Debug Node code with the Chrome debug tools --save-live-edit true
  • TraceGL Powerful runtime analysis of live JavaScript code
  • Tern Static analysis in JavaScript
  • JSDoc Pair with Tern for static analysis
  • Slate Generate beautiful API docs for your apps
  • Slack Chat for teams, with GitHub and Google hangouts integration
  • Gitter Like Slack, but better for OSS projects and free chat.
  • Airety Better developer interviews via pair programming.
  • PrettyDiff
  • Babel Repl The Babel REPL with compiled output
  • ESNextBin A babel powered ES6+ browser bin with npm package support.
  • Nitrous.IO Online IDE in the cloud with collaboration & Docker containers
  • Koding Online cloud development platform with video & audio collaboration

Building

Testing / Lint / Quality checkers

Transpilers

  • Babel Transpile ES2015 (ES6), ES7 to ES5, JSX to React.
  • TypeScript TypeScript's structural types are worth a look, but I don't use it.
  • Emscripten Frequently used for C/C++ JavaScript ports.
  • ES6 tools Addy Osmani's ES6 Tools list.

JavaScript environments

  • Node.js Server side JavaScript and more

Libraries

  • stats.js.org JavaScript repos ranked by popularity. #code
  • es5-shim Stable, production ready. #code
  • es6-shim Somewhat stable, but a few things I thought were solid got shifted to ES7. #code
  • es7-shim Experimental. Use with caution. #code
  • HTML5 Cross Browser Polyfills A fairly comprehensive list of HTML5 API polyfills. #code
  • Deep Freeze Deep freeze objects. #code
  • HTML5 Boilerplate You'll want to cherry-pick the best of this for your production apps. See Initializr #code
  • UpUp Make sure your site works even when your user is offline. #code
  • cf-package A Cloverfield scaffold that generates new modules (npm packages) complete with npm scripts and useful boilerplate. #code
  • The Universal React Boilerplate Write apps using the same code for both the client and the server using Node, Express, and Browserify. #code
  • NodeGoat Identify security vulnerabilities in your Node apps. #code
  • lightning.js Async fetch load 3rd party JS & expose a promise API. #code
  • native-promise-only An ECMAScript standard promise polyfill by Kyle Simpson. #code
  • isomorphic-fetch A WHATWG fetch. standard polyfill. #code
  • sseasy Server Sent Events for Node (HTML5 standard push notifications). #code
  • EventSource browser Polyfill Required client-side patching to support Server Sent Events. #code
  • TodoMVC A showcase implementing many MV* libraries/frameworks using a standardized demo app (for easy comparisons). #code
  • jQuery Most popular JS lib by a landslide. #code
  • React What do Facebook, Instagram, Netflix and PayPal have in common? React. #code
  • Cycle.js Like React, but more functional & reactive #code
  • Lodash Like Underscore, but much faster, and featuring a more expressive API. Check out the Ramda-style fp versions you can import from lodash/fp #code
  • Ramda Like Lodash and Underscore, but with all functions automatically curried, and parameters arranged so that the data to be operated on is supplied last. #code
  • RxJS Reactive extensions for JavaScript. What's reactive? #code
  • Page.js Tiny client-side router, inspired by Express. #code
  • Moment A lightweight JavaScript date library for parsing, validating, manipulating, and formatting dates. #code
  • express-request-language Best implementation I've seen for Accept-Language negatiation in Express. #code
  • accept-language If you don't use express, accept-language is the low-level lib that powers express-request-language for language matching & fallback. #code
  • Globalize i18n / translate your app for many languages and locations (locales). #code
  • dotenv Easily manage environment variables #code
  • Leaflet Interactive map UIs made easy. #code
  • Lusca Secure your Express application. By the Kraken team at PayPal.
  • Express The most popular framework for Node. #code
  • Stampit Create objects from reusable, composable behaviors. Prototypal inheritance with stamps. #code
  • Credential If you write Node apps with password logins, you need Credential. #code
  • Countly Open source mobile & web analytics and marketing platform. #code
  • node-jsonwebtoken Easy JSON Web Token auth. #code
  • cuid GUIDs are broken - use cuid, instead. #code
  • velocity & Velocity Motion Designer (VMD) UI animation library. #code
  • is-my-json-valid A fast json-schema validator. #code
  • is-express-schema-valid is-my-json-valid as Express middleware for req.body req.query and req.params. #code
  • inquirer.js Great library for building CLI tools. #code
  • rimraf rm -rf util for nodejs. Great for npm scripts. #code
  • Wemo.io Open Source VR Tools #code
  • IoT.js An Internet of Things JavaScript platform.

React

Relay & GraphQL

Web Components

Benchmarking

  • JSlitmus - JSLitmus is a lightweight tool for creating ad-hoc JavaScript benchmark tests.
  • Matcha - Matcha allow you to design experiments that will measure the performance of your code. It is recommended that each bench focus on a specific point of impact in your application.
  • Timing.js - Timing.js is a small set of helpers for working with the Navigation Timing API to identify where your application is spending its time. Useful as a standalone script, DevTools Snippet or bookmarklet.
  • Stats.js - This class provides a simple info box that will help you monitor your code performance.

QA / Deployment / Monitoring / CI

  • PM2 Process monitoring / self repair
  • Pingdom Response monitoring and alert management (because incidents happen).
  • New Relic Deep insights into the performance and health of your production apps
  • Sauce Labs Cross platform web application testing with great collaboration and integration support
  • Travis CI CI, of course
  • Docker Run your CI process using the same OS configs as your production systems.
  • Shippable Docker-based hosted build / CI
  • Tensō A thin API facade in Node
  • Kong API/microservice extension and management layer, centralize auth, cache, logging, rate limiting, etc... plugins in Lua );

Community

News

Pasting / sharing code

Contests

Hackable Hardware

Hosting

For kids (and adults who just love to have fun)

Twitter (alphabetical order)

Attendees (alphabetical)

Please sign our digital guest book by posting your Twitter Handle below @manrajp

About

JavaScript Lab For Beginners and Experts

Resources

Readme

License

MIT license
Activity

Stars

0 stars

Watchers

1 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

No packages published

Languages

  • ApacheConf 68.2%
  • JavaScript 18.7%
  • HTML 9.0%
  • CSS 4.1%