Skip to content

Instantly share code, notes, and snippets.

Luke Melia lukemelia

Block or report user

Report or block lukemelia

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@lukemelia
lukemelia / store-yapp-api-query-blocking.js
Created Jun 17, 2019
Orbit strategy with filter based on whether in cache or not
View store-yapp-api-query-blocking.js
import {
RequestStrategy,
} from '@orbit/coordinator';
export default {
create() {
return new RequestStrategy({
name: 'store-yapp-api-query-blocking',
source: 'store',
@lukemelia
lukemelia / README.md
Last active Mar 25, 2019
keyboard-shortcut element modifer
View README.md

An element modifier to attach a keyboard shortcut to an element that has a click method

Example usage:

  <button {{action 'doSomethingCool'}} {{keyboard-shortcut "D"}}>
    [D]o something cool
  </button>
@lukemelia
lukemelia / README.md
Last active May 2, 2018 — forked from williamhaley/README.md
Ember Twiddle Demo: Mirage with Ember Twiddle
View README.md

Ember Twiddle Demo: Mirage with Ember Twiddle

Demo

This is a very trivial example of using mirage with Ember Twiddle.

@lukemelia
lukemelia / work-at-yapp.md
Created Mar 13, 2018
Ember, Rails & Mobile at Yapp (Remote)
View work-at-yapp.md

Ember, Rails & Mobile at Yapp (Remote)

Yapp is hiring a “full-stack” engineer, with key skills Ember.js & Rails. Join our small, talented team and do the best work of your career!

If you are passionate about your craft and want a chance to work remotely with a great team where you can influence the technology, process, product, and culture, read on!

About Yapp

We enable non-developers to create mobile apps for conference, trainings and employee communications. Yapp combines clean design, simple UX, and innovative mobile technology to empower people that may lack technical and design know-how, or just don't have time, to create and publish these apps in minutes.

View controllers.application.js
import Ember from 'ember';
export default Ember.Controller.extend({
appName: 'Ember Twiddle'
});
@lukemelia
lukemelia / 1-summary.md
Last active Jun 8, 2017
Simple component theming with broccoli.js
View 1-summary.md

My team and I have been working on a new internal component library to share across a few Ember apps. The library is an Ember addon in a private github repo. So far, so good. The off-the-beaten-path part of our requirements is that the components need to be themeable. Specifically, we support a color and a "light" or "dark" aesthetic.

We want a great developer experience for creating and updating these components, so we used ember-freestyle as a devDependency of the library to create a living style guide. We added some UI to allow theme switching and even a checkbox to switch themes every second (thanks ember-concurrency!).

The thing that gave us the biggest challenge was figuring out how to author and apply the styles that were necessarily dynamic. Specifically, the css rules that used the dynamic color.

We decided to organize our styles like so:

app/styles/components/
@lukemelia
lukemelia / circle.yml
Created Feb 2, 2017
Circle CI example deploying with ember-cli-deploy
View circle.yml
machine:
node:
version: 5
checkout:
post:
- git submodule sync
- git submodule update --init
dependencies:
View uuid.js
export function uuid() {
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
var r, v;
r = Math.random() * 16 | 0;
v = c === 'x' ? r : r & 3 | 8;
return v.toString(16);
});
}
View components.component-that-updates.js
import Ember from 'ember';
const { computed } = Ember;
export default Ember.Component.extend({
backgroundColor: computed('model.backgroundColor', {
get() {
return this.get('model.backgroundColor');
},
set(key, val) {
if (val && !/^#/.test(val) && val !== 'transparent') {
View components.non-yielding-component.js
import Ember from 'ember';
const { computed } = Ember;
const { readOnly } = computed;
export default Ember.Component.extend({
cost: readOnly('delayedCalculation.cost'),
tax: readOnly('delayedCalculation.tax'),
total: computed('cost', 'tax', function() {
return this.get('cost') + this.get('tax');
}),
You can’t perform that action at this time.