Skip to content

Instantly share code, notes, and snippets.

@AndrewStanton94
AndrewStanton94 / gist:5742d76e4ef2eb1d4b2f
Last active August 29, 2015 14:11
Demonstrates closures. Closure is nested function. Idea is to make inner function with vars accessible once outer function has returned.
function say667() {
// Local variable that ends up within closure
var num = 666;
var sayAlert = function() { alert(num); }
num++;
return sayAlert;
}
var sayNumber = say667();
sayNumber(); // alerts 667
@AndrewStanton94
AndrewStanton94 / HTML5 Structure.md
Last active August 29, 2015 14:11
Summary of HTML5 tags for structuring documents.

section Extends div for logicaly related content

article Extends section for thing that makes sense by itself

aside For non-essential extras

figure For essential extras, supporting material

nav For navigation elements

@AndrewStanton94
AndrewStanton94 / 0_reuse_code.js
Last active August 29, 2015 14:11
Here are some things you can do with Gists in GistBox.
// Use Gists to store code you would like to remember later on
console.log(window); // log the "window" object to the console
@AndrewStanton94
AndrewStanton94 / css_resources.md
Last active August 29, 2015 14:11 — forked from jookyboi/css_resources.md
CSS libraries and guides to bring some order to the chaos.

Libraries

  • 960 Grid System - An effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem.
  • Compass - Open source CSS Authoring Framework.
  • Bootstrap - Sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.
  • Font Awesome - The iconic font designed for Bootstrap.
  • Zurb Foundation - Framework for writing responsive web sites.
  • SASS - CSS extension language which allows variables, mixins and rules nesting.
  • Skeleton - Boilerplate for responsive, mobile-friendly development.

Guides

@AndrewStanton94
AndrewStanton94 / toggleVisibility.js
Created December 19, 2014 17:32
Use to hide or show an element. Requires button to toggle, element to hide and label for button.
function flipHSpara(btn, para, label)
{
var button = document.getElementById(btn);
var parastyle = document.getElementById(para).style;
label = label || ''; //http://javascript.info/tutorial/arguments
if (parastyle.display==='none')
{parastyle.display='block'; button.value='Hide ' + label ;}
else
{
parastyle.display='none'; button.value='Show ' + label;
@AndrewStanton94
AndrewStanton94 / Form.html
Last active August 29, 2015 14:11
Form with js submit eventListener that overrides default behaviour. Without preventDefault the form values are added to URL.
<!DOCTYPE HTML>
<html>
<head>
<title>Dynasite 2c</title>
<meta charset = 'UTF-8'>
<link rel="icon" href="favicon.ico">
<script src='ds2c.js'></script>
<style>
fieldset {border-radius: 5px}
</style>
@AndrewStanton94
AndrewStanton94 / aFormWithOutput.html
Last active August 29, 2015 14:11
Takes values from form and displays them onscreen.
<!DOCTYPE HTML>
<html>
<head>
<title>Dynasite 2d</title>
<meta charset = 'UTF-8'>
<link rel="icon" href="favicon.ico">
<script src='ds2d.js'></script>
<style>
fieldset {border-radius: 5px}
</style>
@AndrewStanton94
AndrewStanton94 / aBadAjaxGet.html
Last active August 29, 2015 14:11
Ugly way of getting a resurce from server. NOTE, this requires a server, a file:/// (same origin) URL for the get will fail on line 15.js This is bad because 1) using .event to add function 2) Need to check status and readystate. 4 calls for each fetching of a resource. Changes. V2: Putting code into a function. V3: Breaking function into 2. 1 f…
<!DOCTYPE HTML>
<html>
<head>
<title>ds3a</title>
<meta charset = 'UTF-8'>
<link rel='icon' href='favicon.ico'>
<script src='ds3d.js'></script>
</head>
@AndrewStanton94
AndrewStanton94 / ajaxAndPhp.html
Last active August 29, 2015 14:11
Shows how ajaxGet can be used for .txt & .php. Full example. getdir can be called by passing its url as first arg of ajaxget.js same with d3sg.js
<!DOCTYPE HTML>
<html>
<head>
<title>ds3e</title>
<meta charset = 'UTF-8'>
<link rel='icon' href='favicon.ico'>
<script src='lib/ajaxget.js'></script>
<script src='ds3e.js'></script>
</head>
@AndrewStanton94
AndrewStanton94 / windowCommands.js
Last active August 29, 2015 14:11
Functions and attributes of the document element.
//Atributes
window.screen.width;
window.screen.height;
window.name;
window.location; // URL
window.document.title;
window.document.forms[name]; // Use key to retrieve form
window.document.images[name]; // Use key to retrieve image
// The images width & height attrs are rw-able