{
    "componentChunkName": "component---src-pages-about-js",
    "path": "/about/",
    "result": {"data":{"site":{"siteMetadata":{"title":"Danniel Hansel","description":"Hi, I'm Danniel Hansel. I'm a Software Engineer based in Dallas, Texas. I write blogs about my thoughts, life experiences, solving problems as well as all technology related things.","canonicalUrl":"https://dannielhansel.com","image":"images/logo.svg","author":{"name":"Danniel Hansel"},"organization":{"name":"Danniel Hansel Tech LLC","url":"https://dannielhansel.com","logo":"images/logo.svg"},"social":{"twitter":"@dehanz13"}}},"bio":{"edges":[{"node":{"body":"const _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 */\nconst _frontmatter = {\n  \"title\": \"About Danniel Hansel\",\n  \"category\": \"long-bio\",\n  \"author\": \"Danniel Hansel\",\n  \"caption\": \"Dallas, Texas\",\n  \"description\": \"Learn about Danniel Hansel and how he got to where he is\",\n  \"profileUrl\": \"https://res.cloudinary.com/dehanz-dev/image/upload/v1639887422/dannielhansel.com/danniel-headshot-webp-4_xb4nbr.webp\"\n};\nconst layoutProps = {\n  _frontmatter\n};\nconst MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  let {\n    components\n  } = _ref,\n      props = _objectWithoutProperties(_ref, _excluded);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"p\", null, `I was born in Jakarta, Indonesia in 1995. Growing up, I've always been in love with computers and it all started whenever I discovered Counter Strike 1.6 (that was back when we had those big 'ol monitors). Then I started getting into Dota 1 and World of Warcraft. Eventually, gaming became my hobby. But, whenever my friends are not getting on, I would go outside and play soccer with my other group of friends and typically, I would ride my bike to get around. (back in '95 we didn't have much choice besides going outside and interact with other hoomans).`), mdx(\"p\", null, mdx(\"img\", {\n    parentName: \"p\",\n    \"src\": \"https://res.cloudinary.com/dehanz-dev/image/upload/v1639889264/dannielhansel.com/danniel-shoot-webp-1_saupek.webp\",\n    \"alt\": \"Danniel\"\n  })), mdx(\"p\", null, `After graduating High School in Texas, I went to UT Arlington where I graduated with a Bachelors of Sciences in Computer Science Engineering degree in 2018. I was very involved on campus where I also joined a Fraternity (PIKE). Meeting new people, socializing and learning about new things have always been exciting to me.`), mdx(\"p\", null, `Backtrack to few years ago, initially I didn't know what I wanted to major in and figured that since math was the easiest subject out of all, I went with accounting. Luckily, I came across someone during freshman orientation where we had a pretty long conversation about engineering and particularly computer science. That conversation really got me hooked and I eventually switched to Computer Science Engineering.`), mdx(\"p\", null, `During my junior year of college, I started developing bigger applications. I built few Android apps, mobile games, and some simple websites. I also had the opportunity to collaborate in a team for a senior design project where we built a BMI system using Arduino Uno, Raspberry Pi, and Kinect 3 (sensor) and C#.`), mdx(\"p\", null, `In my senior year, I had the opportunity to intern at a startup in Dallas where we used the MEAN Stack technology. It was a pretty awesome experience as I got to witness the inner working of a startup. I also learned a lot of things and had a good time there.`), mdx(\"p\", null, `After the internship, I got a job on campus where I worked as a part-time web developer for a Civil Engineering professor. I've always wanted to do that since I could really work remotely and not have to be in an office.`), mdx(\"p\", null, `Right before graduation, I got an offer to work at an SaaS company where we also used the same Stack to build mostly eCommerce sites for the clients. I also had the opportunity to work as a Technical Sales towards the end of my employment where I was able to work with the clients directly.`), mdx(\"p\", null, `Over the years, I've become passionate about open source software and sharing with others behind my computer. I think collaboration, curiosity and willingness to continuously learn are some of the essential keys to succeed in Software Engineering. As Socrates said, \"You don't know what you don't know.\"`), mdx(\"p\", null, `If you'd like to connect, don't hesitate to reach out by `, mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"mailto:dhansel.dev@gmail.com\"\n  }, `email`), ` or on `, mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://twitter.com/dehanz13/\"\n  }, `Twitter`), `. I'll be happy to talk!`));\n}\n;\nMDXContent.isMDXComponent = true;","frontmatter":{"title":"About Danniel Hansel","caption":"Dallas, Texas","description":"Learn about Danniel Hansel and how he got to where he is","author":"Danniel Hansel","profileUrl":"https://res.cloudinary.com/dehanz-dev/image/upload/v1639887422/dannielhansel.com/danniel-headshot-webp-4_xb4nbr.webp","category":"long-bio"}}}]},"related":{"edges":[{"node":{"id":"6f5b7bcc-efa4-5084-8b34-cec1b0506f16","fields":{"slug":"/blog/my-favorite-tech-podcasts/"},"frontmatter":{"slug":"my-favorite-tech-podcasts","title":"My Favorite Tech Podcasts","author":"Danniel Hansel","bannerUrl":"https://res.cloudinary.com/dehanz-dev/image/upload/v1644037050/dannielhansel.com/content/blog/my-favorite-podcasts_ksnqce.jpg","bannerCredit":"Photo by [Mohammad Metri](https://unsplash.com/photos/1oKxSKSOowE) on [Unsplash](https://unsplash.com)","tags":["personal","productivity"],"description":"I've compiled a list of my favorite tech and non-tech podcasts.","date":"15th Jan 2022"},"excerpt":"Over the last years, I’ve been listening to podcasts more often than before. Typically, I’ll put on an episode when I’m driving by myself…","body":"const _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 */\nconst _frontmatter = {\n  \"slug\": \"my-favorite-tech-podcasts\",\n  \"title\": \"My Favorite Tech Podcasts\",\n  \"date\": \"2022-01-15\",\n  \"author\": \"Danniel Hansel\",\n  \"description\": \"I've compiled a list of my favorite tech and non-tech podcasts.\",\n  \"published\": true,\n  \"featured\": true,\n  \"categories\": [\"productivity\"],\n  \"tags\": [\"personal\", \"productivity\"],\n  \"bannerUrl\": \"https://res.cloudinary.com/dehanz-dev/image/upload/v1644037050/dannielhansel.com/content/blog/my-favorite-podcasts_ksnqce.jpg\",\n  \"bannerCredit\": \"Photo by [Mohammad Metri](https://unsplash.com/photos/1oKxSKSOowE) on [Unsplash](https://unsplash.com)\"\n};\nconst layoutProps = {\n  _frontmatter\n};\nconst MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  let {\n    components\n  } = _ref,\n      props = _objectWithoutProperties(_ref, _excluded);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"p\", null, `Over the last years, I’ve been listening to podcasts more often than before. Typically, I’ll put on an episode when I’m driving by myself, having morning shower, or just doing daily chores. The selection on which I’m choosing is based a lot of things like my mood, or things that I’m really interested in learning.`), mdx(\"p\", null, `My intention most of the time is to learn new things and trends in software development. Other times, well besides going deeper into a specific subject, it’s usually just for pure entertainment. I was asked by a few friends on what podcasts I listen to the most. So, here I am sharing it with you all. Enjoy! 🎉`), mdx(\"p\", null, `If you’d like to suggest me your favorite podcasts or episodes, I would love to `, mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"/contact/\"\n  }, `hear about it`), `!`), mdx(\"h2\", null, `Tech Podcasts`), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://softwareengineeringdaily.com/\"\n  }, `Software Daily`)), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://reactpodcast.simplecast.com/\"\n  }, `React Podcast`)), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://reactnativeradio.com/\"\n  }, `React Native Radio`)), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://developertea.com/\"\n  }, `Developer Tea`)), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://syntax.fm/\"\n  }, `Syntax.fm`)), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://shoptalk.com/\"\n  }, `ShopTalk`)), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://www.frontendhappyhour.com/\"\n  }, `Front End Happy Hour`)), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://fullstackradio.com/\"\n  }, `Full Stack Radio`)), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://javascriptjabber.com/\"\n  }, `JavaScript Jabber`)), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://www.bikeshed.fm/\"\n  }, `The Bike Shed`)), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://scrimba.com/podcast/\"\n  }, `The Scrimba Podcast`)), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://www.arresteddevops.com/\"\n  }, `Arrested DevOps`)), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://www.softwaredefinedtalk.com/\"\n  }, `Software Defined Talk`)), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://softskills.audio/\"\n  }, `Soft Skills Engineering`)), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://kentcdodds.com/chats/04\"\n  }, `Chats with Kent C. Dodds`)), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://open.spotify.com/show/50scOU4lU3jX4TGxoSUAK6\"\n  }, `3 Minutes with Kent`)), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://kentcdodds.com/calls\"\n  }, `Call Kent C. Dodds`)), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://open.spotify.com/show/3vjuOCwZ7kfUgm80xSpZmK\"\n  }, `Epic React Podcast`)), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://www.npr.org/podcasts/510311/embedded\"\n  }, `Embedded`)), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://open.spotify.com/show/4FKWy0vjNbt6uFwAzwd7XF\"\n  }, `egghead.io developer chats`))), mdx(\"h2\", null, `Non-Tech Podcasts`), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://www.npr.org/sections/money/\"\n  }, `Planet Money`)), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://www.biggerpockets.com/podcast\"\n  }, `Bigger Pockets`)), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://open.spotify.com/show/7qZAVw03FuurfYnWIWwkHY\"\n  }, `Naval`)), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://open.spotify.com/show/6SZVsPIxPfVs6aavqM1peY\"\n  }, `Gary Vaynerchuk`)), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://impacttheory.com/episodes/\"\n  }, `Impact Theory`)), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://open.spotify.com/show/6fZXOzehJ9JtOyFjirF3qt\"\n  }, `Tony Robbins`)), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://mixergy.com/\"\n  }, `Startup Stories - Mixergy`)), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://hbr.org/2018/01/podcast-ideacast\"\n  }, `HBR IdeaCast`)), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://gimletmedia.com/shows/reply-all\"\n  }, `Reply-All`))));\n}\n;\nMDXContent.isMDXComponent = true;","timeToRead":1}},{"node":{"id":"b86814e4-5866-5e31-91ff-d0a8b9ea363b","fields":{"slug":"/blog/handling-external-links-for-mdx-files-in-gatsby/"},"frontmatter":{"slug":"handling-external-links-for-mdx-files-in-gatsby","title":"Handling External Links for MDX files in Gatsby","author":"Danniel Hansel","bannerUrl":"https://res.cloudinary.com/dehanz-dev/image/upload/v1640453751/dannielhansel.com/content/blog/external-link_roctbf.webp","bannerCredit":"Photo by [Eric Mclean](https://unsplash.com/photos/sxiSod0tyYQ) on [Unsplash](https://unsplash.com)","tags":["ssg","react","gatsby"],"description":"The easiest way to open links in a new tab when using gatsby-plugin-mdx.","date":"10th Dec 2021"},"excerpt":"Typically, when you’re writing markdown files, you’d sometimes want to include a link that takes the user from your current page to some…","body":"const _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 */\nconst _frontmatter = {\n  \"slug\": \"handling-external-links-for-mdx-files-in-gatsby\",\n  \"title\": \"Handling External Links for MDX files in Gatsby\",\n  \"date\": \"2021-12-10\",\n  \"author\": \"Danniel Hansel\",\n  \"description\": \"The easiest way to open links in a new tab when using gatsby-plugin-mdx.\",\n  \"published\": true,\n  \"featured\": true,\n  \"categories\": [\"web-development\"],\n  \"tags\": [\"ssg\", \"react\", \"gatsby\"],\n  \"bannerUrl\": \"https://res.cloudinary.com/dehanz-dev/image/upload/v1640453751/dannielhansel.com/content/blog/external-link_roctbf.webp\",\n  \"bannerCredit\": \"Photo by [Eric Mclean](https://unsplash.com/photos/sxiSod0tyYQ) on [Unsplash](https://unsplash.com)\"\n};\nconst layoutProps = {\n  _frontmatter\n};\nconst MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  let {\n    components\n  } = _ref,\n      props = _objectWithoutProperties(_ref, _excluded);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"p\", null, `Typically, when you’re writing markdown files, you’d sometimes want to include a link that takes the user from your current page to some other page. Sometimes, these links can be internal (i.e. redirects user to a page on your site) or external (i.e. `, mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://www.twitter.com\"\n  }, `https://www.twitter.com`), `). What is the best way to set this up globally so that you don’t have to manually configure it on every markdown files?`), mdx(\"h2\", null, `Option #1: Creating the Link component`), mdx(\"p\", null, `This component basically checks if the link is prefixed with your site’s url or “/”. Then decides if it should open in a new tab or not:`), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, `const ExternalLink = props => {\n  if (\n    props.href.includes(\"https://dannielhansel.com/\") ||\n    props.href[0] === \"/\"\n  ) {\n    return (\n      <a {...props} href={props.href}>\n        {props.children}\n      </a>\n    )\n  }\n  return (\n    <a {...props} href={props.href} target=\"_blank\" rel=\"noopener noreferrer\">\n      {props.children}\n    </a>\n  )\n}\n`)), mdx(\"h2\", null, `Pass the component object into MDXProvider`), mdx(\"p\", null, `Then, you can pass it into the MDXProvider so every markdown link syntax can be controlled:`), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, `const components = {\n    a: ExternalLink,\n}\n\nconst ExampleLayout = ({children}) => (\n    <>\n        <MDXProvider components={components}>\n            <MDXRenderer>{body}</MDXRenderer>\n        </MDXProvider>\n    <>\n)\n`)), mdx(\"h2\", null, `Option #2: Using DRY principle`), mdx(\"p\", null, `Another way is to create a reusable component and just import it whenever you need it. You can also use this outside of your markdown files (i.e. your social links on your site).`), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, `// inside /src/components/link.js\nimport * as React from \"react\"\nimport { Link as GatsbyLink } from \"gatsby\"\n\n// Since DOM elements <a> cannot receive activeClassName\n// and partiallyActive, destructure the prop here and\n// pass it only to GatsbyLink\nconst Link = ({ children, to, activeClassName, partiallyActive, ...other }) => {\n  // Tailor the following test to your environment.\n  // This regex assumes that any internal link (intended for Gatsby)\n  // will start with exactly one slash, and that anything else is external.\n  const internal = /^\\\\/(?!\\\\/)/.test(to)\n\n  // Use Gatsby Link for internal links, and <a> for others\n  if (internal) {\n    return (\n      <GatsbyLink\n        to={to}\n        activeClassName={activeClassName}\n        partiallyActive={partiallyActive}\n        {...other}\n      >\n        {children}\n      </GatsbyLink>\n    )\n  }\n\n  return (\n    <a href={to} {...other} target=\"_blank\" rel=\"noopener noreferrer\">\n      {children}\n    </a>\n  )\n}\n\nexport default Link\n`)), mdx(\"p\", null, `Then you can import this component in your markdown file just like a regular javascript file.`), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, `// inside /content/handling-external-links-for-mdx-files-in-gatsby.mdx\n\nimport Link from \"../../src/components/link\"\n\n// ---\n// ... frontmatter stuff\n// ---\n;<Link to=\"https://twitter.com\">Twitter</Link>\n`)), mdx(\"h2\", null, `Option #3: Use the component as shortcode`), mdx(\"p\", null, `Another way is to kind of combine option 1 and 2, or known as “shortcode”. It’s basically a component that is available in every markdown file without you having to import it every time.`), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, `import Link from '../components/link'\n\nconst components = {\n    Link: ({children, to, ...props}) => (\n        <Link to={href} {...props}>\n            {children}\n        </Link>\n    ),\n}\n\nconst ExampleLayout = ({children}) => (\n    <>\n        <MDXProvider components={components}>\n            <MDXRenderer>{body}</MDXRenderer>\n        </MDXProvider>\n    <>\n)\n`)), mdx(\"p\", null, `Then in your markdown file:`), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, `// inside /content/handling-external-links-for-mdx-files-in-gatsby.mdx\n\n// ---\n// ... frontmatter stuff\n// ---\n\n<Link to=\"https://twitter.com\">Twitter</Link>\n`)), mdx(\"h2\", null, `Recap:`), mdx(\"p\", null, `Here’s what your Post template would look like:`), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, `// in your templates/post.js\n\nconst ExternalLink = props => {\n  if (\n    props.href.includes(\"https://dannielhansel.com/\") ||\n    props.href[0] === \"/\"\n  ) {\n    return (\n      <a\n        {...props}\n        href={props.href}\n        className=\"font-semibold text-accent hover:underline hover:underline-offset-4 cursor-pointer\"\n      >\n        {props.children}\n      </a>\n    )\n  }\n  return (\n    <a\n      {...props}\n      href={props.href}\n      className=\"font-semibold text-accent hover:underline hover:underline-offset-4 cursor-pointer\"\n      target=\"_blank\"\n      rel=\"noopener noreferrer\"\n    >\n      {props.children}\n    </a>\n  )\n}\n\nconst components = {\n    // other components ...\n    a: ExternalLink,\n}\n\nconst BlogPostTemplate = ({children}) => {\n    const { frontmatter, body, timeToRead, excerpt, fields } = data.mdx\n    return (\n        <>\n            <MDXProvider components={components}>\n                <MDXRenderer>{body}</MDXRenderer>\n            </MDXProvider>\n        <>\n    )\n}\n\nexport const pageQuery = graphql\\`\n  query BlogPostQuery($id: String) {\n\n    mdx(id: { eq: $id }) {\n      id\n      excerpt(pruneLength: 160)\n      body\n      timeToRead\n      fields {\n        slug\n      }\n      frontmatter {\n        slug\n        title\n        author\n        tags\n        description\n        date(formatString: \"Do MMM YYYY\")\n      }\n    }\n  }\n\\`\nexport default blogPost\n`)));\n}\n;\nMDXContent.isMDXComponent = true;","timeToRead":1}},{"node":{"id":"f5e43818-6b9e-539f-b958-b022a7c84719","fields":{"slug":"/blog/image-types-vector-vs-pixel/"},"frontmatter":{"slug":"image-types-vector-vs-pixel","title":"Image types: Vector vs. Pixel","author":"Danniel Hansel","bannerUrl":"https://res.cloudinary.com/dehanz-dev/image/upload/v1644037300/dannielhansel.com/content/blog/pixal-vs-vector_dkaxg1.jpg","bannerCredit":"Photo by [Umberto](https://unsplash.com/photos/deb2EnbWPr8) on [Unsplash](https://unsplash.com)","tags":["performance"],"description":"Why you should go for Vector vs. Pixel.","date":"3rd Dec 2021"},"excerpt":"When choosing images for a logo or any design on a project, most people typically just go with pixel based images since they appear as more…","body":"const _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 */\nconst _frontmatter = {\n  \"slug\": \"image-types-vector-vs-pixel\",\n  \"title\": \"Image types: Vector vs. Pixel\",\n  \"date\": \"2021-12-03\",\n  \"author\": \"Danniel Hansel\",\n  \"description\": \"Why you should go for Vector vs. Pixel.\",\n  \"published\": true,\n  \"featured\": true,\n  \"categories\": [\"image-optimization\"],\n  \"tags\": [\"performance\"],\n  \"bannerUrl\": \"https://res.cloudinary.com/dehanz-dev/image/upload/v1644037300/dannielhansel.com/content/blog/pixal-vs-vector_dkaxg1.jpg\",\n  \"bannerCredit\": \"Photo by [Umberto](https://unsplash.com/photos/deb2EnbWPr8) on [Unsplash](https://unsplash.com)\"\n};\nconst layoutProps = {\n  _frontmatter\n};\nconst MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  let {\n    components\n  } = _ref,\n      props = _objectWithoutProperties(_ref, _excluded);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"p\", null, `When choosing images for a logo or any design on a project, most people typically just go with pixel based images since they appear as more “Photogenic”. But actually, there are some major differences that most people miss.`), mdx(\"p\", null, `If you plan on designing any digital artwork, it’s important to understand the difference between the 2 types: Pixel/Raster images and Vector images.`), mdx(\"h1\", null, `Pixel and Raster Images`), mdx(\"h2\", null, `Pixel`), mdx(\"p\", null, `The idea of pixel was to create a photograph using a grid-based system of colors and tones. These are called “picture elements”, which are the building blocks of all digital artwork, simple or complex. Pixels on monitors are collections of Red, Green and Blue points of light, combined with Brightnesses to create what is called “RGB” color model.`), mdx(\"h2\", null, `Raster`), mdx(\"p\", null, `Similarly, Raster/rasterization is the process of turning non-pixel based image into a digital pixel-based image. When comparing pixels to vetor graphics, we are talking exclusively about raster graphic pixels, not the pixels that your monitor displays.`), mdx(\"p\", null, `Pixel-based images are also called Bitmaps and they’re made up of thousands of itty-bitty pixels or dots. Each pixel/block can store a different color and the overall pattern makes up the image on your screen. That’s why sometimes when we try to enlarge a photo, it gets blurry. And these are the usual .JPEGs, .GIFs, .PNGs files that we normally use.`), mdx(\"h1\", null, `Vector Images`), mdx(\"p\", null, `Vector images on the other hand, are basically paths/objects created by math calculations. The points (primitives) that these vectors make are a combination of lines, curves, and polygons on an algebraic grid. They operate independently of image resolution as they can be stretched and blown up without losing qualty.`), mdx(\"p\", null, `Simple logos, icons, typography and cartoons/illustrations usually are best in Vector because they have a lot less information and they load a whole lot faster. When you have a pixel-based image, you can convert them into Vector by using tools like Photoshop, Adobe Illustrator, and many more. These are exported as .SVGs, .AIs, .PDFs, and .EPS.`), mdx(\"h1\", null, `Conclusion`), mdx(\"p\", null, `The important distinction here is that pixels exist in the more literal space whereas vectors exists in a mathematical space. Pixels are all equal size and have a predefined position (just try to zoom in on one and you’ll see that those blocks will start to show), and Vectors exists as points on the math grid and doesn’t have any limitation (try to zoom in on a vector image and you’ll notice that the image and colors don’t change as it gets enlarged.)`));\n}\n;\nMDXContent.isMDXComponent = true;","timeToRead":2}}]}},"pageContext":{}},
    "staticQueryHashes": ["2744905544","3145194271","3970664207"]}