Ravenstine

(function() {
/*!
 * @overview  Ember - JavaScript Application Framework
 * @copyright Copyright 2011-2019 Tilde Inc. and contributors
 *            Portions Copyright 2006-2011 Strobe Inc.
 *            Portions Copyright 2008-2011 Apple Inc. All rights reserved.
 * @license   Licensed under MIT license
 *            See https://raw.github.com/emberjs/ember.js/master/LICENSE
 * @version   3.16.3
 */

Ravenstine

import Ember from 'ember';
import Controller from '@ember/controller';
import { action } from '@ember/object';
import { tracked } from '@glimmer/tracking';
import { htmlSafe } from '@ember/template';

const { precompile } = Ember.__loader.require('ember-template-compiler')

export default class ApplicationController extends Controller {
  appName = 'Ember Twiddle';

Ravenstine

<h2>Nifty Squares</h2>

<label for="toggle">Show squares?</label>
<Input id="toggle" @type="checkbox" name="isAdmin" @checked={{this.this.showSquares}} />

<div class="nifty-squares">
  {{#if this.showSquares}}
    {{yield}}
  {{/if}}
</div>

Ravenstine

import Adapter from '@ember-data/adapter';
import RENTALS from '../lib/rentals';

export default class ApplicationAdapter extends Adapter {
	findAll() {
    return {
      data: RENTALS
    };
  }

Ravenstine

{{#each this.rows as |row|}}
	<div class="board-row">
		{{#each row as |square|}}
      <button class="square" {{on "click" (fn this.selectSquare square.index)}}>
        {{square.value}}
      </button>
		{{/each}}
  </div>
{{/each}}

Ravenstine

import Controller from '@ember/controller';

export default class ApplicationController extends Controller {
  appName = 'Ember Twiddle';
}

Ravenstine

import scrypt from 'scrypt-js';

const ALPHABET = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz01233456789~!@#$%^&*_-+=`|(){}[]:;"\'<>,.?/';
/**
 * Checks for presence of lowercase letters, uppercase letters, digits, and special characters
 */
const VALIDATION_REGEX = /^(?=.*[a-z]+)(?=.*[A-Z]+)(?=.*[0-9]+)(?=.*[\W]+).*$/;

/**
 * Takes an array of bytes and converts it to a string of substituted characters.

Ravenstine

Building a Context Menu with Custom Elements

A custom context menu is a classic UI pattern that effectively expose features in your app. Today, we're going to talk about how you can create a custom context menu using HTML and JavaScript that is both flexible and accessible.

If only it were native

Your first thought might be to try to customize the native context menus as implemented by browsers. There is, in fact, an HTML element called <menu> <menu> can make this possible.

That said, I must disappoint you, because the <menu> element is deprecated and poorly supported across browsers. In fact, it's really only Firefox that supports it.

Ravenstine

Git Tricks

Display log in reverse (starting from beginning)

git log --reverse

List all files that have changed from master

git diff --name-only master | tr '\n' ' '

Revert a single commit (without yet creating a new commit)

Ravenstine

// app/adapters/application.js
import DS from 'ember-data';
import { inject as service } from '@ember-decorators/service';
const { RESTAdapter } = DS;


export default class ApplicationAdapter extends RESTAdapter {

  @service fastboot;
  @service shoebox;