subl
from command line mkdir
cd
ls
Cmder => Command line for Windows Users
bash
to enter into UNIX modeDo the following exercises to practice the markdown syntax http://markdowntutorial.com/lesson/1/
git config
git init
git clone
Colors in the git commands
git config --global color.ui true
Only for Mac
git clone https://github.com/addyosmani/dotfiles.git && cd dotfiles && ./sync.sh
git add
git status
git commit
git log
git remote add
[1]git push
git pull
=> git fetch
+ git merge
Complete the following step-by-step exercise to practice the git commands and workflow https://try.github.io/levels/1/challenges/1
git reset
=> remove from the staging areagit checkout master
=> get back to the “current” state (latest commit) of the projectCreate a folder called notes-bootcamp
and inside of it create a file named README.md
containing 3 interesting ideas you have learned today and then:
add
this new file to the repocommit
the changeREADME.md
add
this new file to stagingcommit
this new changelog
of commitsnotes-bootcamp
git remote add
) to your local repopush
your changes to the remote repoREADME.md
add
& commit
your change to the local repopush
ing your latest changes)var mathy = function(x) {
return function (y) {
return function (z) {
return (x / y) - z;
}
}
}
¿Cómo hariamos la operación (4 / 3) - 2
con este código en una linea?
var superGreeter = function(greeting) {
return function(place) {
return function(nickname) {
return function(name) {
return greeting + ', ' + name + '! Welcome to ' + place + ', ' + nickname + '.';
}
}
}
};
superGreeter('Hey')('Berlin')('old pal')('Hans')
//'Hey, Hans! Welcome to Berlin, old pal.'
hiParisBuddyGreeter = superGreeter('Hi')('Paris')('buddy');
helloTokyoGreeter = superGreeter('Hello')('Tokyo');
hiParisBuddyGreeter('Franz')
//'Hi, Franz! Welcome to Paris, buddy.'
helloTokyoGreeter('friend')
//[Function]
helloTokyoGreeter('friend')('Yuki')
//'Hello, Yuki! Welcome to Tokyo, friend.'
Do the following exercises to practice closures http://nathansjslessons.appspot.com/lesson?id=1000
>>> var data = {
name: "juanma",
location: "barcelona"
}
>>> var age = 35;
>>> function setData( oData, nAge ) {
oData.location = "dublin";
nAge = 40;
return oData.location + " - " + nAge;
}
>>> setData(data, age)
"dublin - 40"
>> data
Object {name: "juanma", location: "dublin"}
>> age
35
>>> var number = 10;
>>> var newNumber = number;
>>> newNumber = newNumber + 1000;
>>> number
10
>>> var arrayNumbers = [1,2,3,4]
>>> var newArrayNumbers = arrayNumbers
>>> newArrayNumbers.push(10)
>>> arrayNumbers
[1, 2, 3, 4, 10]
>>> var book = { title: "1984", author: "Orwell" }
>>> var newBook = book
>>> newBook.title = "Old Man and the Sea"
>>> book.title
"Old Man and the Sea"
>>> var book = { title: "1984", author: "Orwell" }
>>> var newBook = book
>>> newBook.title = "Old Man and the Sea"
>>> book.title
"Old Man and the Sea"
Choose a partner and do the following exercises online (in pairs) to practice Javascript
var a; typeof a;
var s = '1s'; s++;
!!"false"
!!undefined
undefined == null
false == ""
false === ""
typeof "2E+2"
a = 3e+3; a++;
What will be the result of executing these lines in the console? Why?
var v = v || 10;
var v = 100;
var v = v || 10;
var v = 0;
var v = v || 10;
var v = null;
var v = v || 10;
What is the value of v
after this?
var x = 'Hello World';
function foo(){
var x;
alert( x );
x = 'New Value';
alert( x );
}
foo();
What will return the alert
s? Why?
function test() {
foo();
bar();
var foo = function () {
alert("this won't run!");
}
function bar() {
alert("this will run!");
}
}
test();
What will return the execution of test()
? Why?
var a = 1;
function f() {
var a = 2;
function n() {
alert(a);
}
n();
}
f();
What will show this code in the alert()
? Why?
Follow the steps on this repository to see the workflow of some functional programming code
Do the exercises 1-27 to practice functional programming
Group yourself in pairs and solve the challenges proposed at: http://mosaic.academy/
Do the following KOAN to practice javascript concepts
The Three Layers of Web Design
html5-layouts
on your github account and clone it on your machineindex.html
and inside of it do the markup (only the markup, not the css part) explained in this articlepush
your changes to the remote repository when you complete the markuphtml5-layout-skylabcoders
on your github account and clone it on your machineindex.html
, blog.html
& contact.html
filespush
your changes to the remote repository when you complete the markupChoose a partner and do the following exercise online (in pairs) to practice Selectors: http://flukeout.github.io/
width
, height
, padding
, margin
, border
box-sizing: border-box;
See boxes w/ your own eyes
* {
border: 1px solid red !important;
}
The main idea behind the flex layout is to give the container the ability to alter its items (width, height and order) to best fill the available space
A flex container expands items to fill available free space, or shrinks them to prevent overflow.
Choose a partner and do the following exercise online (in pairs) to practice Flexbox: http://flexboxfroggy.com/
push
your changes to the remote repository when you complete the markuppush
your changes to the remote repository when you complete the markupChoose a partner and do the following exercises online (in pairs) to practice Bootstrap: Responsive Design with Bootstrap
photoapp-website
portfolio
Useful resources for working on responsive design & bootstrap projects
Group yourself in pairs an do the exercises suggested at Levels 1 & 2 in: http://try.jquery.com/
Group yourself in pairs an do the following exercises:
Group yourself in pairs an do the exercises suggested at Levels 3 & 4 in: http://try.jquery.com/
Do the following exercise: https://github.com/juanmaguitar/exercises-javascript/tree/master/19-percentage-calculator
200 OK
, 201 Created
and 204 No Content
.301 Moved Permanently
, 304 Not Modified
.400 Bad Request
, 401 Unauthorized
, 403 Forbidden
, 404 Not Found
, 409 Conflict
. 500 Internal Server Error
, 503 Service Unavailable
=>
this
Four versions:
(arg1, arg2, ...) => expr
(arg1, arg2, ...) => { stmt1; stmt2; ... }
singleArg => expr
singleArg => { stmt1; stmt2; ... }
BEFORE (ES5)
var self = this;
this.element.addEventListener('click', function(event) {
self.registerClick(event.target.id);
});
AFTER (ES2015)
this.element.addEventListener('click', event => {
this.registerClick(event.target.id);
});
BEFORE (ES5)
[1,3,4,5,6,7].filter(function(n) { return n % 2 } )
.map(function(n, i) { return n + i } );
// [1, 4, 7, 10]
AFTER (ES2015)
[1,2,3,4,5,6,7].filter(n => n % 2).map((n, i) => n+i);
Do the following katas to assure the understanding of arrow functions
BEFORE (ES5)
var arr = [1, 2, 3];
for (var i = 0; i < arr.length; i++) {
// i from 0 to 2
}
i; // 3
{
var TEMPERATURE = 32;
TEMPERATURE = 16;
TEMPERATURE // 16
}
TEMPERATURE; // 16
AFTER (ES2015)
var arr = [1, 2, 3];
for (let i = 0; i < arr.length; i++) {
// i from 0 to 2
}
i; // ReferenceError: i is not defined!
{
const TEMPERATURE = 32;
TEMPERATURE = 16;
TEMPERATURE; // 32
}
TEMPERATURE; // ReferenceError: TEMPERATURE is not defined!
Do the following katas to assure the understanding of Block Scope
``
${ expression }
`string text`
`string text line 1
string text line 2`
`string text ${expression} string text`
BEFORE (ES5)
var name = "juanma";
var getSuitableDrink = function(who) {
return who === 'juanma' ? 'beer' : 'cocktail'
};
console.log( 'Hello, '+name+'!\nFancy a '+getSuitableDrink()+'?' );
// Hello, juanma!
// Fancy a beer?
AFTER (ES2015)
var name = "juanma";
var getSuitableDrink = function(who) {
return who === 'juanma' ? 'beer' : 'cocktail'
};
console.log( `Hello, ${ name }!
Fancy a ${ getSuitableDrink() }?` );
Do the following katas to assure the understanding of template strings
var a = "foo",
b = 42,
c = {};
function myMethod() {
console.log('ooOoh!');
}
// Shorthand property names
var o = { a, b, c };
// Shorthand method name and dynamic property name
var o2 = {
myMethod,
['myPropertyNum'+b]: 'bar'
}
var messages = {
get latest () {
if (this.log.length == 0) return undefined;
return this.log[this.log.length - 1]
},
set current (str) {
this.log[this.log.length] = str;
},
log: []
}
messages.current = "hey!";
messages.latest // hey!
Do the following katas to assure the understanding of Enhanced Object Literals
function f(x, y=12) {
// y is 12 if not passed (or passed as undefined)
return x + y;
}
f(3) === 15;
f(3, undefined) === 15;
Do the following katas to assure the understanding of Default parameters
var [first, second, third, , fifth = 5] = [1, 2];
first // 1
second // 2
third // undefined
fifth // 5
[second, first] = [first, second] // swap values
first // 2
second // 1
var customer = {
name: 'John',
surname: 'Doe',
dateOfBirth: {
year: 1988
}
};
var {name, surname, dateOfBirth: {year}, children} = customer;
name // 'John'
surname // 'Doe'
year // 1988
children // undefined
...
function multiply(multiplier, ...numbers) {
return numbers.map(n => multiplier * n);
}
var arr = multiply(2, 1, 2, 3);
console.log(arr); // [2, 4, 6]
Do the following katas to assure the understanding of Rest operator
function f(x, y, z) {
return x + y + z;
}
var arr = [1, 2, 3];
f(...arr) === 6; // true
[0, ...arr, 4, 5, 6, 7]; // [0, 1, 2, 3, 4, 5, 6, 7]
Do the following katas to assure the understanding of Spread operator
Set
var s = new Set();
s.add("hello").add("goodbye").add("hello");
s.size === 2;
s.has("hello") === true;
s.delete("hello");
s.has("hello") === false;
Do the following katas to assure the understanding of Set
Map
var m = new Map();
m.set("hello", 42);
m.get("hello") === 42;
var s = { n:4 };
m.set(s, 34);
m.get(s) === 34;
var myMap = new Map();
var keyString = "a string",
keyObj = {},
keyFunc = function () {};
// setting the values
myMap.set(keyString, "value associated with 'a string'");
myMap.set(keyObj, "value associated with keyObj");
myMap.set(keyFunc, "value associated with keyFunc");
myMap.size; // 3
// getting the values
myMap.get(keyString); // "value associated with 'a string'"
myMap.get(keyObj); // "value associated with keyObj"
myMap.get(keyFunc); // "value associated with keyFunc"
myMap.get("a string"); // "value associated with 'a string'"
// because keyString === 'a string'
myMap.get({}); // undefined, because keyObj !== {}
myMap.get(function() {}) // undefined, because keyFunc !== function () {}
class
and extends
keywordsconstructor
definitionstatic
method definitionsBEFORE
var Shape = function( id, x, y ) {
this.id = id;
this.x = x;
this.y = y;
};
Shape.prototype.toString = function( x, y ) {
return "Shape(" + this.id + ")"
};
var Rectangle = function( id, x, y, width, height ) {
Shape.call( this, id, x, y );
};
Rectangle.prototype = Object.create(Shape.prototype);
Rectangle.prototype.constructor = Rectangle;
Rectangle.prototype.toString = function() {
return "Rectangle > " + Shape.prototype.toString.call( this );
};
AFTER
class Shape {
constructor (id, x, y) {
this.id = id;
this.x = x;
this.y = y;
// or Object.assign(this, {id, x, y});
}
toString () {
return `Shape(${this.id})`
}
}
class Rectangle extends Shape {
constructor (id, x, y, width, height) {
super(id, x, y)
}
toString () {
return "Rectangle > " + super.toString()
}
}
Do the following katas to assure the understanding of Classes
// -------- jquery.js --------
export default function jQuery() {
/* code */
}
// -------- code.js --------
import $ from 'jquery';
$('body').addClass('yay');
// --------- http.js --------
export function get(url) {
/* code */
}
export function post(url, body) {
/* code */
}
// -------- code.js --------
import { get, post } from 'http';
import { TIMEOUT as HTTP_TIMEOUT } from 'http';
import * as http from 'http';
get('/my/url').then(function(result) {
/* code */
});
HTTP_TIMEOUT; // 1000;
http.post('/my/url', 'body');
Array object extended with:
from()
, of()
copyWithin()
, entries()
, fill()
, find()
, findIndex()
, keys()
, values()
Array.from(arguments) // [].slice.call(arguments);
Array.from({0: 'hello', 1: world, length: 2}); // ['hello', 'world']
Array.of(1, 2, 3) // [1, 2, 3]
[1, 2, 3, 4, 5].copyWithin(0, 3, 4) // [4, 2, 3, 4, 5]
[1, 2, 3].fill(4) // [4, 4, 4]
[4, 5, 8, 12].find(isPrime) // 5
[4, 5, 8, 12].findIndex(isPrime) // 2
[4, 5, 8, 12].keys() // iterator from 0 to 3
[4, 5, 8, 12].values() // iterator from 4 to 12
Do the following katas to assure the understanding of Array
String object extended with:
raw()
startsWith()
, endsWith()
, includes()
, repeat()
, ...String.raw`Line 1\nLine 2\nLine 3` // 'Line 1\\nLine 2\\nLine 3'
'Hello world'.startsWith('Hello') // true
'Hello world'.endsWith('world') // true
'Hello world'.includes('orl') // true
'Hello world'.repeat(2) // 'Hello worldHello world'
Do the following katas to assure the understanding of String
var promise = new Promise(function(resolve, reject) {
// Do something asynchronous and call resolve with the
// result or reject with the error
});
promise.then(function(result) {
// Use the result of the async call
}, function(error) {
// Process the error
});
var allPromise = Promise.all([getLocation, getTemperature]);
allPromise.then(function([location, temperature]) {
console.log('The location is ', location,
'and the temperature is', temperature);
}, function(error) {
// Process the error
});
var racePromise = Promise.race([getGoogleAds, getYahooAds, getBindAds]);
racePromise.then(function(ads) {
page.addAds(ads);
});
Do the following katas to assure the understanding of Promise
create-react-app
Create the project described at https://github.com/juanmaguitar/exercises-react/tree/master/01-bootstrap-layout-components following the suggested steps
Create with REACT the project described at https://github.com/juanmaguitar/exercises-react/tree/master/02-todo-list
Create with REACT the project suggested at https://github.com/juanmaguitar/exercises-react/tree/master/03-movies
{
"name": "my-super-project",
"version": "1.0.0",
"description": "This is the best project in town",
"main": "index.js",
"scripts": {
"start": "node index"
},
"dependencies": {
"grunt": "~0.4.5"
},
"devDependencies": {
"grunt-available-tasks": "^0.5.6"
},
"keywords": [],
"author": "JuanMa Garrido <JuanMa.Garrido@gmail.com>",
"license": "ISC"
}
Do the exercises suggested at: https://github.com/juanmaguitar/js-server-exercises/tree/master/node-exercises
Cookies w/ Express client & server
Sessions w/ express only server
x-www-form-urlencoded
is defaultform-data
for non-ASCII text or large binary dataPOST /users HTTP/1.1
Host: localhost:3000
Content-Type: application/x-www-form-urlencoded
Cache-Control: no-cache
Postman-Token: 9b1e66e2-0e5d-ed60-1a5f-9d9d936e9f4e
username=juanma
console.log
req.body
(w/ body-parser)req.cookies
(w/ cookie-parser)req.hostname
, req.ip
, req.method
req.params
(w/ /user/:name
)req.query
(w/ /search?q=tobi+ferret
)REST is an architectural style that helps create and organize a distributed system. It describes the web as a distributed hypermedia application whose linked resources communicate by exchanging representations of resource state.
Header → Authorization: Basic {base64_encode(username:password)}
> echo "QWxhZGRpbjpPcGVuU2VzYW1l" | base64 --decode
Aladdin:OpenSesame
> echo -n "Aladdin:OpenSesame" | base64
QWxhZGRpbjpPcGVuU2VzYW1l
curl -D- \
-X GET https://api.cooldata.net/api/1/things \
-u Aladdin:OpenSesame \
-H "Content-Type: application/json"
curl -D- \
-X GET https://api.cooldata.net/api/1/things \
-H "Authorization: Basic QWxhZGRpbjpPcGVuU2VzYW1l" \
-H "Content-Type: application/json"
http -a username:password example.org
$.ajax({
url: 'https://api.cooldata.net/api/1/things',
method: 'GET',
crossDomain: true,
beforeSend: function ( xhr ) {
xhr.setRequestHeader(
'Authorization',
'Basic ' + Base64.encode( 'Aladdin:OpenSesame' )
);
},
success: function( data, txtStatus, xhr ) {
console.log( data );
console.log( xhr.status );
}
});
OAuth is an open authorization standard used to provide secure client application access to server resources. OAuth enables server owners to authorize access to the server resources without sharing credentials.
Create the site w/ Express explained at: http://www.clock.co.uk/blog/a-simple-website-in-nodejs-with-express-jade-and-stylus
Create the site w/ Express explained at: http://code.tutsplus.com/tutorials/introduction-to-express--net-33367
Create the site w/ Express explained at: https://github.com/juanmaguitar/node-exercises/tree/master/01-todo-app
MongoDB is an open-source document database that provides high performance, high availability, and automatic scaling.
A record in MongoDB is a document, which is a data structure composed of field and value pairs. MongoDB documents are similar to JSON objects. The values of fields may include other documents, arrays, and arrays of documents.
MongoDB stores BSON documents, i.e. data records, in collections; the collections in databases.
use myNewDB
db.myNewCollection1.insert( { x: 1 } )
var mydoc = {
_id: ObjectId("5099803df3f4948bd2f98391"),
name: { first: "Alan", last: "Turing" },
birth: new Date('Jun 23, 1912'),
death: new Date('Jun 07, 1954'),
contribs: [ "Turing machine", "Turing test", "Turingery" ],
views : NumberLong(1250000)
}
mongod
⟶ The Daemonmongod --dbpath ~/data/db
mongo
⟶ The Shell (Reference Guide) → Mongo Hacker 😎show dbs
& use ProjectDBName
& show collections
db.collection.help()
& db.collection.find().help()
Create or insert operations add new documents to a collection.
Read operations retrieves documents from a collection; i.e. queries a collection for documents.
Update operations modify existing documents in a collection
Delete operations remove documents from a collection
var MongoClient = require('mongodb').MongoClient;
// Connection URL
var url = 'mongodb://localhost:27017/myproject';
// Use connect method to connect to the Server
MongoClient.connect(url, function(err, db) {
console.log("Connected correctly to server");
db.close();
});
toArray
to convert cursor into array of objectsdb.collection('restaurants')
.find( )
.forEach( (myDoc) => console.log (doc) );
db.collection('restaurants')
.find( )
.toArray( (err, docs) => console.log (docs) );
{
"address" : {
"street" : "2 Avenue",
"zipcode" : "10075",
"building" : "1480",
"coord" : [ -73.9557413, 40.7720266 ]
},
"borough" : "Manhattan",
"cuisine" : "Italian",
"grades" : [
{
"date" : new Date("2014-10-01T00:00:00Z"),
"grade" : "A",
"score" : 11
},
{
"date" : new Date("2014-01-16T00:00:00Z"),
"grade" : "B",
"score" : 17
}
],
"name" : "Vella",
"restaurant_id" : "41704620"
}
db.collection('restaurants')...
.find( )
.find( { "borough": "Manhattan" } )
.find( { "address.zipcode": "10075" } )
.find( { "grades.grade": "B" } )
.find( { "grades.score": { $gt: 30 } } ) // greater than
.find( { "grades.score": { $lt: 10 } } ) // greater than
.find( { "cuisine": "Italian", "address.zipcode": "10075" }) // AND
.find( { $or: [
{ "cuisine": "Italian" },
{ "address.zipcode": "10075" }
]}) // OR
.find().sort( { "borough": 1, "address.zipcode": 1 } );
[...
{
"_id" : 3,
"name" : "ahn",
"age" : 22,
"type" : 2,
"status" : "A",
"favorites" : { "artist" : "Cassatt", "food" : "cake" },
"finished" : [ 6 ],
"badges" : [ "blue", "red" ],
"points" : [ { "points" : 81, "bonus" : 8 }, { "points" : 55, "bonus" : 20 } ]
}
{
"_id" : 6,
"name" : "abc",
"age" : 43,
"type" : 1,
"status" : "A",
"favorites" : { "food" : "pizza", "artist" : "Picasso" },
"finished" : [ 18, 12 ],
"badges" : [ "black", "blue" ],
"points" : [ { "points" : 78, "bonus" : 8 }, { "points" : 57, "bonus" : 7 } ]
}
...]
db.collection('users')...
.find( { status: "A" } )
.find( { status: "A" }, { name: 1, status: 1 } )
.find( { status: "A" }, { name: 1, status: 1, _id: 0 } )
.find( { status: "A" }, { favorites: 0, points: 0 } ) // all but excluded
.find(
{ status: "A" },
{ name: 1, status: 1, "favorites.food": 1 }
) // Specific Fields in Embedded Documents
Do the followig exercises: https://github.com/juanmaguitar/node-exercises/tree/master/03-mongo-exercises
Mongoose is an object modeling package for Node that essentially works like an ORM