Skip to content

Instantly share code, notes, and snippets.

Avatar
💀
calc(dev*design)

Adam Argyle argyleink

💀
calc(dev*design)
View GitHub Profile
View history.coffee
history = [
1999: 'VRML'
2000: 'HTML'
2000: 'CSS'
2000: 'JavaScript'
2000: 'XML'
2005: 'ActionScript2'
2007: 'Java'
2007: 'PHP'
2007: 'MySQL'
@argyleink
argyleink / likes.rxjs.ts.js
Created Jan 6, 2017
There an easier way? RXJS subject to increment likes on an array object
View likes.rxjs.ts.js
// this really what it takes to increment a counter on an item in my observable
// likes is a subject, broadcasting the updated array eventually to the source observable being rendered
this.likes
.map(
(message: Message): IMessagesOperation =>
(messages: Message[]) => {
return messages.map((m: Message) => {
// todo: check if user has already liked
if (m.id == message.id)
++m.likes
View easy_dom.js
const el = function(options) {
let node = document.createElement(options.type || 'div')
if (options.id) node.id = options.id
if (options.class) node.className = options.class
if (options.text) node.textContent = options.text
if (options.html) node.innerHTML = options.html
return node
}
@argyleink
argyleink / vh-fix.js
Created Feb 14, 2016
Fix mobile layout thrashing from using VH's
View vh-fix.js
var els = document.querySelectorAll('.vh-fix')
if (!els.length) return
for (var i = 0; i < els.length; i++) {
var el = els[i]
if (el.nodeName === 'IMG') {
el.onload = function() {
this.style.height = this.clientHeight + 'px'
}
} else {
@argyleink
argyleink / notify.js
Created Mar 12, 2015
HTML5 Notifications module
View notify.js
app.notify = (function() {
// Determine the correct object to use
var notification = window.Notification || window.mozNotification || window.webkitNotification || false
, permission = false
, note;
function init() {
notification && notification.requestPermission(permissionSuccess);
}
View gzip.conf
# save to /etc/nginx/conf.d/gzip.conf
gzip on;
gzip_proxied any;
gzip_types text/plain text/xml text/css application/x-javascript;
gzip_vary on;
gzip_disable "MSIE [1-6]\.(?!.*SV1)";
View designer.html
<link rel="import" href="../core-scaffold/core-scaffold.html">
<link rel="import" href="../core-header-panel/core-header-panel.html">
<link rel="import" href="../core-menu/core-menu.html">
<link rel="import" href="../core-item/core-item.html">
<link rel="import" href="../core-icon-button/core-icon-button.html">
<link rel="import" href="../core-toolbar/core-toolbar.html">
<link rel="import" href="../core-icons/core-icons.html">
<link rel="import" href="../paper-item/paper-item.html">
<link rel="import" href="../paper-slider/paper-slider.html">
<link rel="import" href="../paper-toggle-button/paper-toggle-button.html">
View flexbox-grid.styl
// as seen here: https://github.com/zemirco/flexbox-grid/blob/master/flexbox-grid.styl
@import 'nib'
// variables
var-columns = 12
var-gutter-width = 1rem
// some styles that apply to all columns - makes final css nicer
$common-column-styles
box-sizing(border-box)
View server.md

Booting Up A Development Server

Open a console. Terminal.app on Macs, your shell or whatever on PCs.

Python is easiest:

python -m SimpleHTTPServer 8000

Then go to http://localhost:8000/ in a web browser.

View Getting started with requirejs.md

This is a small collection of scripts showing how to use require.js. It's only one of several ways of setting up a require.js project, but it's enough to get started.

At its core, require.js is about three things:

  1. Dependency management
  2. Modularity
  3. Dynamic script loading

The following files show how these are achieved.

You can’t perform that action at this time.