Skip to content

Instantly share code, notes, and snippets.

@bvaughn
bvaughn / overview-for-angular-apps-with-roles-and-permissions.md
Last active Apr 28, 2017
RE: Reddit Angular JS question "Advice on separating the logical parts of an application"
View overview-for-angular-apps-with-roles-and-permissions.md

This gist is in response to a question asked on the Reddit Angular JS forum about how to structure an Angular app with roles and permissions.

There are many ways to approach this, but I'll share one that I've used before and maybe it will give you an idea. I'd combine all of the above into a single app and control who gets to see what using permissions. There are a few components to this approach...

A local session service

First off I'd advise creating some sort of local session management service. This should be able to track whether you have an authenticated user and- if so- what types of permissions that user has. (Lots of ways to manage permissions. I'll assume your user object has either a 'role' enum or something simple like an array of string permissions.) You could roll your own session service or you could check out something like satellizer.

Let's assume yo

@bvaughn
bvaughn / $q-decorator
Last active Aug 29, 2015
Additional methods for $q
View $q-decorator
var qDecorator = function($delegate) {
/**
* Similar to $q.reject, this is a convenience method to create and resolve a Promise.
* @param {Object} data Value to resolve the promise with
* @returns {Promise} A resolved promise
*/
$delegate.resolve = function(data) {
var deferred = this.defer();
deferred.resolve(data);
@bvaughn
bvaughn / gist:0e178b3fe5ef916d0389
Last active Aug 29, 2015
Sample Task Runner script
View gist:0e178b3fe5ef916d0389

Here is a simple example showing how to use:

index.html

<html>
  <head>
@bvaughn
bvaughn / gist:23749a3464d94a162205
Last active Aug 29, 2015
Task Runner example script
View gist:23749a3464d94a162205

Here is a simple example showing how to use:

  • XHRTask to load data via an XML HTTP request.
  • ClosureTask to define a small task within the context of a larger task-flow.
  • DependencyGraphTask to define application flow with only a few lines of code.

index.html

<html>
  <head>
    <script src="libs/task-runner/task-runner.js"></script>
@bvaughn
bvaughn / forms-js-validation-schema-proposal-1.md
Last active Aug 29, 2015
forms-js validation schema (proposal 1)
View forms-js-validation-schema-proposal-1.md

Validation example for the form shown here: http://jeremydorn.com/json-editor/

Assuming all of the fields in the form you linked to are required, I'll start by showing what formFor validation rules would look like:

{
  name: {
    required: true
  },
  age: {
@bvaughn
bvaughn / gist:012fb525e6c819fdc9bf
Last active May 23, 2016
Debugging Angular bindings
View gist:012fb525e6c819fdc9bf

This afternoon I encountered a race condition in an Angular app I'm working on. Essentially my controller was pushing some values to an Array on its scope and something (I wasn't sure what) was asynchronously overriding the Array's contents. The Array was being used by a custom directive- written by someone else- as well as an ngModel and it wasn't clear who was making the change.

I ended up trying something I had not done before and it worked well enough that I thought I'd post it here in case it helped anyone else.

First I enabled The "Async" option in Chrome's "Sources > Call Stack" panel.

Next I set a breakpoint in my controller where I was modifying the Array. When I hit that breakpoint, I ran the following code in my console:

Object.observe(this.theArray, function(changes) {
@bvaughn
bvaughn / gist:e363aa6c9c2e9e210787
Created Jul 12, 2015
JavaScript utility capable of highlighting elements matching CSS selector(s)
View gist:e363aa6c9c2e9e210787
var StyleMatcher = function() {
this.indicatorContainer_ = document.createElement('div');
document.body.appendChild(this.indicatorContainer_);
};
StyleMatcher.DEFAULT_STYLES_ = {
position: 'absolute',
borderWidth: '1px',
borderStyle: 'solid',
@bvaughn
bvaughn / gist:3a358dda3654e1e93fba35890a093c19
Created May 14, 2016
Example Grid with columns and rows, built using :cellRangeRenderer (with react-virtualized 7.x)
View gist:3a358dda3654e1e93fba35890a093c19
/** @flow */
import Immutable from 'immutable'
import React, { Component, PropTypes } from 'react'
import { ContentBox, ContentBoxHeader, ContentBoxParagraph } from '../demo/ContentBox'
import { LabeledInput, InputRow } from '../demo/LabeledInput'
import AutoSizer from '../AutoSizer'
import Grid from './Grid'
import shallowCompare from 'react-addons-shallow-compare'
import cn from 'classnames'
import styles from './Grid.example.css'
@bvaughn
bvaughn / react-virtualized-framerate-test.js
Last active Feb 17, 2021
Quick demonstration of a way to measure scrolling performance for react-virtualized in an automated way
View react-virtualized-framerate-test.js
/** Measures framerate for the time between start() and stop() calls */
function FramerateMeasurer () {
this.start = () => {
this._beginTime = ( performance || Date ).now()
this._frames = 0
this._animationFrameId = requestAnimationFrame(this._loop)
}
this.stop = () => {
const endTime = ( performance || Date ).now()
View redux-localStorage-module.js
/** @flow */
import Immutable from 'immutable'
import { createSelector } from 'reselect'
const LOCAL_STORAGE_KEY = 'LocalStorageModule'
const ACTION_TYPES = {
REMOVE: 'REMOVE_ACTION',
SET: 'SET_ACTION'
}