{ "componentChunkName": "component---src-pages-blog-js", "path": "/blog/", "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"}}},"posts":{"edges":[{"node":{"fields":{"slug":"/blog/my-favorite-tech-podcasts/"},"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,"frontmatter":{"slug":"my-favorite-tech-podcasts","title":"My Favorite Tech Podcasts","categories":["productivity"],"tags":["personal","productivity"],"description":"I've compiled a list of my favorite tech and non-tech podcasts.","bannerUrl":"https://res.cloudinary.com/dehanz-dev/image/upload/v1644037050/dannielhansel.com/content/blog/my-favorite-podcasts_ksnqce.jpg","date":"January 15, 2022"},"id":"6f5b7bcc-efa4-5084-8b34-cec1b0506f16","excerpt":"Over the last years, I’ve been listening to podcasts more often than before. Typically, I’ll put on…"}},{"node":{"fields":{"slug":"/blog/handling-external-links-for-mdx-files-in-gatsby/"},"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 \n {props.children}\n \n )\n }\n return (\n \n {props.children}\n \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 \n {body}\n \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 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 for others\n if (internal) {\n return (\n \n {children}\n \n )\n }\n\n return (\n \n {children}\n \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;Twitter\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 \n {children}\n \n ),\n}\n\nconst ExampleLayout = ({children}) => (\n <>\n \n {body}\n \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\nTwitter\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 \n {props.children}\n \n )\n }\n return (\n \n {props.children}\n \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 \n {body}\n \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,"frontmatter":{"slug":"handling-external-links-for-mdx-files-in-gatsby","title":"Handling External Links for MDX files in Gatsby","categories":["web-development"],"tags":["ssg","react","gatsby"],"description":"The easiest way to open links in a new tab when using gatsby-plugin-mdx.","bannerUrl":"https://res.cloudinary.com/dehanz-dev/image/upload/v1640453751/dannielhansel.com/content/blog/external-link_roctbf.webp","date":"December 10, 2021"},"id":"b86814e4-5866-5e31-91ff-d0a8b9ea363b","excerpt":"Typically, when you’re writing markdown files, you’d sometimes want to include a link that takes the…"}},{"node":{"fields":{"slug":"/blog/image-types-vector-vs-pixel/"},"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,"frontmatter":{"slug":"image-types-vector-vs-pixel","title":"Image types: Vector vs. Pixel","categories":["image-optimization"],"tags":["performance"],"description":"Why you should go for Vector vs. Pixel.","bannerUrl":"https://res.cloudinary.com/dehanz-dev/image/upload/v1644037300/dannielhansel.com/content/blog/pixal-vs-vector_dkaxg1.jpg","date":"December 03, 2021"},"id":"f5e43818-6b9e-539f-b958-b022a7c84719","excerpt":"When choosing images for a logo or any design on a project, most people typically just go with pixel…"}},{"node":{"fields":{"slug":"/blog/fetching-data-from-firestore/"},"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\": \"fetching-data-from-firestore\",\n \"title\": \"Fetching data from Firestore\",\n \"date\": \"2021-11-08\",\n \"author\": \"Danniel Hansel\",\n \"description\": \"This quick guide shows you how to create a React custom hook to fetch data from Cloud Firestore.\",\n \"published\": true,\n \"featured\": true,\n \"categories\": [\"database\"],\n \"tags\": [\"react\", \"ssr\", \"database\", \"nextjs\", \"database\"],\n \"bannerUrl\": \"https://res.cloudinary.com/dehanz-dev/image/upload/v1639602322/dannielhansel.com/content/blog/fetching-data-from-firestore_zalbof.jpg\",\n \"bannerCredit\": \"Photo by [Tobias Fischer](https://unsplash.com/photos/PkbZahEG2Ng) 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, `This quick guide shows you how to fetch data from Cloud Firestore. Assuming you already have a collection with a list of documents.`), mdx(\"p\", null, `Note: This guide will use Web version 9 (modular) - which is the latest version.`), mdx(\"h1\", null, `What we are going to do in this tutorial:`), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, `Understand how Event Sourcing & Event Streams work.`), mdx(\"li\", {\n parentName: \"ul\"\n }, `Understand how Snapshots work.`), mdx(\"li\", {\n parentName: \"ul\"\n }, `Create a React custom hook which listens to events from Firestore Database.`), mdx(\"li\", {\n parentName: \"ul\"\n }, `Render our data in our component.`)), mdx(\"p\", null, `If you don't have a project set up yet on Firebase, I have this `, mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"/blog/initial-setup-for-cloud-firestore-database/\"\n }, `quick guide`), ` to help you set it up.`), mdx(\"blockquote\", null, mdx(\"p\", {\n parentName: \"blockquote\"\n }, `💡 Once we've initialized our Firestore database, we will need it here.`)), mdx(\"h1\", null, `Event Sourcing & Streams`), mdx(\"p\", null, `In Event Sourcing, you'll typically replay all the events from the beginning of time from an Event Stream to get to the `, mdx(\"strong\", {\n parentName: \"p\"\n }, `current state`), ` of your aggregate. In most occasions, you'll have a `, mdx(\"strong\", {\n parentName: \"p\"\n }, `lifecycle`), ` to the stream that will eventually end but you could also have a stream that is never ending, something like products in a warehouse. The problem is what if we have thousands or millions of events that need to be replayed? This will create a very inefficient, time-consuming and slow process 😐 . This is where Snapshots come in.`), mdx(\"h1\", null, `Snapshots`), mdx(\"p\", null, `A snapshot is a representation of state for your aggregate at a particular point in time or event. To `, mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://firebase.google.com/docs/firestore/query-data/listen\"\n }, `get realtime updates`), ` with our Cloud Firestore database, we will need an `, mdx(\"strong\", {\n parentName: \"p\"\n }, `onSnapshot()`), ` method which listens to a document. When you provide a callback in the initial call, it creates a document snapshot immediately with the current contents of the single document. Then, each time the contents change, another call updates the document snapshot. To listen to multiple documents in a collection, this method will listen to the results of a query which then creates a query snapshot.`), mdx(\"h1\", null, `React Custom Hook`), mdx(\"p\", null, `In order fetch and render the most updated data from our Firestore Database onto our UI, we will need to create a custom hook. This hook's job is to listen to events from our database, record the state of the aggregate and store the state. By using `, mdx(\"strong\", {\n parentName: \"p\"\n }, `onSnapshot()`), ` method, it attaches a listener for `, mdx(\"strong\", {\n parentName: \"p\"\n }, `QuerySnapshot`), ` events in our Firebase. Note that although streams are never ending, this listener can be cancelled by calling the function that is returned when `, mdx(\"strong\", {\n parentName: \"p\"\n }, `onShapshot()`), ` is called.`), mdx(\"h2\", null, `Explanation`), mdx(\"p\", null, `We will store the snapshot in an array using the `, mdx(\"strong\", {\n parentName: \"p\"\n }, `useState hook`), `. To be able to detect changes, we will use the `, mdx(\"strong\", {\n parentName: \"p\"\n }, `useEffect hook`), ` with our collection as dependency so that every document change in our collection gets hooked and stored in our state. The job of `, mdx(\"strong\", {\n parentName: \"p\"\n }, `collection()`), ` method here is to get the `, mdx(\"strong\", {\n parentName: \"p\"\n }, `CollectionReference`), ` instance that refers to the collection at the specified absolute path and returns the `, mdx(\"strong\", {\n parentName: \"p\"\n }, `CollectionReference`), ` instance.`), mdx(\"h2\", null, `Code`), mdx(\"p\", null, `Create a folder `, mdx(\"strong\", {\n parentName: \"p\"\n }, `\"hooks\"`), ` inside src and create a file `, mdx(\"strong\", {\n parentName: \"p\"\n }, `\"useFirestore.js\"`), `:`), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\"\n }, `mkdir root/src/hooks\ntouch root/src/hooks/useFirestore.js\n`)), mdx(\"p\", null, `Stick this code in it:`), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\"\n }, `import { useEffect, useState } from \"react\" // import the React hooks\nimport { onSnapshot, collection } from \"firebase/firestore\" // import the methods from firestore\nimport { firestoreDb } from \"../config/firebase\" // The reference to our Firestore database after we've initialized it.\n\nexport const useFirestore = col => {\n const [docs, setDocs] = useState([])\n\n useEffect(\n () =>\n onSnapshot(collection(firestoreDb, col), snapshot =>\n setDocs(snapshot.docs.map(doc => ({ ...doc.data(), id: doc.id })))\n ),\n [col]\n )\n\n return { docs }\n}\n`)), mdx(\"h1\", null, `Render your data`), mdx(\"p\", null, `Create a file \"`, mdx(\"strong\", {\n parentName: \"p\"\n }, `Products.js`), `\" inside `, mdx(\"strong\", {\n parentName: \"p\"\n }, `src/components`), `.`), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\"\n }, `touch src/components/Products.js\n`)), mdx(\"p\", null, `Then, copy this code in it:`), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\"\n }, `import { useFirestore } from \"../hooks/useFirestore\" // Our hook we just created\n\nconst Products = () => {\n const { docs } = useFirestore(\"your-collection-name\") // Our hook takes in the collectionName as parameter\"\n\n return (\n
\n // ... add your own styling here\n
    \n {docs.map((product, index) => {\n return (\n
  • \n

    {index + 1}

    \n

    {product.Name}

    // Grab the keys from your document fields\n

    {product.Description}

    \n

    \\${product.Price}

    \n
    • \n )\n })}\n
\n
\n )\n}\nexport default Products\n`)), mdx(\"p\", null, `Lets go ahead and run the app:`), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\"\n }, `npm run dev\n`)), mdx(\"p\", null, `Voila! We can now fetch our data from Cloud Firestore database. 👏`), mdx(\"p\", null, `While there is another option to fetch data from Firebase (like `, mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://www.npmjs.com/package/react-firebase-hooks\"\n }, `react-firebase-hooks`), `), I chose to create my own customized hook that is understandable to me and works for me.`), mdx(\"p\", null, `If you are interested to learn more on how to sort & update the data from Firestore or how to store & delete images from Firebase Storage, check out my other blog posts. Good luck!`));\n}\n;\nMDXContent.isMDXComponent = true;","timeToRead":2,"frontmatter":{"slug":"fetching-data-from-firestore","title":"Fetching data from Firestore","categories":["database"],"tags":["react","ssr","database","nextjs","database"],"description":"This quick guide shows you how to create a React custom hook to fetch data from Cloud Firestore.","bannerUrl":"https://res.cloudinary.com/dehanz-dev/image/upload/v1639602322/dannielhansel.com/content/blog/fetching-data-from-firestore_zalbof.jpg","date":"November 08, 2021"},"id":"b15e2892-c0b8-5bbc-966d-3bfb10cac6c2","excerpt":"This quick guide shows you how to fetch data from Cloud Firestore. Assuming you already have a…"}},{"node":{"fields":{"slug":"/blog/initial-setup-for-cloud-firestore-database/"},"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\": \"initial-setup-for-cloud-firestore-database\",\n \"title\": \"Initial setup for Cloud Firestore database\",\n \"date\": \"2021-11-01\",\n \"author\": \"Danniel Hansel\",\n \"description\": \"This quick guide shows you how to set up Cloud Firestore for your React application.\",\n \"published\": true,\n \"featured\": true,\n \"categories\": [\"react\"],\n \"tags\": [\"react\", \"ssr\", \"backend\", \"nextjs\", \"database\"],\n \"bannerUrl\": \"https://res.cloudinary.com/dehanz-dev/image/upload/v1639602371/dannielhansel.com/content/blog/initial-setup-for-cloud-firestore-database_p8rflb.jpg\",\n \"bannerCredit\": \"Photo by [Jan Antonin Kolar](https://unsplash.com/photos/lRoX0shwjUQ) 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, `This quick guide shows you how to set up Cloud Firestore for your application.`), mdx(\"p\", null, `Note: This guide will use Web version 9 (modular) - which is the latest version.`), mdx(\"h1\", null, `Create a project in Firebase`), mdx(\"p\", null, `If you haven't already, `, mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://firebase.google.com/docs/web/setup\"\n }, `create a Firebase project and register your app`), ` with that project in the `, mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://console.firebase.google.com/u/0/\"\n }, `Firebase Console`), `.`), mdx(\"p\", null, `Once you have your project set up, you'll get a `, mdx(\"strong\", {\n parentName: \"p\"\n }, `Firebase configuration object`), ` that you'll need to connect your app to your firebase project resources. Head over to the project settings and look for the SDK setup and configuration.`), mdx(\"h1\", null, `Install SDK & initialize Firestore Database`), mdx(\"p\", null, `In your terminal, `, mdx(\"strong\", {\n parentName: \"p\"\n }, `install the SDK`), ` (you can use npm or yarn):`), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\"\n }, `npm install firebase\n// or if you use yarn:\nyarn add firebase\n`)), mdx(\"p\", null, `Then, `, mdx(\"strong\", {\n parentName: \"p\"\n }, `initialize Firebase`), `:`), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\"\n }, `// create a new folder inside src called \"config\"\nmkdir root/src/config\n// create a file called \"firebase.js\"\ntouch root/src/config/firebase.js\n`)), mdx(\"p\", null, `Then stick this in it:`), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\"\n }, `// You'll need to import these methods from Firebase and Cloud Firestore.\nimport { initializeApp } from \"firebase/app\"\nimport { getFirestore } from \"firebase/firestore\"\n\n// Initialize your app's Firebase configuration.\nconst app = initializeApp({\n projectId: process.env.PROJECT_ID,\n apiKey: process.env.API_KEY,\n authDomain: process.env.AUTH_DOMAIN,\n projectId: process.env.PROJECT_ID,\n storageBucket: process.env.STORAGE_BUCKET,\n messagingSenderId: process.env.MESSAGING_SENDER_ID,\n appId: process.env.APP_ID,\n})\n// Export your Firestore database so you can use the services throughout your app.\nexport const firestoreDb = getFirestore()\n`)), mdx(\"blockquote\", null, mdx(\"p\", {\n parentName: \"blockquote\"\n }, `For security reasons, make sure to place your configuration keys inside environment variables so git can ignore it.`)), mdx(\"h1\", null, `Environment Variables`), mdx(\"p\", null, `In the root folder, create a `, mdx(\"inlineCode\", {\n parentName: \"p\"\n }, `.env.local`), ` file. Then paste this in it:`), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\"\n }, `PROJECT_ID = your - project - id\nAPP_ID = your - app_id\nAPI_KEY = your - api_key\nAUTH_DOMAIN = your - project - id.firebaseapp.com\nSTORAGE_BUCKET = your - project - id.appspot.com\nMESSAGING_SENDER_ID = your - messaging_sender_id\n`)), mdx(\"h3\", null, `For NextJS applications`), mdx(\"p\", null, `If you're developing in NextJS, `, mdx(\"strong\", {\n parentName: \"p\"\n }, `you will need to copy this code in your`), ` `, mdx(\"inlineCode\", {\n parentName: \"p\"\n }, `next.config.js`), ` `, mdx(\"strong\", {\n parentName: \"p\"\n }, `file`), `.`), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\"\n }, `module.exports = {\n reactStrictMode: true,\n env: {\n PROJECT_ID=your-project-id\n APP_ID=your-app_id\n API_KEY=your-api_key\n AUTH_DOMAIN=your-project-id.firebaseapp.com\n STORAGE_BUCKET=your-project-id.appspot.com\n MESSAGING_SENDER_ID=your-messaging_sender_id\n },\n images: {\n domains: [\"firebasestorage.googleapis.com\"], // if you are using Firebase storage\n },\n};\n`)), mdx(\"h1\", null, `Conclusion`), mdx(\"p\", null, `A Firebase App is basically like a container-like object that has the common configuration and it shares authentication across all the Firebase services. So after you initialize the object, you can start using the services.`), mdx(\"p\", null, `The first time you add data in Firestore, they are stored implicitly in Documents, which is stored in Collections. You can create a new collection and a document either in the Firebase console or by adding some code.`), mdx(\"p\", null, `That's it. We've connected our Cloud Firestore Database to our app. 🎉`), mdx(\"p\", null, `If you'd like to learn on how to `, mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"/blog/fetching-data-from-firestore/\"\n }, `fetch data`), ` from Firestore, check out my blog post. Good luck!`));\n}\n;\nMDXContent.isMDXComponent = true;","timeToRead":1,"frontmatter":{"slug":"initial-setup-for-cloud-firestore-database","title":"Initial setup for Cloud Firestore database","categories":["react"],"tags":["react","ssr","backend","nextjs","database"],"description":"This quick guide shows you how to set up Cloud Firestore for your React application.","bannerUrl":"https://res.cloudinary.com/dehanz-dev/image/upload/v1639602371/dannielhansel.com/content/blog/initial-setup-for-cloud-firestore-database_p8rflb.jpg","date":"November 01, 2021"},"id":"607bdcda-0d6c-5f06-9a34-7c59aca6989d","excerpt":"This quick guide shows you how to set up Cloud Firestore for your application. Note: This guide will…"}},{"node":{"fields":{"slug":"/blog/rebuilding-my-portfolio-site-with-tailwind-css/"},"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\": \"rebuilding-my-portfolio-site-with-tailwind-css\",\n \"title\": \"Rebuilding my portfolio site with Tailwind CSS\",\n \"date\": \"2021-05-13\",\n \"author\": \"Danniel Hansel\",\n \"description\": \"My experience with Tailwind CSS.\",\n \"published\": true,\n \"featured\": true,\n \"categories\": [\"react\"],\n \"tags\": [\"javascript\", \"react\", \"gatsby\", \"tailwind-css\", \"bootstrap\"],\n \"bannerUrl\": \"https://res.cloudinary.com/dehanz-dev/image/upload/v1640453752/dannielhansel.com/content/blog/rebuild-portfolio_s7cuq0.webp\",\n \"bannerCredit\": \"Photo by [Aziz Acharki](https://unsplash.com/photos/6YpwRf0iUa4) 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, `In this post, we’ll talk about how switching to utility-first CSS framework like Tailwind CSS might work for you.`), mdx(\"p\", null, `Also, we’ll explore Tailwind CSS on a broad level.`), mdx(\"p\", null, `On top of that, we’ll also be building a simple GatsbyJs App from scratch using Tailwind CSS including Tailwind CSS installation, configuration, and designing options.`), mdx(\"h1\", null, `What was I using before?`), mdx(\"p\", null, `Previously, I decided to build my own portfolio site with GatsbyJs and Bootstrap as the CSS framework. The reason why I chose to go with this tech stack is because I have been building several React/GatsbyJs websites in the past and I am also quite familiar with utilizing the Bootstrap framework. Although I was able to get it up and running fairly quickly, there was still something that I wasn’t quite happy about the user interface. Until I discovered Tailwind CSS and what it can do to improve my site and essentially meet my satisfaction.`), mdx(\"h1\", null, `Why did I make the switch?`), mdx(\"p\", null, `My goal after discovering Tailwind CSS was to simply rebuild any complex user interfaces without having my site to look alike any other sites out there. `, mdx(\"strong\", {\n parentName: \"p\"\n }, `This is the `, mdx(\"em\", {\n parentName: \"strong\"\n }, `difference`), ` between Bootstrap and Tailwind CSS.`), ` If you have never used and worked with Bootstrap before, you can tell right off the bat when a site is using Bootstrap framework.`), mdx(\"blockquote\", null, mdx(\"p\", {\n parentName: \"blockquote\"\n }, `(hint: just simply look at the Bootstrap buttons and compare them to Tailwind CSS buttons!)`)), mdx(\"p\", null, `However, don’t get me wrong here, Bootstrap is still great and does the job for certain project needs and requirements. In fact, I do still use Bootstrap for my other sites because it comes with a lot of pre-styled components out of the box that are ready to use and look good. `, mdx(\"strong\", {\n parentName: \"p\"\n }, `If you are just wanting to whip up an absolutely basic interface for a quick PoC (proof of concept), then Bootstrap is your go-to`), `.`), mdx(\"p\", null, `Having that in mind, `, mdx(\"strong\", {\n parentName: \"p\"\n }, `firstly`), ` I want my new portfolio site to be able to easily handle `, mdx(\"strong\", {\n parentName: \"p\"\n }, mdx(\"em\", {\n parentName: \"strong\"\n }, `consistency`)), ` in terms of padding, margins, colors, and sizes. With Tailwind CSS, I could just write utility class and then repeatedly use them in my codebase.`), mdx(\"p\", null, mdx(\"strong\", {\n parentName: \"p\"\n }, `Secondly`), `, I want something that can speed up the process of handling `, mdx(\"strong\", {\n parentName: \"p\"\n }, mdx(\"em\", {\n parentName: \"strong\"\n }, `responsiveness`)), ` of the site from small screens to bigger screens. Tailwind provides five `, mdx(\"strong\", {\n parentName: \"p\"\n }, `breakpoints`), ` by default to serve different common device resolutions. This makes it a piece of cake to build complex responsive interfaces without ever leaving your HTML.`), mdx(\"p\", null, mdx(\"strong\", {\n parentName: \"p\"\n }, `Thirdly`), `, I want something that doesn’t make it harder on me as the developer to support `, mdx(\"strong\", {\n parentName: \"p\"\n }, mdx(\"em\", {\n parentName: \"strong\"\n }, `dark mode.`)), ` Dark mode has become the first-class feature of many operating systems. To make this as easy as possible, Tailwind comes with a `, mdx(\"em\", {\n parentName: \"p\"\n }, `‘dark’`), ` variant that lets you style your site however you want when dark mode is enabled.`), mdx(\"p\", null, `And `, mdx(\"strong\", {\n parentName: \"p\"\n }, `lastly`), `, I want to finish this project feeling more `, mdx(\"strong\", {\n parentName: \"p\"\n }, mdx(\"em\", {\n parentName: \"strong\"\n }, `productive`)), ` than ever when it comes to developing the user interfaces. Since Tailwind comes with a set of utility classes, once you get used to the custom terms and vocabulary, you will feel like you are flying! All in all, Tailwind’s system is a masterpiece of design which I as a developer love it and feel empowered by it.`), mdx(\"h1\", null, `What is Tailwind CSS?`), mdx(\"p\", null, `Okay, then let’s talk about `, mdx(\"strong\", {\n parentName: \"p\"\n }, mdx(\"em\", {\n parentName: \"strong\"\n }, `“what”`), ` is Tailwind CSS?`), ` Tailwind CSS is a utility-first CSS framework that provides you with a set of low-level utility classes. This framework uses `, mdx(\"em\", {\n parentName: \"p\"\n }, `atomic CSS`), ` (or functional CSS) which is essentially a delivery mechanism that allows you and I, as developers, to apply the system to the UI. On top of that, it uses PostCSS to process the final output and it comes with PurgeCSS which removes unused CSS from your project file.`), mdx(\"p\", null, `In this post, we’ll be using the Gatsby Default Starter. If you’ve never used Gatsby before, I have included a quick tutorial on how to create a new Gatsby project, but you can read more about it `, mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://www.digitalocean.com/community/tutorials/gatsbyjs-gatsby-first-steps\"\n }, `here`), ` from the docs. But the idea here is simple, you can use any of your favorite framework or library and install Tailwind CSS to handle the styling for you!`), mdx(\"h1\", null, `Part 1: Gatsby Quick Installation Guide`), mdx(\"h2\", null, `Step 1: System requirements`), mdx(\"p\", null, `Make sure you have Node.js, Git, and other tools required to get started with your first Gatsby project. To learn more about it, check out the `, mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://www.gatsbyjs.com/docs/tutorial/part-zero/\"\n }, `Gatsby docs`), `.`), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://git-scm.com/\"\n }, `Git`), ` (v2.13 or greater)`), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://nodejs.org/en/\"\n }, `NodeJS`), ` (v8.2.0 0r higher)`), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://www.npmjs.com/\"\n }, `NPM`), ` (v6 or greater) or `, mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://yarnpkg.com/\"\n }, `Yarn`))), mdx(\"p\", null, `All of these must be available in your `, mdx(\"inlineCode\", {\n parentName: \"p\"\n }, `PATH`), `. To verify things are set up properly, you can run this:`), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-shell\"\n }, `git --version\nnode --version\nnpm --version # or yarn --version\n`)), mdx(\"p\", null, `If you have trouble with any of these, learn more about the PATH environment\nvariable and how to fix it here for `, mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://www.howtogeek.com/118594/how-to-edit-your-system-path-for-easy-command-line-access/\"\n }, `windows`), ` or\n`, mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://stackoverflow.com/questions/24306398/how-to-add-mongo-commands-to-path-on-mac-osx/24322978#24322978\"\n }, `mac/linux`), `.`), mdx(\"h2\", null, `Step 2: Download/Install the Gatsby CLI package:`), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-shell\"\n }, `npm install -g gatsby-cli\n`)), mdx(\"p\", null, `Check out all the available commands:`), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-shell\"\n }, `gatsby --help\n`)), mdx(\"h2\", null, `Step 3: Create a Gatsby site using the default starter template`), mdx(\"p\", null, `Stick this in your terminal and hit enter`), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-shell\"\n }, `gatsby new my-first-gatsby-project https://github.com/gatsbyjs/gatsby-starter-default\n`)), mdx(\"p\", null, `Change into the directory:`), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-shell\"\n }, `cd my-first-gatsby-project\n`)), mdx(\"p\", null, `Start the development server:`), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-shell\"\n }, `gatsby develop\n`)), mdx(\"p\", null, `View your site locally. Open up a new tab in your browser and navigate to: `, mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"http://localhost:8000/\"\n }, `http://localhost:8000/`)), mdx(\"h1\", null, `Part 2: Setting up Tailwind CSS`), mdx(\"h2\", null, `Step 1: Create two configs for Tailwind CSS and PostCSS:`), mdx(\"blockquote\", null, mdx(\"p\", {\n parentName: \"blockquote\"\n }, `Note: You might not have do this, so check if they're preinstalled in your root directory.`)), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-shell\"\n }, `touch tailwind.config.js\n`)), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-shell\"\n }, `touch postcss.config.js\n`)), mdx(\"p\", null, `Add this default configuration inside tailwind.config.js:`), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\"\n }, `// inside tailwind.config.js\nconst defaultTheme = require(\"tailwindcss/defaultTheme\")\nconst plugin = require(\"tailwindcss/plugin\")\nconst colors = require(\"tailwindcss/colors\")\n\nmodule.exports = {\n mode: \"jit\",\n // purge: { // this is not needed for tailwind 3.0\n // content: [\"./src/**/*.js\"],\n // },\n content: [\"./src/**/*.js\"],\n darkMode: \"class\", // or 'media' or 'class'\n theme: {\n screens: {\n ...defaultTheme.screens,\n xs: \"475px\",\n },\n textColor: theme => ({\n ...theme(\"colors\"),\n primary: \"#397E89\",\n secondary: \"#883377\",\n }),\n extend: {\n fontFamily: {},\n },\n },\n variants: {\n extend: {},\n },\n plugins: [],\n}\n`)), mdx(\"h2\", null, `Step 2: Install Tailwind CSS and add NPM dependencies:`), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-shell\"\n }, `npm install --save gatsby-plugin-postcss tailwindcss\n`)), mdx(\"p\", null, `Stick this plugin in:`), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\"\n }, `// inside gatsby-config.js\nmodule.exports = {\n // ...rest\n plugins: [\n {\n resolve: \\`gatsby-plugin-postcss\\`,\n options: {\n postCssPlugins: [require(\"tailwindcss\")],\n },\n },\n ],\n}\n`)), mdx(\"h2\", null, `Step 3: Import Tailwind CSS in the src/components/layout.css `, mdx(\"em\", {\n parentName: \"h2\"\n }, `(at the very top)`), `:`), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\"\n }, `// inside layout.css\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n`)), mdx(\"p\", null, mdx(\"strong\", {\n parentName: \"p\"\n }, `Congrats! You have now successfully added TailwindCSS to your Gatsby project!`)), mdx(\"p\", null, `Next, it’s time to add Tailwind classes to your HTML. `, mdx(\"em\", {\n parentName: \"p\"\n }, `In this post, we are only going to create a basic Hero component on landing page and play around with the styling options.`)), mdx(\"h1\", null, `Part 3: Creating a basic Landing page`), mdx(\"p\", null, `Before we start, `, mdx(\"strong\", {\n parentName: \"p\"\n }, `let's first kill the dev server`), `. Navigate to your terminal and ctrl + C.`), mdx(\"h2\", null, `Navigate to index.js file and replace the IndexPage component with this:`), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\"\n }, `const IndexPage = () => (\n \n \n \n
\n
\n
\n

\n Your Name\n

\n

\n Full Stack Developer\n

\n
\n \n Contact Me!\n \n
\n
\n
\n
\n \n \n)\n`)), mdx(\"h3\", null, `Run the development server to rebuild the project.`), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-shell\"\n }, `gatsby develop\n`)), mdx(\"p\", null, `Navigate to your `, mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"http://localhost:8000/\"\n }, `localhost server`), ` to see the result! 🙌`), mdx(\"h1\", null, `Styling in Tailwind CSS`), mdx(\"h2\", null, `Colors in Tailwind CSS`), mdx(\"p\", null, `Inside `, mdx(\"inlineCode\", {\n parentName: \"p\"\n }, `tailwind.config.js`), ` file, we can override Tailwind’s default `, mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://tailwindcss.com/docs/customizing-colors\"\n }, `color palette`), `, extend it or even disable it.`), mdx(\"p\", null, `In our example, we have added two colors as `, mdx(\"inlineCode\", {\n parentName: \"p\"\n }, `‘primary’`), ` and `, mdx(\"inlineCode\", {\n parentName: \"p\"\n }, `‘secondary’`), `.`), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\"\n }, `// inside tailwind.config.js\ntheme: {\n textColor: theme => ({\n ...theme(\"colors\"),\n primary: \"#397E89\",\n secondary: \"#883377\",\n }),\n ...\n },\n`)), mdx(\"p\", null, `To apply it to your HTML, you can simply just add it using inline style as `, mdx(\"inlineCode\", {\n parentName: \"p\"\n }, `‘text-primary’`), ` or `, mdx(\"inlineCode\", {\n parentName: \"p\"\n }, `‘text-secondary’`), `.`), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\"\n }, `

\n Your Name\n

\n\n

\n Full Stack Developer\n

\n\n`)), mdx(\"h2\", null, `Styling a Button`), mdx(\"p\", null, `Tailwind comes with a palette of colors that you can choose from. I'd recommend you to check out all the colors they have and play around with it. In our example, we are using a `, mdx(\"strong\", {\n parentName: \"p\"\n }, `gradient of colors`), `.`), mdx(\"p\", null, mdx(\"inlineCode\", {\n parentName: \"p\"\n }, `bg-gradient-to-r from-green-400 to-blue-500`)), mdx(\"h2\", null, `Hovering a component (Pseudo classes with inline styling)`), mdx(\"p\", null, `In our example, we simply use a gradient of colors when a button is being hovered.`), mdx(\"p\", null, mdx(\"inlineCode\", {\n parentName: \"p\"\n }, `hover:from-blue-500 hover:to-purple-500`)), mdx(\"h2\", null, `Other low-level utility classes that we’ve used in our example:`), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, `font-bold`), `: add bold font;`), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, `flex`), `: display: flex;`), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, `items-center`), `: align-items: center;`), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, `shadow-inner`), `: box shadow`), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, `min-h-screen`), `: setting minimum height of an element;`), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, `w-full`), `: width: 100%;`), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, `w-4/5`), `: width: 80%;`), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, `self-center`), `: align-self: center;`), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, `py-6`), `: padding-top: 1.5rem; padding-bottom: 1.5rem;`), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, `mb-4`), `: margin-bottom: 1rem;`), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, `capitalize`), `: text-transform: capitalize;`), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, `uppercase`), `: text-transform: uppercase;`), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, `text-xl`), `: font-size: 1.25rem; line-height: 1.75rem;`), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, `text-center`), `: text-align: center;`), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, `justify-items-center`), `: justify-items: center;`), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, `transition`), `: transition property`), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, `bg-green-400`), `: to use green as the button’s background color`), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, `hover:bg-blue-700`), `: to change the blue color when hovering over the button`)), mdx(\"h1\", null, `The Downsides of Tailwind CSS 📉`), mdx(\"blockquote\", null, mdx(\"p\", {\n parentName: \"blockquote\"\n }, `As Tailwind CSS becomes more revolutionized, there are definitely some challenges. However, I am going to talk about the challenges I faced on the underlying concept of utility-first framework.`)), mdx(\"h2\", null, `Repeatable CSS`), mdx(\"p\", null, `With utility-first, you are going to have repeated classes. This could get annoying as your project eventually grows larger. Compare to regular CSS, you could just create a class that does the same job and you can reuse that class in multiple components.`), mdx(\"p\", null, `Of course, you can find a way to not repeat the classes but that defeats the purpose of using a utility-first concept because the goal is to minimize the handling of CSS to your project.`), mdx(\"h2\", null, `Readability`), mdx(\"p\", null, `Take our button for example. If you were to have multiple buttons on your site, you would have a long list of classes for each button and as you can already guess, It will be hard to read. This could be the biggest downfall of utility-first concept. As your project grows, you are more than likely going add tons of CSS classes to your project.`), mdx(\"h2\", null, `Atomic CSS downsides`), mdx(\"p\", null, `Atomic CSS is not ideal for performance. You would have to ship more CSS to the browser than necessary because no tooling can extract the per-page critical CSS. As your utility-based CSS library grows, so does the amount of CSS you ship to your users, leaving you having to build more tools to remove styles that you were never going to use in the first place.`), mdx(\"h1\", null, `Conclusion`), mdx(\"h3\", null, `Was it worth switching to Tailwind CSS?`), mdx(\"p\", null, `Most definitely, Yes! ✅After successfully rebuilding my portfolio site using Tailwind, I am loving every piece of it. If you love a good design, you'd definitely love Tailwind, especially with just how it gives you the aesthetic and modern feel and look. `, mdx(\"strong\", {\n parentName: \"p\"\n }, `Very important for building the `, mdx(\"a\", {\n parentName: \"strong\",\n \"href\": \"https://headlessui.dev/\"\n }, `user interface`), ` to enhance user experience.`), ` 👀 They also have a great `, mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://github.com/tailwindlabs/tailwindcss/discussions\"\n }, `community`), ` and a well detailed `, mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://tailwindcss.com/docs/installation\"\n }, `documentation`), `.`), mdx(\"blockquote\", null, mdx(\"p\", {\n parentName: \"blockquote\"\n }, mdx(\"strong\", {\n parentName: \"p\"\n }, `UPDATE`), `: They had just recently upgraded to `, mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://tailwindcss.com/docs/upgrade-guide\"\n }, `Tailwind 3.0`), `.`)), mdx(\"p\", null, `Always keep this in mind, every tool and technology out there has tradeoffs. So it's always good to `, mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://play.tailwindcss.com/\"\n }, `play around`), ` and test them. I hope that I’ve given you an overview of how Tailwind has helped me improve my project. 😇`));\n}\n;\nMDXContent.isMDXComponent = true;","timeToRead":6,"frontmatter":{"slug":"rebuilding-my-portfolio-site-with-tailwind-css","title":"Rebuilding my portfolio site with Tailwind CSS","categories":["react"],"tags":["javascript","react","gatsby","tailwind-css","bootstrap"],"description":"My experience with Tailwind CSS.","bannerUrl":"https://res.cloudinary.com/dehanz-dev/image/upload/v1640453752/dannielhansel.com/content/blog/rebuild-portfolio_s7cuq0.webp","date":"May 13, 2021"},"id":"6716a85b-6801-525e-b2ea-5448c01bf60d","excerpt":"In this post, we’ll talk about how switching to utility-first CSS framework like Tailwind CSS might…"}},{"node":{"fields":{"slug":"/blog/powerful-morning-routines-that-will-change-your-life/"},"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\": \"powerful-morning-routines-that-will-change-your-life\",\n \"title\": \"Powerful Morning Routines that Will Change Your Life\",\n \"date\": \"2021-02-03\",\n \"author\": \"Danniel Hansel\",\n \"description\": \"Killer morning routines to better your life and reach your full potential.\",\n \"published\": true,\n \"featured\": true,\n \"categories\": [\"personal-development\"],\n \"tags\": [\"personal\", \"productivity\"],\n \"bannerUrl\": \"https://res.cloudinary.com/dehanz-dev/image/upload/v1639601696/dannielhansel.com/content/blog/rebuilding-my-portfolio-site-with-tailwind-css_rqnsbb.jpg\",\n \"bannerCredit\": \"Photo by [lucas Favre](https://unsplash.com/photos/JnoNcfFwrNA) 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, `Have you ever wondered why so many successful people are able to achieve anything in their life? I have and I am pretty sure you have as well otherwise, you would not be reading this blog right now. If you are looking for some ways to improve your life, you have come to the right place!`), mdx(\"p\", null, `I wrote this blog because I realized that ever since I have graduated college, many people including me are struggling to find ways to improve their lives. Based on my experience, the only thing that could change and improve anyone’s life towards the better is by developing good habits. I know that might sound biased but in reality, habits are the things that we do every day without any conscious thought. Whether it is a good habit or bad habit, by performing a habit through repetition, our body automatically respond to our environment without us even knowing it.`), mdx(\"p\", null, `I used to spend my days aimlessly scrolling through Instagram, Facebook, and Twitter. Read emails when I really didn’t need to, and watch YouTube videos just to go through the day. Now, however, after I’ve established and followed my own morning routine, I realized that I had spent most of my time procrastinating, mindlessly consuming content that gives me no value and in return, I produce no results for myself. Therefore, I decided to write this blog hoping to help someone out there who is in the same position as me.`), mdx(\"p\", null, `In this blog, I have listed my morning routine that have worked for me and improved my life as well as my health and mental. Before you consider starting any of this routine, ask yourself, “Am I happy? What kind of life do I want? Am I designing my own lifestyle or am I just living someone else’s? What are my goals? Am I going to do whatever it takes to achieve those goals and become someone that I’ve always wanted?” Ask yourself these questions and be honest to yourself.`), mdx(\"p\", null, `Before we start, here are some pros and cons to consider… But don’t let it scare you. Just remember:`), mdx(\"blockquote\", null, mdx(\"p\", {\n parentName: \"blockquote\"\n }, mdx(\"em\", {\n parentName: \"p\"\n }, `“Everyone must choose one of two pains: The pain of discipline or the pain of regret.”`), ` – Jim Rohn`)), mdx(\"h1\", null, `Pros & Cons`), mdx(\"p\", null, `Pros of developing these habits are substantially huge and might be one of the biggest ROI (Return of Investment) that you could ever have in your life. When I adopted this healthy lifestyle, I was amazed by how I was able to stay and be productive when I needed to be, I felt very energetic throughout the day, I was able to work 75-80 hours every week without any complaint, I see the world with a much broader perspective, I become more open-minded to everything, I am inspired and driven more than ever, and my mind is clearer and calmer which makes it easy for me to eliminate any negative self-talk and put my focus on something else more important that will make me happy.`), mdx(\"blockquote\", null, mdx(\"p\", {\n parentName: \"blockquote\"\n }, mdx(\"em\", {\n parentName: \"p\"\n }, `“Success is nothing more than a few simple disciplines practiced every day.”`), ` – Jim Rohn`)), mdx(\"p\", null, `However, this might sound easy to some of you but the only con that comes with it is, it requires Self-Discipline. If you think you have mastered self-discipline, these routines might not sound too bad to you after all. In fact, what’s holding most people to reach their full potential and their goals is the Discipline to put in the Work and the Action. But once you start this process that we call “Personal Development”, your life will eventually get better and you will start to notice changes in your life which I’d like to call, “Miracles.”`), mdx(\"h1\", null, `My Current Morning Routine`), mdx(\"ol\", null, mdx(\"li\", {\n parentName: \"ol\"\n }, `7:00 AM | Wake up + get freshened up + brew my morning coffee. ☕`), mdx(\"li\", {\n parentName: \"ol\"\n }, `7:15 AM | Meditate & practice gratitude for the things I'm grateful for. 🌈`), mdx(\"li\", {\n parentName: \"ol\"\n }, `7:30 AM | Journal 📓 & review my goals for the day, that week and month. 🎯`), mdx(\"li\", {\n parentName: \"ol\"\n }, `7:45 AM | Head to the gym 💪`), mdx(\"li\", {\n parentName: \"ol\"\n }, `8:45 AM | Cold shower 🚿 + breakfast/morning smoothie. 🥤`), mdx(\"li\", {\n parentName: \"ol\"\n }, `9:15 AM | Check my to-do list for the day and prioritize based on the most important task. ✅`), mdx(\"li\", {\n parentName: \"ol\"\n }, `9:30 AM | Time to get things done and be productive! 👏 👏`)), mdx(\"p\", null, `I start on my first-hardest task for the day and continue to keep checking off the things from my list. I alter as I go but by following the list, my mind tends to focus a lot better and produce the results I need.`), mdx(\"p\", null, `The key is to… Start. When? The sooner the better. It might take some of you a week or two to get used to this routine, but I promise you, it gets easier. Why? because, once a habit is developed through daily repetition then, it becomes part of your routine. It is not a habit anymore rather, it’s part of your lifestyle! That is when it becomes natural and systematic in you.`), mdx(\"p\", null, `Results? After some time, I have started to notice that I become much happier each day and always looking forward to my days ahead. Why did I choose to develop this killer morning routine? Because I realized that in order to become better, I need to design my days better by implementing a winning routine that works for me. Furthermore, this has proven that by developing a good morning routine, you are setting your day up to win!`), mdx(\"h2\", null, `Bonus: My Night Routine`), mdx(\"p\", null, `To top it off, here’s the last part of the routine which is the icing on the cake:`), mdx(\"ol\", null, mdx(\"li\", {\n parentName: \"ol\"\n }, `10:00 PM | Unplug from social media & work 📵, turn off all screens, prepare for the next day.`), mdx(\"li\", {\n parentName: \"ol\"\n }, `10:30 PM | Night journal/self-reflection. 📗 + then hot shower 🛀.`), mdx(\"li\", {\n parentName: \"ol\"\n }, `11:00 PM | Read 📖`), mdx(\"li\", {\n parentName: \"ol\"\n }, `11:30 PM | Sleep. 🛌`)), mdx(\"blockquote\", null, mdx(\"p\", {\n parentName: \"blockquote\"\n }, `💡 Generally, I'd like to ask myself these 2 questions at the end of the day:`, mdx(\"br\", null), `1. “Have I done my personal best today?”`, mdx(\"br\", null), `2. “Have I done everything I need to do today to reach my goal?”`)), mdx(\"p\", null, `Congratulations! 🎉 Hopefully now you know how to execute your day better. If you failed the first time, don't worry, you'll try again the next day! 🤜`), mdx(\"h1\", null, `Final words`), mdx(\"p\", null, `Morning is the perfect time of the day for you to set yourself up for success. Each day comes with new opportunities for you to seize. By having the right daily routine, you would be able to see opportunities that come in your way. However, if you are not prepared, you will not see those opportunities and you will be stuck on where you are in life until you make the commitment to change.`), mdx(\"p\", null, `In order to live happily and full of purpose, you need to design your own daily routine that works for you and unfortunately, that doesn’t happen by accident. YOU have to create it and work hard for it. It starts right at the moment when you wake up in the morning. This includes eliminating things that are holding you back or consuming most of your time.`), mdx(\"p\", null, `Remember, the key is to Start and know that everyone has to start somewhere. Even if you only start with a few simple disciplines today, this alone could change your life for the better. Don’t blame yourself for anything that you’ve done and always to have faith in yourself. Know that if a lot of successful people can do it, you can do it too! 🙌`));\n}\n;\nMDXContent.isMDXComponent = true;","timeToRead":5,"frontmatter":{"slug":"powerful-morning-routines-that-will-change-your-life","title":"Powerful Morning Routines that Will Change Your Life","categories":["personal-development"],"tags":["personal","productivity"],"description":"Killer morning routines to better your life and reach your full potential.","bannerUrl":"https://res.cloudinary.com/dehanz-dev/image/upload/v1639601696/dannielhansel.com/content/blog/rebuilding-my-portfolio-site-with-tailwind-css_rqnsbb.jpg","date":"February 03, 2021"},"id":"edc10d92-c4e5-58c7-a0ec-e0a4fb636181","excerpt":"Have you ever wondered why so many successful people are able to achieve anything in their life? I…"}},{"node":{"fields":{"slug":"/blog/the-debate-between-library-vs-package-vs-framework-vs-module/"},"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\": \"the-debate-between-library-vs-package-vs-framework-vs-module\",\n \"title\": \"The Debate between Module vs Package vs Library vs Framework\",\n \"date\": \"2021-01-10\",\n \"author\": \"Danniel Hansel\",\n \"description\": \"One of the most frequent asked question in Software Engineering.\",\n \"published\": true,\n \"featured\": true,\n \"categories\": [\"software-engineering\"],\n \"tags\": [\"software-engineering\", \"tools\"],\n \"bannerUrl\": \"https://res.cloudinary.com/dehanz-dev/image/upload/v1640453749/dannielhansel.com/content/blog/package-library_xqm8ix.webp\",\n \"bannerCredit\": \"Photo by [Bench Accounting](https://unsplash.com/photos/MGaFENpDCsw) 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, `Have you ever wondered what is the difference between a Framework, a library, a package and a module? Whether you’re someone who’s just starting out or a programmer who’s been coding for a while, I’m sure you’ve asked this question before. So, let’s break it down, shall we?`), mdx(\"blockquote\", null, mdx(\"p\", {\n parentName: \"blockquote\"\n }, `Note, we are talking about the distiction here in the context of JavaScript.`)), mdx(\"h2\", null, `Library`), mdx(\"p\", null, `Is just a set of collection of related/unrelated functionality. Nothing more, but also nothing less. The one defining characteristic of a library is that `, mdx(\"strong\", {\n parentName: \"p\"\n }, mdx(\"em\", {\n parentName: \"strong\"\n }, `you are in control`)), ` as you are the one who would call the library. In most cases, you would use a library to perform a specific functionality rather than writing that functionality yourself which is time consuming since you’re basically “`, mdx(\"em\", {\n parentName: \"p\"\n }, `reinventing the wheel.”`)), mdx(\"h2\", null, `Framework`), mdx(\"p\", null, `Framework on the other hand, is in control of you and this is known as “`, mdx(\"strong\", {\n parentName: \"p\"\n }, mdx(\"em\", {\n parentName: \"strong\"\n }, `Inversion of Control`)), `”. The flow of control and the flow of data is managed by the framework. Typically, there are certain things missing from the framework that do certain functionalties and you would have to install them (libraries) separately.`), mdx(\"h2\", null, `Module`), mdx(\"p\", null, `You can think of module as `, mdx(\"strong\", {\n parentName: \"p\"\n }, mdx(\"em\", {\n parentName: \"strong\"\n }, `Information Hiding`)), ` where it explicitly, but abstractly specifies both the functionality it provides as well as the functionality it depends on. This is the `, mdx(\"em\", {\n parentName: \"p\"\n }, `import and export`), ` functionality and it only provides a `, mdx(\"em\", {\n parentName: \"p\"\n }, `single piece`), ` of functionality. The implementation and interface are separate but there may be multiple implementations and the implementation is hidden.`), mdx(\"h2\", null, `Package/Dependency`), mdx(\"p\", null, `Is a pack of some features which fulfills some functionality of your app. Once you install a package using NPM or Yarn, then the package is installed as a `, mdx(\"strong\", {\n parentName: \"p\"\n }, mdx(\"em\", {\n parentName: \"strong\"\n }, `dependency`)), ` in your app inside your `, mdx(\"em\", {\n parentName: \"p\"\n }, `package.json`), ` file. The modules that it comes with (aka libraries that consists of classes) are stored inside `, mdx(\"em\", {\n parentName: \"p\"\n }, `node_modules`), ` folder.`), mdx(\"h2\", null, `Distinction`), mdx(\"p\", null, `So let’s say you’re writing an application and you are using a `, mdx(\"strong\", {\n parentName: \"p\"\n }, mdx(\"em\", {\n parentName: \"strong\"\n }, `framework`)), ` of your choice. As you’re building your app, you realize that you need specific functionalities in order to achieve the things that you want on your app but sadly, this framework doesn’t have them. So before you try to build and implement them yourself, you look around and you find `, mdx(\"strong\", {\n parentName: \"p\"\n }, mdx(\"em\", {\n parentName: \"strong\"\n }, `package`)), ` that’ll fulfill your needs!`), mdx(\"p\", null, `This package not only contains the things that you need, it has a collection of other related functionalities (`, mdx(\"strong\", {\n parentName: \"p\"\n }, mdx(\"em\", {\n parentName: \"strong\"\n }, `libraries/modules`)), `) that you possibly need! In order to use those libraries/modules, you would first install the package itself using NPM or Yarn (which gets added to your package.json file.) Then import the library/module that you need into your component.`), mdx(\"blockquote\", null, mdx(\"p\", {\n parentName: \"blockquote\"\n }, `This is the same things as when you want to use a component in a page let’s say, you’d have to export that component and in your page, you would just import it in order to use/render it.`)), mdx(\"h2\", null, `Recap`), mdx(\"p\", null, mdx(\"strong\", {\n parentName: \"p\"\n }, `Library/Modules:`), ` A group of functions of a language in a file that gives you custom functions to call which makes the coding process faster for you. These are ready to be used somewhere else and it’s stored in the node_modules folder.`), mdx(\"p\", null, mdx(\"strong\", {\n parentName: \"p\"\n }, `Package:`), ` A collection of classes/files of similar functionality to make your development process easier.`), mdx(\"p\", null, mdx(\"strong\", {\n parentName: \"p\"\n }, `Dependency:`), ` Once a package is installed, it becomes a dependency of your app.`), mdx(\"p\", null, mdx(\"strong\", {\n parentName: \"p\"\n }, `Framework:`), ` The skeleton where the app defines the “meat” of the operation by filling out the skeleton. Though the skeleton still has code to link up the parts, the most important work here is done by the skeleton.`), mdx(\"p\", null, `Hope that clears the confusion!`));\n}\n;\nMDXContent.isMDXComponent = true;","timeToRead":2,"frontmatter":{"slug":"the-debate-between-library-vs-package-vs-framework-vs-module","title":"The Debate between Module vs Package vs Library vs Framework","categories":["software-engineering"],"tags":["software-engineering","tools"],"description":"One of the most frequent asked question in Software Engineering.","bannerUrl":"https://res.cloudinary.com/dehanz-dev/image/upload/v1640453749/dannielhansel.com/content/blog/package-library_xqm8ix.webp","date":"January 10, 2021"},"id":"f2db5aef-b482-532f-9a92-f93463cc0a26","excerpt":"Have you ever wondered what is the difference between a Framework, a library, a package and a module…"}},{"node":{"fields":{"slug":"/blog/7-basic-rules-for-self-improvement/"},"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\": \"7-basic-rules-for-self-improvement\",\n \"title\": \"7 Basic Rules for Self Improvement\",\n \"date\": \"2020-11-27\",\n \"author\": \"Danniel Hansel\",\n \"description\": \"What I have learned from doing self-development work.\",\n \"published\": true,\n \"featured\": true,\n \"categories\": [\"personal-development\"],\n \"tags\": [\"personal\", \"productivity\"],\n \"bannerUrl\": \"https://res.cloudinary.com/dehanz-dev/image/upload/v1639602245/dannielhansel.com/content/blog/7-basic-rules-for-self-improvement_vhqngn.jpg\",\n \"bannerCredit\": \"Photo by [Alif Ngoylung](https://unsplash.com/photos/-A_Sx8GrRWg) 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(\"h1\", null, `What I've Learned from Self Development`), mdx(\"p\", null, `This is my story on how I decided to change my life and transform it into a happier, healthier, more fulfilling life. It was a fun journey for me as this is just the beginning of a new chapter in my life. If you have ever wondered why your life sucks (I apologize for the language here) or you've been stuck in the same position for a long time, miserably, and seeking ways to improve it, I'd recommend you to read along.`), mdx(\"p\", null, `My main goal is to help some of you that have or had struggles (like me) to overcome your fears, failures and reach your highest potential. So that the remaining time you have on this planet can be improved and you will be able to achieve and have anything you want in life. Therefore, I will share with you some my experiences as well as the daily things that I do to improve myself.`), mdx(\"p\", null, `Everyone has their own problems in life. Literally, every human being on this planet. Everyone’s journey is also different but there would always be lessons to be learned. Once we acknowledge it and learn from it, we can understand it better and find a better approach on how to go about any obstacle life throws at us the next time we encounter it.`), mdx(\"blockquote\", null, mdx(\"p\", {\n parentName: \"blockquote\"\n }, `🗣 \"Life is a learning experience but take it with a grain of salt.\" - Jim Rohn`)), mdx(\"p\", null, `One of my mentors that I still listen to and learn from to this day and moving forward is `, mdx(\"strong\", {\n parentName: \"p\"\n }, `Jim Rohn`), `. He is my all-time favorite as I will quote a lot of his great affirmations on this post. (I have a list of other great mentors that you can checkout `, `[here]`, `)`), mdx(\"p\", null, `Listed below are 7 personal development goals and routines that have helped my personal growth journey tremendously and possibly, you too!`), mdx(\"h2\", null, `1. Develop A Morning Routine`), mdx(\"p\", null, `Everyone has a routine that works for them. Develop your own morning routine so that you can create a successful day, week, month, and year. By establishing these powerful morning habits, not only you will increase productivity, but you will also increase your self-esteem which brings: `, mdx(\"strong\", {\n parentName: \"p\"\n }, `happiness and self-confidence.`)), mdx(\"blockquote\", null, mdx(\"p\", {\n parentName: \"blockquote\"\n }, `🗣 “Motivation is what gets you started. Habit is what keeps you going.” - Jim Rohn`)), mdx(\"p\", null, `Once you have found and developed a morning routine that works for you, apply this routine to your every day life. Over time, it will transform into habits which then quickly turn into a lifestyle. A healthy, happy and more fulfilling lifestyle! Weirdly, this method works in mysterious ways as it affects your self-confidence which then affects your overall performance. This brings me to my next point which is tightly connected, `, mdx(\"em\", {\n parentName: \"p\"\n }, `self-discipline.`)), mdx(\"h2\", null, `2. Self-Discipline`), mdx(\"blockquote\", null, mdx(\"p\", {\n parentName: \"blockquote\"\n }, `🗣 “Everyone must choose one of two pains: The pain of discipline or the pain of regret.” - Jim Rohn`)), mdx(\"p\", null, `The people who succeed in life have a `, mdx(\"em\", {\n parentName: \"p\"\n }, `pattern`), ` of how they do things in order to succeed. Whether in business, financial, social, relationship, or career. One thing in common is that they all have self-discipline. `, mdx(\"em\", {\n parentName: \"p\"\n }, `Success is nothing more than a few simple disciplines practiced every day.`)), mdx(\"p\", null, `If we take a look the most successful leaders that are working their hardest to improve the world for the better, all of them do have self-discipline. Take Jeff Bezos for example as he is currently the richest man in the world besides being the CEO of Amazon. How is he able to achieve all of his success, lead one of the most gigantic companies, while maintaining a healthy lifestyle?`), mdx(\"blockquote\", null, mdx(\"p\", {\n parentName: \"blockquote\"\n }, `🗣 “Affirmations without discipline is the beginning of delusion.” - Jim Rohn`)), mdx(\"p\", null, `If you are one of the people who struggle with this, don’t worry. I have a `, mdx(\"strong\", {\n parentName: \"p\"\n }, `solution`), ` for you: Start from the smallest things AND have interest in them. Do them good and master them. Then move on to the next one. Everyone has to start somewhere right? Well, this is how I was able to start bettering myself. You’ve got to take consistent, MASSIVE Action and only then you will begin to build unstoppable momentum towards your goals that no one could ever stop you from anything.`), mdx(\"p\", null, `Let go of your anger, annoyance and resentment when avoidance is NOT an option.`), mdx(\"h2\", null, `3. Be Grateful`), mdx(\"blockquote\", null, mdx(\"p\", {\n parentName: \"blockquote\"\n }, `🗣 “There’s no better opportunity to receive more than to be thankful for what you already have. Thanksgiving opens the windows of opportunity for ideas to flow your way.” - Jim Rohn`)), mdx(\"p\", null, `This has been a huge impact on my life as I am continually growing and learning. I start my morning every day by practicing gratitude. By going through this gratitude process, not only my brain will thrive, I will also appreciate the things I already have. Otherwise, I will not be given the things that I really want.`), mdx(\"p\", null, `I mean let's face it, life will never go as planned. There will always be undesirable surprises. If the only time you are happy is when things are going your way, most likely you are not going to be happy very often. Having an attitude of gratitude, puts you in a beautiful state no matter what life throws our way.`), mdx(\"h2\", null, `4. Identify Your Bad Lifestyle Habits and CHANGE them!`), mdx(\"p\", null, `I used to complain and blame everything around me like my job, the government, the weather until I heard my mentor’s quote that really changed my life:`), mdx(\"blockquote\", null, mdx(\"p\", {\n parentName: \"blockquote\"\n }, `🗣 \"For things you change, you have to change.” - Jim Rohn`)), mdx(\"p\", null, `Then, I used to procrastinate a LOT when I was in college because I was lazy and always feel overwhelmed when it comes to learning new things. Until I realized that once adulthood hits, nothing will be given to you anymore. If this is you, I have great news for you.`), mdx(\"p\", null, `To overcome this, it’s quite simple and easy. Just make a list of all the bad habits that you have, break it down to few simple steps and make one step at a time. Discipline yourself to make just the first step… then the second… then the third and before you know it, this becomes systematic because you’ll build a momentum, and you will keep going! Say to yourself, “like I should? I could? and I will do it! No more would I let neglect let me down!”`), mdx(\"p\", null, `Here is the thing. Neglect starts off as an infection. When you start neglecting something that you should be doing, it will affect the next one, and the next one. Until you realize, neglect has become a disease and has affected your overall performance.`), mdx(\"p\", null, `Start doing the push-ups or the things that you have been postponing. Make small incremental, progressive progress every day. And you will realize that your self-esteem is getting higher and higher and you will be happier each day.`), mdx(\"h2\", null, `5. Constantly Work on Yourself`), mdx(\"p\", null, `As Jim Rohn says,`), mdx(\"blockquote\", null, mdx(\"p\", {\n parentName: \"blockquote\"\n }, `🗣 “It’s not about what you are getting. It’s about Who you are Becoming (through the process.)”`)), mdx(\"p\", null, `Ever since I had started my journey to become the best I could become, I am always determined to keep working and investing in myself, every single day. I do believe that even if my destination is still far away, by keep working day and night, I will eventually get closer to my goals each day. I would always remind myself to Go home smarter than I came, go home with more ideas than I came.`), mdx(\"p\", null, `This is also a great opportunity to master your Time Management skill. Once you know what you want(desire), your brain will work towards it(determination). You will eventually dedicate your time into something worth. Let’s say you’re driving to work, go find a podcast that will teach you something. Maybe a new skill that you’ve been wanting to learn or adopt or maybe a new concept that you need a better understanding about.`), mdx(\"blockquote\", null, mdx(\"p\", {\n parentName: \"blockquote\"\n }, `🗣 \"Don’t spend major time in minor things.” - Jim Rohn`)), mdx(\"p\", null, `Use your time wisely. To work on yourself, invest in yourself. Don’t be casual in learning. Work to keep adding value to yourself so you would be attractive to the marketplace and next thing you know, you have opened up more doors of opportunity. I always remind myself to Work harder on myself than I do at my job. And to also learn from other people as you simply can’t experience everything. Taking the time to recognize the experiences, the successes and failures of others can help you achieve what you want in life.”`), mdx(\"h2\", null, `6. Take Care Of Yourself`), mdx(\"p\", null, `When you are constantly working, whether in yourself or on your job, you also need to consider your health as an important factor. Not taking care of yourself will result and put you in a bad spot because if you get sick, not only that’ll stop you from working towards your goals but also it could cost you a crazily amount of money in the long run.`), mdx(\"blockquote\", null, mdx(\"p\", {\n parentName: \"blockquote\"\n }, `🗣 “Take care of your body. It’s the only place where you have to live.” - Jim Rohn`)), mdx(\"p\", null, `The benefits you’d get from taking care of yourself are huge. You would start feeling better about yourself which improves your self-confidence and self-love. You would also feel good every day because your body is healthy. Start by a few simple disciplines every day. Maybe take a walk around the block, eat an apple a day, or going to the gym for 30 minutes a day. Start yourself a new fresh day that could make the rest of your day better.`), mdx(\"blockquote\", null, mdx(\"p\", {\n parentName: \"blockquote\"\n }, `🗣 \"Either you run the day or the day runs you.” - Jim Rohn`)), mdx(\"h2\", null, `7. Ask Better Questions`), mdx(\"p\", null, `Lastly, you need to ask better questions to yourself. I used to think “Why do I suck at (something). Why am I like this?” Then part of my brain gives me an answer that negatively affects me emotionally and mentally. Then I discovered that the way the brain works is like playing fetch with your dog. When you fetch your dog a stick, guess what? It will fetch it back to you, consistently and almost every time.`), mdx(\"p\", null, `Now you might ask, how does that relate to how our brains work? Well, when you ask a lousy question, your brain will automatically fetch a lousy answer. Instead, you can ask, “How could I do better? How could I improve to be better? What do I need to do to solve this problem?” By practicing this technique every day, not only your brain will be trained to think on a higher level but it will also systematically start to ask good questions and in result? It will bring you useful ideas and thoughts.`), mdx(\"p\", null, `Just remember, there is also the other side which I call it the Negativity side. This is the part of the brain that will fetch answers coming from doubts, worry, etc and they will take everything good that you’ve created and they will take it all away. That is why you need to always, `, mdx(\"em\", {\n parentName: \"p\"\n }, `stand guard at the door of your own mind`), `. This side is what causing most people to quit and give up the things that they have built.`), mdx(\"p\", null, `Thank you for reading my post! 🙏 👏 Hope you can get something and learn from my experience!`));\n}\n;\nMDXContent.isMDXComponent = true;","timeToRead":7,"frontmatter":{"slug":"7-basic-rules-for-self-improvement","title":"7 Basic Rules for Self Improvement","categories":["personal-development"],"tags":["personal","productivity"],"description":"What I have learned from doing self-development work.","bannerUrl":"https://res.cloudinary.com/dehanz-dev/image/upload/v1639602245/dannielhansel.com/content/blog/7-basic-rules-for-self-improvement_vhqngn.jpg","date":"November 27, 2020"},"id":"1bd58e0e-11af-50e2-b16f-1284d82c7cea","excerpt":"What I've Learned from Self Development This is my story on how I decided to change my life and…"}}]},"tags":{"group":[{"fieldValue":"backend","totalCount":2},{"fieldValue":"bootstrap","totalCount":1},{"fieldValue":"database","totalCount":4},{"fieldValue":"gatsby","totalCount":2},{"fieldValue":"javascript","totalCount":1},{"fieldValue":"nextjs","totalCount":3},{"fieldValue":"performance","totalCount":1},{"fieldValue":"personal","totalCount":3},{"fieldValue":"productivity","totalCount":3},{"fieldValue":"react","totalCount":5},{"fieldValue":"software-engineering","totalCount":1},{"fieldValue":"ssg","totalCount":1},{"fieldValue":"ssr","totalCount":3},{"fieldValue":"tailwind-css","totalCount":1},{"fieldValue":"tools","totalCount":1}]}},"pageContext":{}}, "staticQueryHashes": ["2744905544","3145194271","3970664207"]}