sylwiaeb

prettyUrl: (url) =>

    hasProtocol = url.indexOf '://'

    if hasProtocol > -1
        protocol = url.slice(0, hasProtocol + 3)
        url = url.slice(hasProtocol + 3, url.length)
        return {
            protocol: protocol
            url: url

sylwiaeb

// Returns 1,2,3,... indexes based on even index from {{#each}} loop

import Ember from 'ember';

export function ruleNo(val) {
    return val === 0 ? 1 : val / 2 + 1;
}

export default Ember.Helper.helper(ruleNo);

sylwiaeb

import Ember from 'ember';

export default Ember.Component.extend({
});

sylwiaeb

import Ember from 'ember';

export default Ember.TextArea.extend({
  rows: 1,
  input() {
    this.resizeTextArea();
  },
  resizeTextArea() {
    let el = this.get('element');
    el.style.height = 'auto';

sylwiaeb

Making Accessible Ember Components

Making the web accessible is important. We have ethical and, in some cases, legal obligations to ensuring access to all of users.

Luckily for us, it's easy to make an accessible Ember Component.

What are components?

To understand the accessibility story around Ember Components, we have to start by talking about Web Components. Ember Components are designed to be interoperable with the final Web Components API.

sylwiaeb

import Ember from 'ember';

export default Ember.TextField.extend({
  size: 69,

  loadData: function() {
    // API.loadData.sratata()
    return 1500;
  },

sylwiaeb

import Ember from 'ember';
export { dirtyHasMany, dirtyBelongsTo, dirtyMixin };

var dirty = 'relationshipIsDirty';

function dirtyMixin (obj) {
  var args = Object.keys(obj);
  var comp = Ember.computed;
  args.push('isDirty');
  obj[dirty] = comp.any.apply(comp, args);

sylwiaeb

While attempting to explain JavaScript's reduce method on arrays, conceptually, I came up with the following - hopefully it's helpful; happy to tweak it if anyone has suggestions.

Intro

JavaScript Arrays have lots of built in methods on their prototype. Some of them mutate - ie, they change the underlying array in-place. Luckily, most of them do not - they instead return an entirely distinct array. Since arrays are conceptually a contiguous list of items, it helps code clarity and maintainability a lot to be able to operate on them in a "functional" way. (I'll also insist on referring to an array as a "list" - although in some languages, List is a native data type, in JS and this post, I'm referring to the concept. Everywhere I use the word "list" you can assume I'm talking about a JS Array) This means, to perform a single operation on the list as a whole ("atomically"), and to return a new list - thus making it much simpler to think about both the old list and the new one, what they contain, and

sylwiaeb

// Determine if an element is in the visible viewport
function isInViewport(element) {
  var rect = element.getBoundingClientRect();
  var html = document.documentElement;
  return (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <= (window.innerHeight || html.clientHeight) &&
    rect.right <= (window.innerWidth || html.clientWidth)
  );

sylwiaeb

import Ember from 'ember';

export default Ember.Component.extend({
  options: [{value: 'A', show: true},
            {value: 'B', show: true},
            {value: 'C', show: true}
           ],
  
  listItems: [],