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”
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
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
🤔
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
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/
GEL for Colchester
By heydon
