Skip to content

Instantly share code, notes, and snippets.

@dfkaye

dfkaye/heydon.md

Last active August 14, 2020 17:50
Show Gist options
  • Save dfkaye/765b73bda7e8291633038301132028db to your computer and use it in GitHub Desktop.
Save dfkaye/765b73bda7e8291633038301132028db to your computer and use it in GitHub Desktop.
Download ZIP
Heydon Pickering's advice for writing less damned code
Raw
heydon.md

@heydonworks: write less damn code

margins

  • define once with universal selectors (re-define where you need to, which won't be much)
body * + * {
  margin-top: 1.5rem;
}

aria is for

  • making inaccessible html accessible
  • specific states (aria-expanded, etc.)
  • complex relationships (aria-describedby, etc.)
  • live regions (aria-live="polite" for messages)

like

  • collapse-expand states (toggle arrows):
    • CSS
    h3 [aria-expanded]:before {
  content: '\25ba\0020';
}
h3 [aria-expanded="true"]:before {
  content: '\25bc\0020';
}
    • HTML
    <h3>
  <button aria-expanded="true" aria-controls="collapsible-0">
    First title in block of content
  </button>
</h3>
  • tabindex="0" makes an element traverse-focusable
  • relative units for everything
  • don't use user-scalable=no
  • avoid fixed and absolute positioning (go with the flow)

responsive

  • font-size:
rule {
  font-size: calc(1em + 1vw)
}

grids

.grid {
  display: flex; /* 1 */
  flex-wrap: wrap; /* 2 */
  margin: -0.5em; /* 5 (edit me!) */
}
.grid > * {
  flex: 1 0 5em; /* 3 (edit me!) */
  margin: 0.5em; /* 4 (edit me!) */
}

spa treatments

  • :target pseudo attribute matches hash fragment in URL to element with matching id
.view { display: none }
.view:target { display: block }
  • onhashchange
var oldview = event.oldURL
// do something else (ajax or fetch or what-have-you)

resources

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment