alexdiliberto

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

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

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

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

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

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

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

Use yarn with Greenkeeper

When using yarn, it will create a yarn.lock lockfile which holds data on your used dependencies. This file also includes hard-typed versions, so should you update your dependencies, the yarn.lock file is basically outdated and needs to be regenerated. While yarn does this automatically, Greenkeeper pull requests that update dependencies as of right now do not do this regeneration, which means you would have to do it manually.

This gist shows you a way how to automatise this step using a Travis CI script.

Prerequisites

• You use Travis CI and have it build Pull Requests (default behaviour)
• You have a yarn.lock file in your repository for Travis CI to automatically install yarn (yarn will be added to their default images soon)

Getting started

alexdiliberto

#!/bin/bash
echo "Generating an SSL private key to sign your certificate..."
openssl genrsa -des3 -out myssl.key 1024

echo "Generating a Certificate Signing Request..."
openssl req -new -key myssl.key -out myssl.csr

echo "Removing passphrase from key (for nginx)..."
cp myssl.key myssl.key.org
openssl rsa -in myssl.key.org -out myssl.key

alexdiliberto

You can use async/await in your Ember testing suite, today! This blog post explains the situation pretty thoroughly.

There are three ways we can get it to work. If you try it without any changes, you will get the error regeneratorRuntime is not defined.

Largest

One way to get around this is to enable every polyfill - but that's pretty big to include in your production application code unnecessarily (30kb minified & gzipped).

This also lets you use async/await in your app code.

Medium