alexdiliberto

Introduction

Many people are confused by the {{mut}} helper because it seems very magical. This gist aims to help you construct a mental model for understanding what is going on when you use it.

History

Prior to the introduction of {{mut}}, form elements were two-way bound by default. That is, given this component:

import Ember from 'ember';
export default Ember.Component.extend({

alexdiliberto

Convert MOV to GIF using FFmpeg and ImageMagick

I tried a few different techniques to make a GIF via command-line and the following gives me the best control of quality and size. Once you're all setup, you'll be pumping out GIFs in no time!

Preparation

Install FFmpeg

• $ brew install ffmpeg [all your options]
  • Example: $ brew install ffmpeg --with-fdk-aac --with-ffplay --with-freetype --with-frei0r --with-libass --with-libvo-aacenc --with-libvorbis --with-libvpx --with-opencore-amr --with-openjpeg --with-opus --with-rtmpdump --with-schroedinger --with-speex --with-theora --with-tools

Install ImageMagick

alexdiliberto

app.import() works with node_modules now! As of Ember 2.15. Previously it only worked with bower_components and vendor.

Docs for app.import are here: https://ember-cli.com/managing-dependencies#standard-non-amd-asset

This method (vendor-shim) wraps the global export into an es6 module (but the global one is still present). It doesn't use an es6 interface even if the library offers one, but that's okay for my use case.

Things could still be easier, see this thread for the current state of that.

alexdiliberto

This assert.asyncThrows custom assertion allows us to write tests against failing async code, usually as a result of a server error (4xx/5xx response).

test('If the index route errors, I see a message', async function(assert) {
  server.create('post');
  server.get('/posts/:id', { errors: ['The site is down'] }, 500); // force Mirage to error

  await assert.asyncThrows(() => {
    return visit('/posts/1');
 }, 'GET /posts/1 returned a 500');

alexdiliberto

// Re: busting the cache when using service worker
// The service worker JS name isn't fingerprinted, so if it has cache headers, it won't be updated and then none of your
// assets will be updated (because they're cached by the service worker for offline access). This is one technique for 
// caching headers to ensure you're only caching fingerprinted assets

<VirtualHost *:8080>
    ServerAdmin webmaster@dummy-host.example.com
    DocumentRoot "/Users/martndemus/Projects/DockYard/smart-shopping-list/dist"
    ServerName localhost

alexdiliberto

ServiceWorker for github pages

This is a ServiceWorker template to turn small github pages into offline ready app.

Why ?

Whenever I make small tools & toys, I create github repo and make a demo page using github pages (like this one).
Often these "apps" are just an index.html file with all the nessesary CSS and JavaScript in it (or maybe 2-3 html/css/js files). I wanted to cache these files so that I can access my tools offline as well.

Notes

Make sure your github pages have HTTPS enforced, you can check Settings > GitHub Pages > Enforce HTTPS of your repository.

alexdiliberto

// models/draft/lesson.js
export { default } from '../lesson';

alexdiliberto

import Controller from '@ember/controller';
import { get, set } from '@ember/object';
import { action, computed } from '@ember-decorators/object';

export default class ApplicationController extends Controller {
  init() {
    super.init(...arguments);
    
    const initial = [
      { 'email.address': 'hello@example' },

alexdiliberto

export default class StyleGroup {
  constructor(styles) {
    this.styles = styles;
    this.name = ''; // must set at runtime
  }
}

alexdiliberto

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: ''
});