{
    "componentChunkName": "component---src-templates-post-js",
    "path": "/getting-closer-to-design-tools/",
    "result": {"data":{"mdx":{"body":"var _excluded = [\"components\"];\n\nfunction _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {\n  \"title\": \"Getting closer to design tools\",\n  \"date\": \"2020-01-10T00:00:00.000Z\",\n  \"summary\": \"When will design and development converge? If you look close enough they already have.\",\n  \"tags\": [\"theory\", \"design\", \"development\"]\n};\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, _excluded);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"p\", null, \"Show an example using TypeScript and GIFs to provide inline documentation.\"), mdx(\"blockquote\", {\n    \"className\": \"twitter-tweet\",\n    \"data-dnt\": \"true\"\n  }, mdx(\"p\", {\n    parentName: \"blockquote\",\n    \"lang\": \"en\",\n    \"dir\": \"ltr\"\n  }, \"Idea: instead of documenting thousands of open source libraries, what if we would focus our efforts on teaching (with very high quality material) how to read and understand the source code of libraries?\"), \"\\u2014 Andr\\xE9 Staltz (@andrestaltz) \", mdx(\"a\", {\n    parentName: \"blockquote\",\n    \"href\": \"https://twitter.com/andrestaltz/status/1215766848106573824\"\n  }, \"January 10, 2020\")), mdx(\"p\", null, \"Design tools have been around for a long time. Even before computers people were building beutiful works through printing presses. Logic has been around for just as long, even longer. These two mediums have seen a tremendous amount of growth in the last decade.\"), mdx(\"p\", null, \"In order to get closer to design tools we need to look at constructing UI from the point of view of a designer.\"), mdx(\"p\", null, \"If you\\u2019ve worked with frameworks like React Native there\\u2019s no cascade. This is important, people still ship impressive applications so don\\u2019t let the absence of the cascade hinder you.\"), mdx(\"h2\", {\n    \"id\": \"high-level-tooling\"\n  }, \"High level tooling\"), mdx(\"h2\", {\n    \"id\": \"declarative\"\n  }, \"Declarative\"), mdx(\"p\", null, \"Thankfully, in the last decade we\\u2019ve seen a rise in more declarative tooling on the web with component models being favored now more than ever.\"), mdx(\"p\", null, \"Going back to the web specifically the mental model of how we construct UI is not the same. Let\\u2019s see what we get when we take a CSS API and wrap it up in a delcarative manner.\"), mdx(\"h2\", {\n    \"id\": \"states-or-variants\"\n  }, \"States or Variants\"), mdx(\"p\", null, \"Some components have similar features that usually change themeable properties.\"), mdx(\"p\", null, \"Tools like jsxstyle took me down this path and with the rise of CSS in JS libraries I was intrigued to look into this pattern myself. Brent Jackson\\u2019s Box component with theming and styling.\"), mdx(\"p\", null, \"What is a design tool? Composing objects together.\"), mdx(\"p\", null, \"What is HTML? Composing content together.\"), mdx(\"p\", null, \"What is JSX? Composing content and logic together \\uD83E\\uDD2F\"), mdx(\"p\", null, \"JSX is the solution. It\\u2019s the perfect balance of logic and composition\"), mdx(\"p\", null, \"We just need constraints. Remember how design tools offered us a constrained easy way to design?\"), mdx(\"p\", null, \"The native framework we are given today is like giving a designer a pencil. There\\u2019s so much to think about right away that by the time we figure out the DSL or methodology someone chose. This is not to say it\\u2019s bad and we don\\u2019t want to hinder innovation, but these practices have been around for a long time. We should look to constraints so that we can focus on what\\u2019s most important, the user experience.\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, \"<Stack alignment />\\n\")));\n}\n;\nMDXContent.isMDXComponent = true;","excerpt":"Show an example using TypeScript and GIFs to provide inline documentation. https://twitter.com/andrestaltz/status/1215766848106573824 Design…","fields":{"readingTime":{"text":"2 min read"},"slug":"/getting-closer-to-design-tools/"},"frontmatter":{"date":"01/10/2020","summary":"When will design and development converge? If you look close enough they already have.","tags":["theory","design","development"],"title":"Getting closer to design tools","image":null}},"previous":null,"next":null},"pageContext":{"id":"c0375ee5-bded-5649-870b-ff6d1224da35"}},
    "staticQueryHashes": ["3764592887"]}