jesperorb

{
	"console.log()": {
    "prefix": "cl",
    "body": [
			"console.log($1);$0",
		],
    "description": "console.log()"
  },
	"console.group()": {
    "prefix": "cg",

jesperorb

function alternateCasing(text){
  let letters ≈ ''
  for (const index in text) {
    if(index % 2) {
      letters += text[index].toLowerCase()
    } else {
      letters += text[index].toUpperCase()
    }
}
  

jesperorb

/**
  * There is a pro to using document.createElement() instead of just applying a 
  * string to the page that gets converted to HTML. When we use the pure string method
  * we do not get a link/reference to the actual element that is seen on the page. This
  * usually means we have to get the element again to modify it. For example, add an event
  * listener
  */ 

//-----------------------------------------------
// .createElement() + .addEventListener()

jesperorb

Constructor Pattern

//Constructor pattern, a function that produces new
//objects. But still just a regular function
function Person(name, age){
    this.name = name;
    this.age = age;
}

jesperorb

Module Bundler (Parcel & Webpack)

Node & require

I Node.js finns ingen index.html som binder samman alla våra resurser (.js, .css etc.) men vi måste ändå ha ett sätt att kommunicera mellan filer på ett enkelt sätt. Detta löser node med att man exporterar och importerar explicit från varje fil, liknande som sass förutom att här måste vi även vara explicit med vad vi exporterar. Vi kan även välja att inte exportera allting i filen så vissa variabler kan vara "privata" till själva filen medan andra kan vara "publika" för resten av dina filer.

//index.js
const person = require('./person.js');
// const { name, age } = require('./person'); //destructure

jesperorb

PHP Form submitting

If we have the following structure in our application:

• 📁 application_folder_name
  • 📄 index.php
  • 📄 handle_form.php
  • 📄 main.js

And we fill our index.php with the following content just to get a basic website with a form working. You should be able to run this through a php-server of your choice.

jesperorb

/****************
 * GET REQUEST  *
 ****************/

/* We create a new request-object that will handle the transaction between the server/database
 * and the client (me/us/the browser). */
var request = new XMLHttpRequest();

/* 
 * We add a listener to the request which will listen to when the state changes,

jesperorb

Common Errors in React

Unterminated JSX Content

Don't focus on which element the cursor is pointing, just look for any element that hasn't been closed

Error

Solution

jesperorb

Binding In React

• this and binding in JavaScript
• `this and binding in React

---

this and binding in JavaScript

To properly use react you need to get a good understanding about binding and the keyword this in regular JavaScript. When adding a function to an event i JavScript you don't call the

jesperorb

let arr = Object.entries(obj).map(entry => Object.assign({value: entry[1]}, { key: entry[0] }));