GEL

Technical documentation

Heydon

Abrupt greeting

Opposite of don’t

Quantity variable symbol

Developer, designer, writer

Developer, designer, writer

Developer, designer, writer

GEL

GEL

Global (as in everywhere)

Experience
(as in Jimi Hendrix)

Language
(as in the reification of meaning)

GEL

Pronounced “Gel” (life “Gif”)

It’s documentation.

  • How things have been done

  • How to do similar things

“Exemplification”

www.bbc.co.uk/gel

However...

“high level”

“low level”

?

BBC content and functionality
is for everyone.

GEL

Technical Documentation

Hence...

Which was very nearly...

GEF

An example:

  • Which HTML elements should the buttons be composed of?
  • Where should they appear in the source?
  • How should they be labeled for screen reader users?
  • Should they be grouped as a list?

And of course, there's
debouncing

inclusivedesignprinciples.org

Exemplify best practices

Without dictating stacks, frameworks, methodologies, etc.

:aria-pressed="state"
aria-pressed={state}

===

Concept / UX design

Interface

Technical architecture

High level

Low level

Design

Development

🤔

bbc.github.io/gel

The Pocket

height: 50vh
inert
inert
inert
inert
inert
inert
if (!item.isIntersecting) {
  item.target.setAttribute('inert', 'inert');
} else {
  item.target.removeAttribute('inert');
}
isIntersecting
!isIntersecting
if ('IntersectionObserver' in window) {
  // ENHANCE!
}

No IntersectionObserver?
Ditch it.

inert

It's so useful, we include a small polyfill

Continue reading...

this.next = this.truncated.querySelector('[inert]');
this.truncated.insertBefore(this.continue, this.next);

Continue reading...

Continue reading...

Logical
source
order

inclusivedesignprinciples.org

I wrote all of it!
(and I’d do it again, but...)

received wisdom

testing

innovation

ME:
@heydonworks
@heydon@mastodon.social
heydonworks.com
 


SITE: bbc.github.io/gel
CODE: github.com/bbc/gel/