{
  "version": 3,
  "sources": ["ssg:https://framerusercontent.com/modules/NEd4VmDdsxM3StIUbddO/fJ8vwGe6kxfz7kj9H7Sk/YouTube.js", "ssg:https://framerusercontent.com/modules/a5iTA2cV2fdmDinvGsu1/K0xdfhRY4Dc6uV98eINp/AVdUf_FiS.js"],
  "sourcesContent": ["import { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { useReducer, useState } from \"react\";\nimport { ControlType, addPropertyControls } from \"framer\";\nimport { useIsOnCanvas, emptyStateStyle, containerStyles, defaultEvents, useRadius, borderRadiusControl } from \"https://framer.com/m/framer/default-utils.js@^0.45.0\";\nvar PlayOptions;\n(function (PlayOptions) {\n  PlayOptions[\"Normal\"] = \"Off\";\n  PlayOptions[\"Auto\"] = \"On\";\n  PlayOptions[\"Loop\"] = \"Loop\";\n})(PlayOptions || (PlayOptions = {}));\nvar ThumbnailOptions;\n(function (ThumbnailOptions) {\n  ThumbnailOptions[\"High\"] = \"High Quality\";\n  ThumbnailOptions[\"Medium\"] = \"Medium Quality\";\n  ThumbnailOptions[\"Low\"] = \"Low Quality\";\n  ThumbnailOptions[\"Off\"] = \"Off\";\n})(ThumbnailOptions || (ThumbnailOptions = {}));\nvar ThumbnailFormat;\n(function (ThumbnailFormat) {\n  ThumbnailFormat[\"WebP\"] = \"webp\";\n  ThumbnailFormat[\"JPG\"] = \"jpg\";\n})(ThumbnailFormat || (ThumbnailFormat = {})); /**\n                                               * @framerIntrinsicWidth 560\n                                               * @framerIntrinsicHeight 315\n                                               *\n                                               * @framerSupportedLayoutWidth fixed\n                                               * @framerSupportedLayoutHeight fixed\n                                               *\n                                               * @framerComponentPresetProps isRed, borderRadius\n                                               */\nexport function Youtube({\n  url,\n  play,\n  shouldMute,\n  thumbnail,\n  isRed,\n  onClick,\n  onMouseEnter,\n  onMouseLeave,\n  onMouseDown,\n  onMouseUp,\n  ...props\n}) {\n  const onCanvas = useIsOnCanvas();\n  const isAutoplay = play !== PlayOptions.Normal;\n  const showThumbnail = onCanvas || thumbnail !== ThumbnailOptions.Off && !isAutoplay;\n  const [isPreloading, preloadVideo] = useReducer(() => true, false);\n  const [showVideo, startVideo] = useReducer(() => true, !showThumbnail);\n  const [isHovered, setHovered] = useState(false);\n  const borderRadius = useRadius(props);\n  const hasBorderRadius = borderRadius !== \"0px 0px 0px 0px\" && borderRadius !== \"0px\";\n  if (url === \"\") {\n    return /*#__PURE__*/_jsx(Instructions, {});\n  }\n  const parsedURL = parseVideoURL(url);\n  if (parsedURL === undefined) {\n    return /*#__PURE__*/_jsx(ErrorMessage, {\n      message: \"Invalid Youtube URL.\"\n    });\n  }\n  const [videoId, embedURL] = parsedURL; // https://stackoverflow.com/questions/2068344/how-do-i-get-a-youtube-video-thumbnail-from-the-youtube-api\n  const thumbnailURL = getThumbnailURL(videoId, thumbnail, getWebPSupported() ? ThumbnailFormat.WebP : ThumbnailFormat.JPG); // https://developers.google.com/youtube/player_parameters\n  const searchParams = embedURL.searchParams;\n  searchParams.set(\"iv_load_policy\", \"3\");\n  searchParams.set(\"rel\", \"0\");\n  searchParams.set(\"modestbranding\", \"1\");\n  searchParams.set(\"playsinline\", \"1\");\n  if (isAutoplay || showThumbnail) {\n    searchParams.set(\"autoplay\", \"1\");\n  }\n  if (isAutoplay && shouldMute) {\n    searchParams.set(\"mute\", \"1\");\n  }\n  if (play === PlayOptions.Loop) {\n    searchParams.set(\"loop\", \"1\");\n    searchParams.set(\"playlist\", videoId);\n  }\n  if (!isRed) {\n    searchParams.set(\"color\", \"white\");\n  }\n  return /*#__PURE__*/_jsxs(\"article\", {\n    onPointerEnter: () => setHovered(true),\n    onPointerLeave: () => setHovered(false),\n    onPointerOver: preloadVideo,\n    onClick: startVideo,\n    style: {\n      ...wrapperStyle,\n      borderRadius,\n      transform: hasBorderRadius && showVideo ? \"translateZ(0.000001px)\" : \"unset\",\n      cursor: \"pointer\",\n      overflow: \"hidden\"\n    },\n    children: [isPreloading && /*#__PURE__*/_jsx(\"link\", {\n      rel: \"preconnect\",\n      href: \"https://www.youtube.com\"\n    }), isPreloading && /*#__PURE__*/_jsx(\"link\", {\n      rel: \"preconnect\",\n      href: \"https://www.google.com\"\n    }), /*#__PURE__*/_jsx(\"div\", {\n      style: {\n        ...videoStyle,\n        background: showThumbnail ? `center / cover url(${thumbnailURL}) no-repeat` : undefined\n      }\n    }), showVideo ? /*#__PURE__*/_jsx(\"iframe\", {\n      style: videoStyle,\n      src: embedURL.href,\n      frameBorder: \"0\",\n      allow: \"presentation; fullscreen; accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\",\n      onClick: onClick,\n      onMouseEnter: onMouseEnter,\n      onMouseLeave: onMouseLeave,\n      onMouseDown: onMouseDown,\n      onMouseUp: onMouseUp\n    }) : /*#__PURE__*/_jsx(PlayButton, {\n      onClick: startVideo,\n      isHovered: isHovered,\n      isRed: isRed\n    })]\n  });\n}\nYoutube.displayName = \"YouTube\";\naddPropertyControls(Youtube, {\n  url: {\n    type: ControlType.String,\n    title: \"Video\"\n  },\n  play: {\n    type: ControlType.Enum,\n    title: \"Autoplay\",\n    options: Object.values(PlayOptions)\n  },\n  shouldMute: {\n    title: \"Mute\",\n    type: ControlType.Boolean,\n    enabledTitle: \"Yes\",\n    disabledTitle: \"No\",\n    hidden(props) {\n      return props.play === PlayOptions.Normal;\n    }\n  },\n  thumbnail: {\n    title: \"Thumbnail\",\n    description: \"Showing a thumbnail improves performance.\",\n    type: ControlType.Enum,\n    options: Object.values(ThumbnailOptions),\n    hidden(props) {\n      return props.play !== PlayOptions.Normal;\n    }\n  },\n  isRed: {\n    title: \"Color\",\n    type: ControlType.Boolean,\n    enabledTitle: \"Red\",\n    disabledTitle: \"White\"\n  },\n  ...borderRadiusControl,\n  ...defaultEvents\n});\nconst defaultProps = {\n  url: \"https://youtu.be/smPos0mJvh8\",\n  play: PlayOptions.Normal,\n  shouldMute: true,\n  thumbnail: ThumbnailOptions.Medium,\n  isRed: true\n};\nYoutube.defaultProps = defaultProps;\nfunction parseVideoURL(urlString) {\n  let url;\n  try {\n    url = new URL(urlString);\n  } catch {\n    const embedURL = getEmbedURL(urlString);\n    return [urlString, embedURL];\n  }\n  if (url.hostname === \"youtube.com\" || url.hostname === \"www.youtube.com\" || url.hostname === \"youtube-nocookie.com\" || url.hostname === \"www.youtube-nocookie.com\") {\n    const pathSegments = url.pathname.slice(1).split(\"/\"); // https://www.youtube.com/watch?v=Fop2oskTug8\n    if (pathSegments[0] === \"watch\") {\n      const videoId = url.searchParams.get(\"v\");\n      const embedURL1 = getEmbedURL(videoId);\n      return [videoId, embedURL1];\n    } // https://www.youtube.com/embed/Fop2oskTug8\n    if (pathSegments[0] === \"embed\") {\n      const videoId1 = pathSegments[1];\n      return [videoId1, url];\n    }\n  } // https://youtu.be/Fop2oskTug8\n  if (url.hostname === \"youtu.be\") {\n    const videoId2 = url.pathname.slice(1);\n    const embedURL2 = getEmbedURL(videoId2);\n    return [videoId2, embedURL2];\n  }\n}\nfunction getEmbedURL(videoId) {\n  return new URL(`https://www.youtube.com/embed/${videoId}`);\n}\nfunction getThumbnailURL(videoId, res, format = ThumbnailFormat.JPG) {\n  // https://gist.github.com/a1ip/be4514c1fd392a8c13b05e082c4da363\n  const pre = ThumbnailFormat.WebP ? \"https://i.ytimg.com/vi_webp/\" : \"https://i.ytimg.com/vi/\";\n  const ext = ThumbnailFormat.WebP ? \"webp\" : \"jpg\";\n  switch (res) {\n    case ThumbnailOptions.Low:\n      return `${pre}${videoId}/hqdefault.${ext}`;\n    case ThumbnailOptions.Medium:\n      return `${pre}${videoId}/sddefault.${ext}`;\n    case ThumbnailOptions.High:\n      return `${pre}${videoId}/maxresdefault.${ext}`;\n    default:\n      return `${pre}${videoId}/0.${ext}`;\n  }\n}\nlet _getWebPSupported; // https://stackoverflow.com/a/27232658\nfunction getWebPSupported() {\n  // We're going to default to webp because it's pretty widely supported by now\n  if (!window) {\n    return true;\n  }\n  if (_getWebPSupported !== undefined) {\n    return _getWebPSupported;\n  }\n  const element = document.createElement(\"canvas\");\n  if (!!(element.getContext && element.getContext(\"2d\"))) {\n    // was able or not to get WebP representation\n    return element.toDataURL(\"image/webp\").indexOf(\"data:image/webp\") == 0;\n  } else {\n    // very old browser like IE 8, canvas not supported\n    return false;\n  }\n} // Helper components\nfunction Instructions() {\n  return /*#__PURE__*/_jsx(\"div\", {\n    style: {\n      ...emptyStateStyle,\n      overflow: \"hidden\"\n    },\n    children: /*#__PURE__*/_jsx(\"div\", {\n      style: centerTextStyle,\n      children: \"To embed a Youtube video, add the URL to the properties\\xa0panel.\"\n    })\n  });\n}\nfunction ErrorMessage({\n  message\n}) {\n  return /*#__PURE__*/_jsx(\"div\", {\n    className: \"framerInternalUI-errorPlaceholder\",\n    style: {\n      ...containerStyles,\n      overflow: \"hidden\"\n    },\n    children: /*#__PURE__*/_jsxs(\"div\", {\n      style: centerTextStyle,\n      children: [\"Error: \", message]\n    })\n  });\n}\nfunction PlayButton({\n  onClick,\n  isHovered,\n  isRed\n}) {\n  return /*#__PURE__*/_jsx(\"button\", {\n    onClick: onClick,\n    \"aria-label\": \"Play\",\n    style: buttonStyle,\n    children: /*#__PURE__*/_jsxs(\"svg\", {\n      height: \"100%\",\n      version: \"1.1\",\n      viewBox: \"0 0 68 48\",\n      width: \"100%\",\n      children: [/*#__PURE__*/_jsx(\"path\", {\n        d: \"M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z\",\n        fill: isHovered ? isRed ? \"#f00\" : \"#000\" : \"#212121\",\n        fillOpacity: isHovered ? isRed ? 1 : .8 : .8,\n        style: {\n          transition: \"fill .1s cubic-bezier(0.4, 0, 1, 1), fill-opacity .1s cubic-bezier(0.4, 0, 1, 1)\"\n        }\n      }), /*#__PURE__*/_jsx(\"path\", {\n        d: \"M 45,24 27,14 27,34\",\n        fill: \"#fff\"\n      })]\n    })\n  });\n}\nconst buttonStyle = {\n  position: \"absolute\",\n  top: \"50%\",\n  left: \"50%\",\n  transform: \"translate(-50%, -50%)\",\n  width: 68,\n  height: 48,\n  padding: 0,\n  border: \"none\",\n  background: \"transparent\",\n  cursor: \"pointer\"\n};\nconst wrapperStyle = {\n  position: \"relative\",\n  width: \"100%\",\n  height: \"100%\"\n};\nconst centerTextStyle = {\n  textAlign: \"center\",\n  minWidth: 140\n};\nconst videoStyle = {\n  position: \"absolute\",\n  top: 0,\n  left: 0,\n  height: \"100%\",\n  width: \"100%\"\n};\nexport const __FramerMetadata__ = {\n  \"exports\": {\n    \"Youtube\": {\n      \"type\": \"reactComponent\",\n      \"name\": \"Youtube\",\n      \"slots\": [],\n      \"annotations\": {\n        \"framerSupportedLayoutWidth\": \"fixed\",\n        \"framerContractVersion\": \"1\",\n        \"framerIntrinsicHeight\": \"315\",\n        \"framerComponentPresetProps\": \"isRed, borderRadius\",\n        \"framerIntrinsicWidth\": \"560\",\n        \"framerSupportedLayoutHeight\": \"fixed\"\n      }\n    },\n    \"__FramerMetadata__\": {\n      \"type\": \"variable\"\n    }\n  }\n};\n//# sourceMappingURL=./YouTube.map", "import { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { addPropertyControls, ControlType } from \"framer\";\nimport { motion } from \"framer-motion\";\nimport * as React from \"react\";\nimport { Youtube as YouTube } from \"https://framerusercontent.com/modules/NEd4VmDdsxM3StIUbddO/fJ8vwGe6kxfz7kj9H7Sk/YouTube.js\"; /**\n                                                                                                                                 * @framerRecordIdKey id\n                                                                                                                                 * @framerSlug SVI4jjfql\n                                                                                                                                 * @framerData\n                                                                                                                                 */\nconst data = [{\n  ffO_YEfhb: \"WaLO_7RX3\",\n  FhYxJ2nwg: \"\",\n  id: \"cO4LsmP4Y\",\n  Jbxal0AIu: /*#__PURE__*/_jsxs(React.Fragment, {\n    children: [/*#__PURE__*/_jsx(\"p\", {\n      children: \"Nocode tools are an exciting development that is democratizing software creation, making it possible for more people to become entrepreneurs and create their own tech solutions. These tools are user-friendly, enabling people to create functional software using drag-and-drop interfaces and visual editors, which is ideal for prototyping and MVPs. However, nocode tools have their limitations, and more complex or custom software will likely still require traditional coding. \"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"While nocode tools can save time and money in the short term, it's important to consider the long-term costs of maintaining and scaling the software created with them. Nocode tools are a new form of tool for designers and non-technical founders that are worth exploring, but traditional coding knowledge still has its value and necessity. \"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"It's important to approach each project's best approach depending on the nature and complexity of the project, the skill set of the team, and the long-term goals for the software.\"\n    })]\n  }),\n  kbLro620V: \"NoCode will take over in 2023\",\n  mh8GZmrLl: \"\",\n  Q409fqAbY: \"\",\n  rTaOFH6bK: \"2023-02-13T00:00:00.000Z\",\n  SVI4jjfql: \"nocode-will-take-over-in-2023\",\n  wRjLIa41P: {\n    alt: \"\",\n    src: new URL(\"https://framerusercontent.com/images/adc5TVdCHgtujN91Icd24CtsaE.jpg?scale-down-to=4096\").href,\n    srcSet: `${new URL(\"https://framerusercontent.com/images/adc5TVdCHgtujN91Icd24CtsaE.jpg?scale-down-to=512\").href} 512w, ${new URL(\"https://framerusercontent.com/images/adc5TVdCHgtujN91Icd24CtsaE.jpg?scale-down-to=1024\").href} 1024w, ${new URL(\"https://framerusercontent.com/images/adc5TVdCHgtujN91Icd24CtsaE.jpg?scale-down-to=2048\").href} 2048w, ${new URL(\"https://framerusercontent.com/images/adc5TVdCHgtujN91Icd24CtsaE.jpg?scale-down-to=4096\").href} 4096w, ${new URL(\"https://framerusercontent.com/images/adc5TVdCHgtujN91Icd24CtsaE.jpg\").href} 7952w`\n  },\n  Xl25t3bAR: \"\",\n  zdr2anIWT: \"\"\n}, {\n  ffO_YEfhb: \"oJTmSkbTL\",\n  FhYxJ2nwg: \"\",\n  id: \"vE5yqUYh7\",\n  Jbxal0AIu: /*#__PURE__*/_jsxs(React.Fragment, {\n    children: [/*#__PURE__*/_jsx(\"p\", {\n      children: \"Design is an essential part of our lives, shaping everything from the products we use to the buildings we live and work in. Design is not just about aesthetics but also about solving problems, making things easier to use, and improving our quality of life. Here are some thoughts on design:\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Design is about problem-solving: The purpose of design is to solve problems, whether it's creating a product that meets the needs of the user or designing a building that functions well.\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Design is about user experience: Good design considers the user's needs and how they will interact with the product or environment. User experience is a crucial aspect of design, and it should be prioritized in any design project.\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Design is about aesthetics: While design is not just about aesthetics, it does play a crucial role in how people interact with products and environments. Good design should be both functional and aesthetically pleasing.\"\n    }), /*#__PURE__*/_jsx(motion.div, {\n      className: \"framer-text-module\",\n      style: {\n        \"--aspect-ratio\": \"560 / 315\",\n        aspectRatio: \"var(--aspect-ratio)\",\n        height: \"var(--framer-aspect-ratio-supported, 315px)\",\n        width: \"100%\"\n      },\n      children: /*#__PURE__*/_jsx(YouTube, {\n        borderRadius: 0,\n        bottomLeftRadius: 0,\n        bottomRightRadius: 0,\n        isMixedBorderRadius: false,\n        isRed: true,\n        play: \"Off\",\n        shouldMute: true,\n        thumbnail: \"Medium Quality\",\n        topLeftRadius: 0,\n        topRightRadius: 0,\n        url: \"https://youtu.be/smPos0mJvh8\"\n      })\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Design is about creativity: Designers need to think creatively to come up with innovative solutions to problems. Creativity is essential to successful design, and it should be encouraged and nurtured.\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Design is about collaboration: Design is not a one-person job, and collaboration is essential for a successful project. Designers need to work closely with clients, engineers, and other stakeholders to ensure that the final product meets everyone's needs.\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Design is about sustainability: Sustainable design is becoming increasingly important as we face environmental challenges. Designers should consider the impact of their work on the environment and strive to create solutions that are environmentally friendly.\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Design is about accessibility: Good design should be accessible to everyone, regardless of their abilities. Designers should consider the needs of people with disabilities and create solutions that are inclusive.\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Design is about innovation: Design is about pushing boundaries and coming up with new and innovative solutions. Designers should be willing to take risks and explore new ideas to create something truly unique and groundbreaking.\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"In conclusion, design is a multifaceted discipline that plays a crucial role in our lives. Good design is about problem-solving, user experience, aesthetics, creativity, collaboration, sustainability, accessibility, and innovation. It is a constant process of iteration and improvement, and it should always be focused on creating solutions that make our lives better. As we continue to face new challenges and opportunities, design will play an increasingly important role in shaping our future.\"\n    })]\n  }),\n  kbLro620V: \"Why good design is important\",\n  Q409fqAbY: \"\",\n  rTaOFH6bK: \"2023-02-13T00:00:00.000Z\",\n  SVI4jjfql: \"why-good-design-is-important\",\n  wRjLIa41P: {\n    alt: \"\",\n    src: new URL(\"https://framerusercontent.com/images/y3Wqbcbr7P4thvP7Rilkpcnwzw.jpg?scale-down-to=4096\").href,\n    srcSet: `${new URL(\"https://framerusercontent.com/images/y3Wqbcbr7P4thvP7Rilkpcnwzw.jpg?scale-down-to=512\").href} 409w, ${new URL(\"https://framerusercontent.com/images/y3Wqbcbr7P4thvP7Rilkpcnwzw.jpg?scale-down-to=1024\").href} 819w, ${new URL(\"https://framerusercontent.com/images/y3Wqbcbr7P4thvP7Rilkpcnwzw.jpg?scale-down-to=2048\").href} 1638w, ${new URL(\"https://framerusercontent.com/images/y3Wqbcbr7P4thvP7Rilkpcnwzw.jpg?scale-down-to=4096\").href} 3276w, ${new URL(\"https://framerusercontent.com/images/y3Wqbcbr7P4thvP7Rilkpcnwzw.jpg\").href} 4000w`\n  },\n  zdr2anIWT: \"\"\n}, {\n  ffO_YEfhb: \"WaLO_7RX3\",\n  FhYxJ2nwg: \"Check out Webflow\",\n  id: \"pN1jPPmwq\",\n  Jbxal0AIu: /*#__PURE__*/_jsxs(React.Fragment, {\n    children: [/*#__PURE__*/_jsx(\"p\", {\n      children: \"Nocode tools are an exciting development that is democratizing software creation, making it possible for more people to become entrepreneurs and create their own tech solutions. These tools are user-friendly, enabling people to create functional software using drag-and-drop interfaces and visual editors, which is ideal for prototyping and MVPs. However, nocode tools have their limitations, and more complex or custom software will likely still require traditional coding. \"\n    }), /*#__PURE__*/_jsx(\"img\", {\n      alt: \"\",\n      className: \"framer-image\",\n      \"data-framer-asset\": \"data:framer/asset-reference,XEyz2u7GFakcSDEiZTh43pbcV6o.webp\",\n      \"data-framer-height\": \"2484\",\n      \"data-framer-width\": \"3816\",\n      height: \"1242\",\n      src: new URL(\"https://framerusercontent.com/images/XEyz2u7GFakcSDEiZTh43pbcV6o.webp\").href,\n      style: {\n        aspectRatio: \"3816 / 2484\"\n      },\n      width: \"1908\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: /*#__PURE__*/_jsx(\"br\", {\n        className: \"trailing-break\"\n      })\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"While nocode tools can save time and money in the short term, it's important to consider the long-term costs of maintaining and scaling the software created with them. Nocode tools are a new form of tool for designers and non-technical founders that are worth exploring, but traditional coding knowledge still has its value and necessity. \"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"It's important to approach each project's best approach depending on the nature and complexity of the project, the skill set of the team, and the long-term goals for the software.\"\n    })]\n  }),\n  kbLro620V: \"Thoughts on NoCode\",\n  mh8GZmrLl: \"https://www.framer.com/?via=cedric_design\",\n  Q409fqAbY: \"\",\n  rTaOFH6bK: \"2023-02-13T00:00:00.000Z\",\n  SVI4jjfql: \"thoughts-on-nocode\",\n  wRjLIa41P: {\n    alt: \"\",\n    src: new URL(\"https://framerusercontent.com/images/U0ENtRKoapKpGuhJBwVhZy1DzN4.jpg\").href,\n    srcSet: `${new URL(\"https://framerusercontent.com/images/U0ENtRKoapKpGuhJBwVhZy1DzN4.jpg?scale-down-to=512\").href} 512w, ${new URL(\"https://framerusercontent.com/images/U0ENtRKoapKpGuhJBwVhZy1DzN4.jpg?scale-down-to=1024\").href} 1024w, ${new URL(\"https://framerusercontent.com/images/U0ENtRKoapKpGuhJBwVhZy1DzN4.jpg?scale-down-to=2048\").href} 2048w, ${new URL(\"https://framerusercontent.com/images/U0ENtRKoapKpGuhJBwVhZy1DzN4.jpg\").href} 3413w`\n  },\n  Xl25t3bAR: \"www.webflow.com\",\n  zdr2anIWT: \"Check out Framer\"\n}, {\n  ffO_YEfhb: \"oJTmSkbTL\",\n  FhYxJ2nwg: \"\",\n  id: \"Aq6RTasQt\",\n  Jbxal0AIu: /*#__PURE__*/_jsxs(React.Fragment, {\n    children: [/*#__PURE__*/_jsx(\"p\", {\n      children: \"Designers and developers often work in separate silos, but the line between their roles is becoming increasingly blurred. As technology continues to advance, designers should learn how to code to stay relevant in their field. Here are ten reasons why designers should learn how to code:\"\n    }), /*#__PURE__*/_jsxs(\"ol\", {\n      style: {\n        \"--framer-font-size\": \"16px\",\n        \"--framer-text-alignment\": \"start\",\n        \"--framer-text-color\": \"rgb(209, 213, 219)\",\n        \"--framer-text-transform\": \"none\"\n      },\n      children: [/*#__PURE__*/_jsx(\"li\", {\n        \"data-preset-tag\": \"p\",\n        children: /*#__PURE__*/_jsx(\"p\", {\n          children: \"Better communication: Learning how to code allows designers to communicate more effectively with developers, creating a shared language between the two disciplines.\"\n        })\n      }), /*#__PURE__*/_jsx(\"li\", {\n        \"data-preset-tag\": \"p\",\n        children: /*#__PURE__*/_jsx(\"p\", {\n          children: \"More control: Designers who code can take control of the entire design process, from conception to implementation.\"\n        })\n      }), /*#__PURE__*/_jsx(\"li\", {\n        \"data-preset-tag\": \"p\",\n        children: /*#__PURE__*/_jsx(\"p\", {\n          children: \"Faster prototyping: Designers who code can quickly create prototypes, test them, and make changes on the fly.\"\n        })\n      }), /*#__PURE__*/_jsx(\"li\", {\n        \"data-preset-tag\": \"p\",\n        children: /*#__PURE__*/_jsx(\"p\", {\n          children: \"Better understanding of limitations: By learning how to code, designers can understand the technical limitations and possibilities of a project and design with them in mind.\"\n        })\n      }), /*#__PURE__*/_jsx(\"li\", {\n        \"data-preset-tag\": \"p\",\n        children: /*#__PURE__*/_jsx(\"p\", {\n          children: \"Easier collaboration: When designers can code, they can work more closely with developers, allowing for a smoother collaboration and quicker turnaround time.\"\n        })\n      }), /*#__PURE__*/_jsx(\"li\", {\n        \"data-preset-tag\": \"p\",\n        children: /*#__PURE__*/_jsx(\"p\", {\n          children: \"Improved problem-solving: Coding teaches logical thinking and problem-solving skills, which can help designers better understand and solve design problems.\"\n        })\n      }), /*#__PURE__*/_jsx(\"li\", {\n        \"data-preset-tag\": \"p\",\n        children: /*#__PURE__*/_jsx(\"p\", {\n          children: \"More job opportunities: Designers who can code are in high demand in the job market, as they offer a unique skillset.\"\n        })\n      }), /*#__PURE__*/_jsx(\"li\", {\n        \"data-preset-tag\": \"p\",\n        children: /*#__PURE__*/_jsx(\"p\", {\n          children: \"More creative freedom: Knowing how to code allows designers to have more creative freedom and bring their ideas to life.\"\n        })\n      }), /*#__PURE__*/_jsx(\"li\", {\n        \"data-preset-tag\": \"p\",\n        children: /*#__PURE__*/_jsx(\"p\", {\n          children: \"More valuable insights: Designers who code can gain valuable insights into user behavior and preferences, helping them create more effective designs.\"\n        })\n      }), /*#__PURE__*/_jsx(\"li\", {\n        \"data-preset-tag\": \"p\",\n        children: /*#__PURE__*/_jsx(\"p\", {\n          children: \"Future-proof skills: As technology continues to advance, designers who know how to code will be better equipped to adapt to new tools and stay relevant in their field.\"\n        })\n      })]\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"In conclusion, designers who learn how to code will not only improve their communication with developers but also gain more control over the design process, faster prototyping, better problem-solving skills, and more job opportunities. With the ever-increasing importance of technology, it's becoming essential for designers to learn how to code to stay ahead of the game.\"\n    })]\n  }),\n  kbLro620V: \"Why designers should learn how to code\",\n  Q409fqAbY: \"\",\n  rTaOFH6bK: \"2023-02-13T00:00:00.000Z\",\n  SVI4jjfql: \"why-designers-should-learn-how-to-code\",\n  wRjLIa41P: {\n    alt: \"\",\n    src: new URL(\"https://framerusercontent.com/images/bjk1rckhyLVgMNp4irjEbdLzbPQ.jpg\").href,\n    srcSet: `${new URL(\"https://framerusercontent.com/images/bjk1rckhyLVgMNp4irjEbdLzbPQ.jpg?scale-down-to=512\").href} 512w, ${new URL(\"https://framerusercontent.com/images/bjk1rckhyLVgMNp4irjEbdLzbPQ.jpg?scale-down-to=1024\").href} 1024w, ${new URL(\"https://framerusercontent.com/images/bjk1rckhyLVgMNp4irjEbdLzbPQ.jpg?scale-down-to=2048\").href} 2048w, ${new URL(\"https://framerusercontent.com/images/bjk1rckhyLVgMNp4irjEbdLzbPQ.jpg\").href} 3882w`\n  },\n  zdr2anIWT: \"\"\n}];\ndata.forEach(item => Object.freeze(item));\naddPropertyControls(data, {\n  kbLro620V: {\n    defaultValue: \"\",\n    title: \"Article Name\",\n    type: ControlType.String\n  },\n  rTaOFH6bK: {\n    title: \"Date\",\n    type: ControlType.Date\n  },\n  ffO_YEfhb: {\n    defaultValue: \"WaLO_7RX3\",\n    options: [\"WaLO_7RX3\", \"quX06ZisO\", \"oJTmSkbTL\"],\n    optionTitles: [\"Process\", \"Tools\", \"Design\"],\n    title: \"Category\",\n    type: ControlType.Enum\n  },\n  wRjLIa41P: {\n    title: \"Article Image\",\n    type: ControlType.ResponsiveImage\n  },\n  Jbxal0AIu: {\n    defaultValue: \"\",\n    title: \"Article\",\n    type: ControlType.RichText\n  },\n  zdr2anIWT: {\n    defaultValue: \"\",\n    title: \"Primary Link Label\",\n    type: ControlType.String\n  },\n  mh8GZmrLl: {\n    title: \"Primary Link\",\n    type: ControlType.Link\n  },\n  FhYxJ2nwg: {\n    defaultValue: \"\",\n    title: \"Secondary Link Label\",\n    type: ControlType.String\n  },\n  Xl25t3bAR: {\n    title: \"Secondary Link\",\n    type: ControlType.Link\n  },\n  SVI4jjfql: {\n    title: \"Slug\",\n    type: ControlType.String\n  },\n  Q409fqAbY: {\n    defaultValue: \"\",\n    title: \"SEO Description\",\n    type: ControlType.String\n  }\n});\ndata[\"displayName\"] = \"Writing\";\nexport default data;\nexport const __FramerMetadata__ = {\n  \"exports\": {\n    \"default\": {\n      \"type\": \"data\",\n      \"name\": \"data\",\n      \"annotations\": {\n        \"framerSlug\": \"SVI4jjfql\",\n        \"framerRecordIdKey\": \"id\",\n        \"framerContractVersion\": \"1\",\n        \"framerData\": \"\"\n      }\n    },\n    \"__FramerMetadata__\": {\n      \"type\": \"variable\"\n    }\n  }\n};"],
  "mappings": "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",
  "names": ["PlayOptions", "ThumbnailOptions", "ThumbnailFormat", "Youtube", "url", "play", "shouldMute", "thumbnail", "isRed", "onClick", "onMouseEnter", "onMouseLeave", "onMouseDown", "onMouseUp", "props", "onCanvas", "useIsOnCanvas", "isAutoplay", "showThumbnail", "isPreloading", "preloadVideo", "le", "showVideo", "startVideo", "isHovered", "setHovered", "ye", "borderRadius", "useRadius", "hasBorderRadius", "p", "Instructions", "parsedURL", "parseVideoURL", "ErrorMessage", "videoId", "embedURL", "thumbnailURL", "getThumbnailURL", "getWebPSupported", "searchParams", "u", "wrapperStyle", "videoStyle", "PlayButton", "addPropertyControls", "ControlType", "borderRadiusControl", "defaultEvents", "defaultProps", "urlString", "getEmbedURL", "pathSegments", "embedURL1", "videoId2", "embedURL2", "res", "format", "pre", "ext", "_getWebPSupported", "window", "element", "emptyStateStyle", "centerTextStyle", "message", "containerStyles", "buttonStyle", "data", "u", "x", "p", "motion", "Youtube", "item", "addPropertyControls", "ControlType", "AVdUf_FiS_default", "__FramerMetadata__"]
}