GavinJoyce

/*! 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

// 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) {

GavinJoyce

<div class="p-48 antialised font-sans test-gray-900">
  <div class="max-w-xs mx-auto">
    <Dropdown />
  </div>
</div>

GavinJoyce

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

<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|>

GavinJoyce

import Ember from 'ember';

export default Ember.Component.extend({
  shared: [],
  nonShared: undefined,
  counter: 0,
  
  init() {
    this._super(...arguments);
   	this.set('nonShared', []); 

GavinJoyce

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;

GavinJoyce

import Ember from 'ember';
import { later, debounce } from '@ember/runloop';

export default Ember.Controller.extend({
  logs: undefined,
  
  init() {
    this._super(...arguments);
    this.logs = [];
  },

GavinJoyce

These are some notes for the Ember Dublin March 2019 meet up. This hist can be found at http://bit.ly/octane-dublin.

Node 8+ is recommended for the workshop, as is the latest version of ember-cli.

Useful links:

• Ember Octane
• My Octane preview video (slightly out of date, MU mainly)
• Chris Garret’s series:
• Native Classes

GavinJoyce

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  
  actions: {
   	changeCursorPosition(e) {
      debugger;
      console.log('change', e);
    },