fed

First principles

• It should be easy to get around. We offer keyboard-based shortcuts to navigate throughout HEY and structure the app’s layout with function in mind.
• We design with legibility at the forefront. HEY uses easy-to-read fonts and we prioritize high contrast in our designs.
• Accessibility is a constant requirement. We’re never “done” working on the accessibility of HEY.

Current accessibility review process

At Basecamp, our Accessibility Lead is also our Quality Assurance Lead, Michael Berger. Michael works with a team at Aspiritech to to test every new feature and workflow before it is shipped. Michael has also developed — and continues to maintain — an internal Accessibility Handbook as a resource for designers.

fed

Issue / Request

Client context

Priority context

Affected versions

Acceptance criteria

fed

CSS Specificity

When multiple selectors are targeting the same element, the browser needs to know which one to apply. This is where the cascading aspect of CSS and specificity come into play. It's important to understand how specificity is calculated, so that you'll be able to figure out which style will actually end being applied in the browser.

(
  inline styles,
  IDs,
  classes | attributes | pseudo-classes,
  elements | pseudo-elements

fed

Debugging Snippet

This snippet is useful for debugging things like who's setting focus on a particular element.

DevTools > Source tab > Top left panel > Select snippet > New snippet

Disclaimer: this snippet only breaks when <HTMLElement>.focus() is called -- if you want to break on focus events, Safari's debugger lets you set DOM event breakpoints.

fed

const numbers = [13, 5, -3, 7, 6, 4, 1, 17, 0, -1, -2];

function sort(arr) {
  const sorted = arr.slice();
  let swapped;

  do {
    swapped = false;

    for (let i = 0, l = sorted.length; i < l; i++) {

fed

// Recursively
// From `n`, all the way down to 1
function factorial(n) {
  if (n < 2) {
    return 1;
  }
  
  return n * factorial(n - 1);
}

fed

function Node(data) {
  this.data = data;
  this.next = null
}

function LinkedList() {
  this.head = null;
  this.length = 0;
}

fed

function Counter() {
  this.count = 0;
  this.observers = [];
}

Counter.prototype.increment = function () {
  this.count++;
  this.notify({ count: this.count });
};

fed

// Time complexity: O(n)
// Space complexity: O(n)

const memo = new Map();

function fibonacci(n) {
  if (memo.has(n)) {
    return memo.get(n);
  }
  

fed

/*
 * Rendering our component server side
 */
var React = require('react');
var App = require('../lib/components/todo-item');
var data = { title: 'Hello world!' };

var renderedComponent = ReactDOMServer.renderToString(<App data={data} />);