Declarative Design - Jeremy Keith

1. Declarative
Design

9. programming

10. imperative
programming

11. 1. create an array of items
2. loop through each item
3. test if a condition is true
4. return the result

12. declarative
programming

13. Structured
Query
Language

14. SELECT items FROM table
WHERE condition IS TRUE

15. World
Wide
Web

16. JavaScript
CSS
HTML

17. imperative
declarative
programming

18. mindset
imperative
declarative

19. button

20. <div
tabindex={0}
onClick={onClickButtonHandler}
onKeyDown={onKeyDownHandler}
onKeyUp={onKeyUpHandler}
role="button"
>
example
</div>
function isDisabled(eventTarget) {
const ariaDisabled = eventTarget.getAttribute("aria-disabled");
const isDisabled = ariaDisabled === "" || ariaDisabled === "true";
return isDisabled;
}
function onKeyDownHandler(event) {
if (event.key === " ") {
// We have to disable default space behavior which is scrolling page down.
event.preventDefault();
}
if (event.key === "Enter" && !isDisabled(event.target)) {
onClickButtonHandler();
}
}
function onKeyUpHandler(event) {
if (event.key === " " && !isDisabled(event.target)) {
onClickButtonHandler();
}
}

21. <div
tabindex={0}
onClick={onClickButtonHandler}
onKeyDown={onKeyDownHandler}
onKeyUp={onKeyUpHandler}
role="button"
>
example
</div>
function isDisabled(eventTarget) {
const ariaDisabled = eventTarget.getAttribute("aria-disabled");
const isDisabled = ariaDisabled === "" || ariaDisabled === "true";
return isDisabled;
}
function onKeyDownHandler(event) {
if (event.key === " ") {
// We have to disable default space behavior which is scrolling page down.
event.preventDefault();
}
if (event.key === "Enter" && !isDisabled(event.target)) {
onClickButtonHandler();
}
}
function onKeyUpHandler(event) {
if (event.key === " " && !isDisabled(event.target)) {
onClickButtonHandler();
}
}
<button>
example
</button>

22. <div
tabindex={0}
onClick={onClickButtonHandler}
onKeyDown={onKeyDownHandler}
onKeyUp={onKeyUpHandler}
role="button"
>
example
</div>
function isDisabled(eventTarget) {
const ariaDisabled = eventTarget.getAttribute("aria-disabled");
const isDisabled = ariaDisabled === "" || ariaDisabled === "true";
return isDisabled;
}
function onKeyDownHandler(event) {
if (event.key === " ") {
// We have to disable default space behavior which is scrolling page down.
event.preventDefault();
}
if (event.key === "Enter" && !isDisabled(event.target)) {
onClickButtonHandler();
}
}
function onKeyUpHandler(event) {
if (event.key === " " && !isDisabled(event.target)) {
onClickButtonHandler();
}
}
button

23. control

24. control
imperative

25. control
imperative
declarative

27. utopia.fyi

29. calc()
clamp()
min() and max()
fi
t-content
min-content and max-content
repeat()
minmax()

30. youtube.com/layoutland

31. every-layout.dev

32. buildexcellentwebsit.es

33. declarative design

34. declarative > imperative?

35. it depends
declarative > imperative?

36. culture

37. management

38. imperative
management

39. imperative
declarative
management

40. culture

41. design systems

42. imperative
declarative
design systems

43. thinking

44. analytic
thinking

45. systems
thinking

46. design systems

48. #B45B39
#912D0E
#571D0B
#421709
#CD262F
#A60003
#6B0002
#520001
#CEA32E
#AB7906
#866004
#523C02

49. Th
e border should be 10% lighter
than the background colour.”
“

50. declarative > imperative?
design systems

51. it depends

53. it depends

54. the medium

55. print
native apps
os-speci
fi
c

56. print
native apps
os-speci
fi
c

57. World
Wide
Web

58. World
Wide
Web

59. Th
e more you tighten your grip, the more the
World Wide Web slips through your
fi
ngers.”
“

60. a dao of web design

61. responsive web design

62. declarative design

63. Thank you