Skip to content

Instantly share code, notes, and snippets.

View freshcutdevelopment's full-sized avatar

Sean Hunter freshcutdevelopment

View GitHub Profile
@freshcutdevelopment
freshcutdevelopment / app.html
Created September 16, 2017 10:10
Aurelia code quality - part 2
<template>
<require from="./greeter"></require>
<greeter></greeter>
</template>
@freshcutdevelopment
freshcutdevelopment / app.js
Created September 16, 2017 10:08
app.js - (Aurelia code quality blog)
export class App{
}
@freshcutdevelopment
freshcutdevelopment / app.html
Last active September 12, 2017 19:45
Aurelia Shadow DOM - Example
<template>
<require from="./info-card"></require>
<h1>${message}</h1>
<hr/>
<info-card></info-card>
</template>
@freshcutdevelopment
freshcutdevelopment / index.html
Last active September 10, 2017 07:17
Shadow DOM Basics - Part 2
<html>
<head></head>
<body>
<template id="info-card">
<style>
.card-content {
border:1px solid grey;
width: 500px;
height: 150px;
margin-bottom:10px;
@freshcutdevelopment
freshcutdevelopment / index.html
Created September 10, 2017 07:15
Shadow DOM Basics - Part 1
<html>
<body>
<template id="info-card">
</template>
<script>
class XInfoCard extends HTMLElement {
// Monitor the 'message' attribute for changes.
static get observedAttributes() { return ['message']; }
@freshcutdevelopment
freshcutdevelopment / index.html
Created September 10, 2017 07:15
Shadow DOM Basics - Part 1
<html>
<body>
<template id="info-card">
</template>
<script>
class XInfoCard extends HTMLElement {
// Monitor the 'message' attribute for changes.
static get observedAttributes() { return ['message']; }
@freshcutdevelopment
freshcutdevelopment / index.html
Last active September 10, 2017 03:15
Shadow DOM Basics - Part 1
<html>
<body>
<template id="info-card">
</template>
<script>
class XInfoCard extends HTMLElement {
// Monitor the 'message' attribute for changes.
static get observedAttributes() { return ['message']; }
@freshcutdevelopment
freshcutdevelopment / shadow-dom-basics-part-1.html
Created September 9, 2017 00:51
HTML basics part 1 (Blog post)
<html>
<body>
<template id="info-card">
</template>
<script>
class XInfoCard extends HTMLElement {
// Monitor the 'message' attribute for changes.
static get observedAttributes() { return ['message']; }
@freshcutdevelopment
freshcutdevelopment / app.html
Last active September 8, 2017 06:51
Aurelia Table - Inject Row
<template>
<require from="./table-filter"></require>
<h1>${message}</h1>
<hr/>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th></th>
<th>Name</th>
<th>City</th>
@freshcutdevelopment
freshcutdevelopment / aurelia-shadow-dom-slots.html
Created September 6, 2017 10:29
Aurelia Shadow DOM slots (Blog)
<require from='./info-card.html'> <!-- import the info-card component -->
<info-card>
<span slot="header">
<h1>${card1Header}</h1>
</span>
<span slot="body">
<span>${card1Body}</span>
</span>
</info-card>