Skip to content

Instantly share code, notes, and snippets.

Avatar

Gavin Joyce GavinJoyce

View GitHub Profile
View default-tailwind.css
This file has been truncated, but you can view the full file.
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
========================================================================== */
/**
* 1. Correct the line height in all browsers.
* 2. Prevent adjustments of font size after orientation changes in iOS.
*/
@GavinJoyce
GavinJoyce / ember-listbox.js
Last active Jun 18, 2020
vue / ember listbox comparison
View ember-listbox.js
// NOTE: this Ember app is presented in a similar way to the Vue app below to aid comparison.
// The actual app can be found here: https://github.com/GavinJoyce/tailwind-select-spike
import Component from "@glimmer/component";
import { tracked } from "@glimmer/tracking";
import { action } from "@ember/object";
import { guidFor } from "@ember/object/internals";
import { debounce } from "@ember/runloop";
function isString(value) {
View templates.application\.hbs
<div class="p-48 antialised font-sans test-gray-900">
<div class="max-w-xs mx-auto">
<Dropdown />
</div>
</div>
View components.outer\.js
import Component from "@glimmer/component";
import { tracked } from "@glimmer/tracking";
import { action } from "@ember/object";
let id = 0;
export default class extends Component {
@tracked items = [];
@action
@GavinJoyce
GavinJoyce / application.hbs
Last active Mar 2, 2020
Contextual components
View application.hbs
<Modal
@title="This is the title"
@body="This is the <i>body</i>"
/>
<Modal as |modal|>
<modal.Title as |title|>
This is the <i>title</i>!
</modal.Title>
<modal.Body as |body|>
View components.my-component.js
import Ember from 'ember';
export default Ember.Component.extend({
shared: [],
nonShared: undefined,
counter: 0,
init() {
this._super(...arguments);
this.set('nonShared', []);
View {{on-resize}} element modifier
import functionalModifier from "ember-functional-modifiers";
import ResizeObserver from "resize-observer-polyfill";
export function onResize(element, [action]) {
let resizeObserver = new ResizeObserver(entries => {
let entry = entries[0];
if (entry) {
let rectangle = entry.contentRect;
View controllers.application.js
import Ember from 'ember';
import { later, debounce } from '@ember/runloop';
export default Ember.Controller.extend({
logs: undefined,
init() {
this._super(...arguments);
this.logs = [];
},
View Ember Dublin: Octane preview workshop.md
View controllers.application.js
import Ember from 'ember';
export default Ember.Controller.extend({
appName: 'Ember Twiddle',
actions: {
changeCursorPosition(e) {
debugger;
console.log('change', e);
},