trevdor

export function truncateMiddle(text: string, truncationLength: number) {
  if (text.length <= truncationLength || truncationLength <= ELLIPSIS_WIDTH) {
    return text;
  }

  // ceil to favor an extra char or two before vs after the ellipsis
  const halfLength = Math.ceil((truncationLength - ELLIPSIS_WIDTH) / 2);
  const preEllipsisText = text.substr(0, halfLength).trim();
  const postEllipsisText = text
    .substr(

trevdor

1. identify a component `desktop-client` does poorly on mobile
2. find the corresponding component in `/mobile` and copy it somewhere reasonable within `/desktop-client` 
    e.g. `packages/loot-design/src/components/mobile/accounts.js -> packages/desktop-client/src/components/accounts/MobileAccounts.js`
 (I don't like this either, but haven't decided what would be better. Open to suggestions! Maybe a `/mobile` subfolder within e.g. `src/components/accounts`, `src/components/budget`...) It all feels a bit off cuz we're in `desktop-client` after all.
3. point the relevant bit of code to the new component 
    e.g. 
```
  const AcctCmp = isMobile ? MobileAccounts : Accounts; 
  return (<AcctCmp {...props} />);
```

trevdor

Definitions

TestID First

To interact with a UI element from a test, apply a data-testid attribute to that element in app code, then find by test ID.

TestID Last

To interact with a UI element from a test, first choice are accessible selectors like role, label, placeholder, then HTML5 and ARIA selectors based on title or alt text. Use data-testid as a last resort. This is the view put forth by @testing-library:

trevdor

Keybase proof

I hereby claim:

• I am trevdor on github.
• I am trevdor (https://keybase.io/trevdor) on keybase.
• I have a public key ASAjVeGRgM0_NMT_lh-aKH_RTt3qSNBhHv_v0Y5p6yQIBQo

To claim this, I am signing this object:

trevdor

git log --color --graph --pretty=format:'%Cred%h%Creset -%C(yellow)%d%Creset %s %Cgreen(%cr)%C(bold blue)<%an>%Creset' --abbrev-commit

trevdor

import React from 'react';

import { createStyledComponent } from 'mineral-ui/styles';
import StartEnd from 'mineral-ui/StartEnd';

import NavTabs from './NavTabs';
import ProfileMenu from './ProfileMenu';

const Header = createStyledComponent(StartEnd, ({ theme }) => ({
  backgroundColor: theme.panel_backgroundColor,

trevdor

import _ from 'lodash';
import Immutable from 'immutable';

import {
  initialState,
  getPlan,
  getPlanProperty,
  getPlans,
} from '../redux/reducers/PlanReducer';