Skip to content

Instantly share code, notes, and snippets.

View snippets.code-snippets
{
"console.log()": {
"prefix": "cl",
"body": [
"console.log($1);$0",
],
"description": "console.log()"
},
"console.group()": {
"prefix": "cg",
View alternateCasing.js
function alternateCasing(text){
let letters ''
for (const index in text) {
if(index % 2) {
letters += text[index].toLowerCase()
} else {
letters += text[index].toUpperCase()
}
}
@jesperorb
jesperorb / html-string-vs-createElement.js
Last active Mar 1, 2022
Pros and cons using .insertAdjacentHTML vs .createElement
View html-string-vs-createElement.js
/**
* 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
jesperorb / prototype.md
Last active May 10, 2018
Different prototype patterns
View prototype.md

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
jesperorb / module_bundlers.md
Last active Nov 21, 2021
Kom igång med Module Bundlers (Parcel & Webpack)
View module_bundlers.md

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
jesperorb / php_form_submit.md
Last active Oct 3, 2022
PHP form submitting with fetch + async/await
View php_form_submit.md

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
jesperorb / XMLHttpRequest.js
Created Feb 22, 2018
XMLHttpRequest example
View XMLHttpRequest.js
/****************
* 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
jesperorb / react_errors.md
Last active Aug 31, 2017
Common Errors in React
View react_errors.md

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

Unterminated JSX Content

Solution

@jesperorb
jesperorb / binding_in_react.md
Last active Mar 1, 2021
Examples of how to bind functions in React
View binding_in_react.md

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
jesperorb / firebase_object_to_array.js
Created Jun 19, 2017
Firebase object to array: { key: '' , value: ''}
View firebase_object_to_array.js
let arr = Object.entries(obj).map(entry => Object.assign({value: entry[1]}, { key: entry[0] }));