Skip to content

Instantly share code, notes, and snippets.

View Tor020's full-sized avatar

Kevin Tor020

View GitHub Profile
@Tor020
Tor020 / LICENSE
Created June 7, 2017 07:56 — forked from ourmaninamsterdam/LICENSE
Arrayzing - The JavaScript array cheatsheet
The MIT License (MIT)
Copyright (c) 2015 Justin Perry
Permission is hereby granted, free of charge, to any person obtaining a copy of
this software and associated documentation files (the "Software"), to deal in
the Software without restriction, including without limitation the rights to
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
the Software, and to permit persons to whom the Software is furnished to do so,
subject to the following conditions:
@Tor020
Tor020 / bookmarkleting.md
Created September 16, 2017 23:01 — forked from caseywatts/bookmarkleting.md
Making Bookmarklets

Making Bookmarklets

I'm feeling very clever. I've got this sweet line of javascript that replaces "cloud" with "butt". My mom would LOVE this, but she doesn't computer very well. I'm afraid to show her the Developer Console and have her type/paste this in. But she IS pretty good at bookmarks, she knows just how to click those!

A bookmark normally takes you to a new web page. A bookmarklet is a bookmark that runs javascript on the current page instead of taking you to a new page. To declare that it is a bookmarklet, the "location" it points to starts with javascript:.

This guide will walk you through creating your first bookmarklet. For a more thorough guide check out the great website Bookmarklets - Browser Power.

Some bookmarklets are pretty cool. Become a spaceship that shoots and destroys elements on the webpage you're on with Kick Ass. Or make pages rainbow and sparkly with Cornify.

@Tor020
Tor020 / js-concepts.md
Created September 24, 2017 23:54 — forked from ericelliott/js-concepts.md
Seven JS Concepts You Must Understand Before Your Next Job Interview

Here are seven JavaScript concepts you must understand before you go into your next JavaScript job interview:

  1. Prototypes - JavaScript is a prototype-based language. Even more, it's a delegation-based system, which means that each object has a prototype chain. When you try to access a property on an object, and that property is not found, JavaScript looks at the object's prototype. The prototype is a delegate object, which means that the property lookup is delegated to the prototype object. That object, in turn, may have its own prototype. The search continues up the prototype chain until it reaches the root prototype, which is usually Object.prototype. The best feature of this system is that many object instances can share the same methods on a prototype object, which conserves memory and enables easy code reuse. To assign a prototype to a new object, you can use Object.create(prototypeObject). Prototypal OO is the first course being offered in the "Learn JavaScript" series.

  2. Functional Programming

@Tor020
Tor020 / js-concepts.md
Created September 24, 2017 23:54 — forked from ericelliott/js-concepts.md
Seven JS Concepts You Must Understand Before Your Next Job Interview

Here are seven JavaScript concepts you must understand before you go into your next JavaScript job interview:

  1. Prototypes - JavaScript is a prototype-based language. Even more, it's a delegation-based system, which means that each object has a prototype chain. When you try to access a property on an object, and that property is not found, JavaScript looks at the object's prototype. The prototype is a delegate object, which means that the property lookup is delegated to the prototype object. That object, in turn, may have its own prototype. The search continues up the prototype chain until it reaches the root prototype, which is usually Object.prototype. The best feature of this system is that many object instances can share the same methods on a prototype object, which conserves memory and enables easy code reuse. To assign a prototype to a new object, you can use Object.create(prototypeObject). Prototypal OO is the first course being offered in the "Learn JavaScript" series.

  2. Functional Programming

@Tor020
Tor020 / README-Template.md
Created October 6, 2017 02:15 — forked from PurpleBooth/README-Template.md
A template to make good README.md

Project Title

One Paragraph of project description goes here

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.

Prerequisites

@Tor020
Tor020 / util-elastic-collision.js
Created October 16, 2017 01:42 — forked from christopher4lis/util-elastic-collision.js
A set of utility functions used to reproduce the effect of elastic collision within HTML5 canvas. Used in the Chris Courses tutorial video on collision detection: https://www.youtube.com/watch?v=789weryntzM
/**
* Rotates coordinate system for velocities
*
* Takes velocities and alters them as if the coordinate system they're on was rotated
*
* @param Object | velocity | The velocity of an individual particle
* @param Float | angle | The angle of collision between two objects in radians
* @return Object | The altered x and y velocities after the coordinate system has been rotated
*/
@Tor020
Tor020 / util-elastic-collision.js
Created October 16, 2017 01:42 — forked from christopher4lis/util-elastic-collision.js
A set of utility functions used to reproduce the effect of elastic collision within HTML5 canvas. Used in the Chris Courses tutorial video on collision detection: https://www.youtube.com/watch?v=789weryntzM
/**
* Rotates coordinate system for velocities
*
* Takes velocities and alters them as if the coordinate system they're on was rotated
*
* @param Object | velocity | The velocity of an individual particle
* @param Float | angle | The angle of collision between two objects in radians
* @return Object | The altered x and y velocities after the coordinate system has been rotated
*/
@Tor020
Tor020 / user.js
Created December 15, 2017 04:49 — forked from EtienneR/user.js
XMLHttpRequest RESTful (GET, POST, PUT, DELETE)
// Get all users
var url = "http://localhost:8080/api/v1/users";
var xhr = new XMLHttpRequest()
xhr.open('GET', url, true)
xhr.onload = function () {
var users = JSON.parse(xhr.responseText);
if (xhr.readyState == 4 && xhr.status == "200") {
console.table(users);
} else {
console.error(users);
@Tor020
Tor020 / what-forces-layout.md
Created February 15, 2018 00:53 — forked from paulirish/what-forces-layout.md
What forces layout/reflow. The comprehensive list.

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Element

Box metrics
  • elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent
  • elem.clientLeft, elem.clientTop, elem.clientWidth, elem.clientHeight
  • elem.getClientRects(), elem.getBoundingClientRect()
@Tor020
Tor020 / postcss.config.js
Created March 31, 2018 21:32 — forked from jgierer12/postcss.config.js
Minimal CSS Modules + PostCSS webpack config
module.exports = {
plugins: {
'postcss-cssnext': {},
// other plugins (https://github.com/postcss/postcss#plugins)
'cssnano': {}
}
}