Declarative Design - Jeremy Keith - Wey Wey Wey 2023
•
0 likes•5 views
The document discusses declarative programming versus imperative programming and provides examples of declarative programming approaches including structured query language and CSS. It also discusses how declarative design can be applied to buttons, controls, and design systems. While declarative design has advantages, whether it is better than imperative depends on factors like the medium, platform, and how tightly one wants to control the design versus allowing flexibility. An overall philosophy of responsive and declarative design is suggested for the open Web.
Report
Share
Declarative Design - Jeremy Keith - Wey Wey Wey 2023
- 9. programming
- 11. 1. create an array of items 2. loop through each item 3. test if a condition is true 4. return the result
- 14. SELECT items FROM table WHERE condition IS TRUE
- 15. World Wide Web
- 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
- 27. utopia.fyi
- 29. calc() clamp() min() and max() fi t-content min-content and max-content repeat() minmax()
- 31. every-layout.dev
- 35. it depends declarative > imperative?
- 36. culture
- 37. management
- 40. culture
- 41. design systems
- 43. thinking
- 45. systems thinking
- 46. design systems
- 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
- 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
- 63. Thank you