jamesarosen

I have a function that generates image URLs. This function combines some relatively static global configuration with some dynamic data that changes on every invocation. I say "relatively static" because the configuration is loaded asynchronously during the application boot, but remains fixed after that.

Option One

export default async function imageUrl(imageId, { size = 'normal' }) {
  if (imageId == null) return null
  
  const constantsResponse = await fetch('/api/constants')
 const imagesRoot = constantsResponse.json().imagesRoot

jamesarosen

Recently, I needed to extract a number of directories from a git project each into their own projects. The original directory structure looked like

project/
  subprojects/
    Foo/
    Bar/
    Baz

jamesarosen

/**
  * @example
  * const users = addServerTiming(responseHeaders, 'LU', () => db.fetch('users'))
  * @see https://web.dev/custom-metrics/?utm_source=devtools#server-timing-api
  */
export default function addServerTiming<T>(headers: Headers, label: string, callback: () => T): T {
  const start = Date.now();
  const maybePromise = callback();

  if (maybePromise instanceof Promise) {

jamesarosen

I have a project that's been happily chugging along on Travis for a while. Its .travis.yml looks something like

script:
  - node_modules/ember-cli/bin/ember test

I wanted to add a second parallel build that did something very different. I didn't want to run ember test with a different Ember version or some other flag. I wanted to run a completely different command. Specifically, I wanted to run LicenseFinder's audit.

Travis has great docs on customizing parallel builds, but nothing describes how to do two completely different commands.

jamesarosen

# Braintree publish a list of their CIDR blocks and IP addresses at
# https://assets.braintreegateway.com/json/ips.json
# The body looks like
# {
#   "production": {
#     "cidrs": [
#       "1.2.3.4/5"
#     ]
#     "ips": [
#       "6.7.8.9"

jamesarosen

TL;DR

In Ember, always use {{...}}, not {{{...}}}. Use Ember.String.htmlSafe as necessary in JavaScript (usually in a component) to mark markup as HTML-safe. Never pass user-entered content directly to Ember.String.htmlSafe.

Details

Ember has great XSS protection built in. The HTMLBars templating library will automatically run any interpolations through htmlEscape for you. So

jamesarosen

Ember Data Notes

A Little Background

These are some notes on the workings of Ember-Data. They written from the perspective of migrating a Backbone app to Ember. Below, "Sierra" is the Backbone app, while "Tango" is its successor.

Store

• central clearinghouse of data
• singleton

jamesarosen

Background

Cory Foy recently wrote an article entitled, Procedural Polymorphism: Is your code really telling you to use an if statement?. Corey Haines has been talking about this same topic for a while. Sandi Metz covers the topic in Practical Object-Oriented Design in Ruby. Ben Rady and Rod Coffin discussed using the Null-Object pattern instead of an if statement in Continuous Testing with Ruby, Rails, and JavaScript.

Printing in Conway's Game of Life

That is, very smart people whom I admire agree that, in general,

class DeadCell

jamesarosen

function isCacheable(response) {
  const vary = response.headers.get('Vary')

  return (
    response.status >= 200 &&
    response.status < 400 &&
    response.status !== 206 &&
    response.headers.get('Cache-Control') != null &&
    vary !== '_' &&
    vary !== '*'

jamesarosen

I looked around for a good popover library for Ember. I couldn't find one I liked (and was compatible with Ember 1.13 and Glimmer), so I whipped up a little ditty:

{{!-- app/pop-over/template.hbs --}}
{{yield}}

// app/pop-over/component.js
import $ from "jquery";