beaucharman

Accessibilty Considerations

Images

• Provide Alt attributes to describe what the subject of the image asset is.
• Informative and descriptive file name (Great for SEO too :D).
• For images that are for pure decoration, apply alt="null" and do not provide a title attribute to mark as safely ignore for Assistive Technology.

Anchors

beaucharman

Terminal Notes and Snippets

Configuration

Show full path in finder

defaults write com.apple.finder _FXShowPosixPathInTitle -bool YES

beaucharman

sudo nano ~/.bash_profile

parse_git_branch() {
    git branch 2> /dev/null | sed -e '/^[^*]/d' -e 's/* \(.*\)/ (\1)/'
}
PS1='\e[0;35m⌘\e[0;34m \w/\e[0m\e[0;32m$(parse_git_branch)\e[0m '


alias projectlt3="cd ~/Sites/lt3-development/"

beaucharman

// To reclaim ownership of the .npm directory execute

sudo chown -R $(whoami) ~/.npm

beaucharman

// Chapter two - exercise one
// c2e1();
function c2e1() {
  var hashCount = 1;
  var hashes = '#';
  for (;hashCount <= 7; hashCount++) {
    console.log(hashes);
    hashes += '#';
  }
}

beaucharman

function recursiveFlatten(array, ignoreObjects = false) {
  let current = []
  const arrayLength = array.length
  
  function isType(obj, type = 'Object') {
    return Object.prototype.toString.call(obj).indexOf(type) !== -1
  }

  for (let i = 0; i < arrayLength; i++) {
    let result

beaucharman

function forEach(obj, callback) {
  Object.keys(obj).forEach((item) => {
    return callback(obj, item)
  })
}

// usage
let obj = { a: 1, b: 2, c: 3 }
let array = []
forEach(obj, function(obj, item) {

beaucharman

// https://gist.github.com/sebmarkbage/ef0bf1f338a7182b6775#gistcomment-1770639
// "If your higher order component need state or lifecycle methods use this:""
const hoc = C => class _hoc extends React.Component {
  render() {
    return <C {...this.props}/>;
  }
}
// "If you don´t need state or lifecycle methods on your HOC this snip is more functional:""
const hoc = C => _hoc(props) => {
  return <C { ...props }/>;

beaucharman

Mounting

componentWillMount

componentWillMount()

• setState() can be called here and won't cause a rerender

---

beaucharman

function safeSplice(array, start, deleteCount, ...replace) {
  const removed = array.splice(start, deleteCount, ...replace)
  return { 
    array: array,
    removed: removed,
  }
} 

/** usage
const array = [1, 2, 3, 4, 5, 6]