{"componentChunkName":"component---node-modules-narative-gatsby-theme-novela-src-templates-article-template-tsx","path":"/blog/beginning-your-web-development-journey-start-here","webpackCompilationHash":"98ad53f8c1f4a6cb2faa","result":{"data":{"allSite":{"edges":[{"node":{"siteMetadata":{"name":"vnLoop"}}}]}},"pageContext":{"isCreatedByStatefulCreatePages":false,"article":{"id":"fd7cfe27-0579-5095-b7ec-0d15a219bd50","slug":"/blog/beginning-your-web-development-journey-start-here","title":"Beginning your Web Development Journey? Start here.","author":"Marcus Wood","date":"July 11th, 2018","dateForSEO":"2018-07-11T00:00:00.000Z","timeToRead":4,"excerpt":"I can’t tell you how many nights I spun my wheels in the wrong direction learning something I’ve never used. This is what I wish someone would of told me as well as a bunch of great resources to get you started.","body":"function _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/* @jsx mdx */\nvar _frontmatter = {\n  \"title\": \"Beginning your Web Development Journey? Start here.\",\n  \"author\": \"Marcus Wood\",\n  \"date\": \"2018-07-11T00:00:00.000Z\",\n  \"hero\": \"./images/hero.jpg\",\n  \"excerpt\": \"I can’t tell you how many nights I spun my wheels in the wrong direction learning something I’ve never used. This is what I wish someone would of told me as well as a bunch of great resources to get you started.\"\n};\n\nvar makeShortcode = function makeShortcode(name) {\n  return function MDXDefaultShortcode(props) {\n    console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n    return mdx(\"div\", props);\n  };\n};\n\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, [\"components\"]);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"p\", null, \"I started learning how to code four years ago. When I started, I knew that I wanted to build websites and apps. I figured I\\u2019d learn what I needed and make some cool stuff to land an entry level developer job. What I didn\\u2019t anticipate is how many tools there were to choose from, and there wasn\\u2019t much direction on where to start. Choosing a code editor, using the command line, version control, and not to mention learning the tech jargon made it hard to start.\"), mdx(\"p\", null, \"I can\\u2019t tell you how many nights I spun my wheels in the wrong direction learning something I\\u2019ve never used. This is what I wish someone would of told me as well as a bunch of great resources to get you started.\"), mdx(\"h2\", {\n    \"id\": \"where-to-start\"\n  }, \"Where to Start\"), mdx(\"p\", null, \"There are A LOT of languages and tools you can use to build for the web. All of them have their benefits, and are maintained by tons of super smart people. While this is great for pushing the web forward, it\\u2019s confusing and overwhelming to start.\"), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"Learn HTML, CSS, and Javascript exclusively.\")), mdx(\"p\", null, \"If know HTML, CSS, and Javascript on a deep level, you will be able to create anything on the web.\"), mdx(\"h2\", {\n    \"id\": \"the-core-ten\"\n  }, \"The Core Ten\"), mdx(\"p\", null, \"Strive for ten hours of real coding each week. That means in the editor, slinging divs, and writing methods. Podcasts, tutorials, and reading blogs aren\\u2019t part of that ten. Don\\u2019t go over and definitely don\\u2019t go under. There\\u2019s a certain amount of time it takes for the concepts to sink in, so a steady pace will level up your skills faster.\"), mdx(\"h2\", {\n    \"id\": \"tools-to-use\"\n  }, \"Tools to Use\"), mdx(\"p\", null, \"Next up, download VsCode to use as your code editor. After that you\\u2019ll need a terminal to run commands and do various other things so download iTerm2. Lastly, you need a browser to test your website in so grab the latest version of Google Chrome.\"), mdx(\"h2\", {\n    \"id\": \"getting-into-the-community\"\n  }, \"Getting Into the Community\"), mdx(\"p\", null, \"The only way to catch up is to jump right in. Do the following:\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Read \", mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"https://medium.freecodecamp.org/\"\n  }), \"FreeCodeCamp\"), \" and \", mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"https://hackernoon.com/\"\n  }), \"Hackernoon\"), \" daily\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Listen to the podcasts \", mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"https://syntax.fm/\"\n  }), \"Syntax\"), \" and \", mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"http://shoptalkshow.com/\"\n  }), \"Shop Talk Show\"), \" weekly\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Hop on Twitter and follow a bunch of developers. Here\\u2019s a short list to get you started: \", mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"https://twitter.com/caldera_digital\"\n  }), \"Caldera\"), \" (shameless plug), \", mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"https://twitter.com/dan_abramov\"\n  }), \"Dan Abramov\"), \", \", mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"https://twitter.com/kylemathews\"\n  }), \"Kyle Mathews\"), \", \", mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"https://twitter.com/codebeast\"\n  }), \"Christian Nwamba\"), \", \", mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"https://twitter.com/wesbos\"\n  }), \"Wes Bos\"), \", \", mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"https://twitter.com/_developit\"\n  }), \"Jason Miller \\uD83E\\uDD8A \\u269B\"), \", \", mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"https://twitter.com/stolinski\"\n  }), \"Scott Tolinski\"), \", \", mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"https://twitter.com/ryanflorence\"\n  }), \"Ryan Florence\"))), mdx(\"p\", null, \"Will you understand this stuff yet? Probably not. The point is to get you introduced to it early so it\\u2019s easier to dive in later.\"), mdx(\"h2\", {\n    \"id\": \"html-and-css\"\n  }, \"HTML and CSS\"), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Time\"), \": 40 hours\"), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"https://res.cloudinary.com/calderablog/image/upload/q_auto:good/v1564963149/1_VogqCy95D5kgQu0_GsHBgg_yul5im.jpg\",\n    \"alt\": \"html programming meme\"\n  }))), mdx(\"p\", null, \"HTML gives webpages structure and CSS makes them look pretty. Do not use a library like Bootstrap for styling during this part. The point is to get used to creating markup, positioning elements, and styling only using CSS. Some of my go to resources to learn for this are:\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"https://www.codecademy.com/\"\n  }), \"CodeCademy\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"https://teamtreehouse.com/tracks/front-end-web-development\"\n  }), \"Treehouse: Front End Web Development\"))), mdx(\"p\", null, \"While you\\u2019re building things focus on using the Chrome DevTools. It\\u2019s important familiarize yourself with all of these things so you can deep dive into them later.\"), mdx(\"h2\", {\n    \"id\": \"source-control\"\n  }, \"Source Control\"), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Time\"), \": Every project you do after this point\"), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"https://res.cloudinary.com/calderablog/image/upload/q_auto:good/v1564963156/1_2f4FlVYtS8NeWOLqeZD9vg_fjcsum.jpg\",\n    \"alt\": \"source control programming meme\"\n  }))), mdx(\"p\", null, \"Do not skip this! From this point forward and forever, use source control to track and manage your changes. This enables you to go back in time if you really mess things up, collaborate with other developers, and share your code online. To start you\\u2019ll need to install Git, create a Github account, and initialize a repository. Check this course out to get started:\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"https://teamtreehouse.com/library/git-basics\"\n  }), \"Treehouse: Git Basics\"))), mdx(\"p\", null, \"This will likely be your first time using the command line to do computer things. It\\u2019s important to get comfortable there, and Git helps familiarize you with it initially. After you feel good about things start using SourceTree. It helps you visualize things and is friendlier to use.\"), mdx(\"h2\", {\n    \"id\": \"javascript\"\n  }, \"Javascript\"), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Time\"), \": 80 hours\"), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"https://res.cloudinary.com/calderablog/image/upload/q_auto:good/v1564963163/1_d5-0BS2qFeuGe0Z9DIObEQ_sjvldt.jpg\",\n    \"alt\": \"javascript programming meme\"\n  }))), mdx(\"p\", null, \"Now it\\u2019s time to start bringing things to life and jumping into Javascript. This is the scripting language of the web and allows you to do nearly anything nowadays. You can create iOS/Android apps, backend servers, web applications, desktop applications, and even do machine learning with it. Focus all of your time on learning this language and this language alone. If you research you\\u2019ll see things like PHP, Ruby, Python, Node, Flask, React, Angular, Webpack, Jenkins, Wordpress, Rollup, Firebase, Docker, Yaml, and the list goes on. All of this stuff is great (except maybe PHP), but you need to focus on learning one thing well before branching out. You most likely won\\u2019t be doing too many web things, but that\\u2019s ok for now. Places to start:\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"https://medium.freecodecamp.org/want-to-learn-javascript-heres-a-free-24-part-course-to-get-you-started-e7777baf86fb\"\n  }), \"Want to learn JavaScript? Here\\u2019s a free 24-part course to get you started.\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"https://www.udemy.com/modern-javascript-from-the-beginning/\"\n  }), \"Modern Javascript from the Beginning\"))), mdx(\"h2\", {\n    \"id\": \"bring-it-all-together\"\n  }, \"Bring It All Together\"), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Time\"), \": 60 hours\\nThis is where you take everything you\\u2019ve learned so far and bring it together to build some pretty cool things. I recommend going through Wes Bos\\u2019s \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://javascript30.com/\"\n  }), \"Javascript 30\"), \" course to get your feet wet in a variety of projects.\"), mdx(\"h2\", {\n    \"id\": \"react\"\n  }, \"React\"), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Time\"), \": 100 hours\\nThis is the make or break step in \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://hackernoon.com/tagged/learning\"\n  }), \"learning\"), \" modern day web \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://hackernoon.com/tagged/development\"\n  }), \"development\"), \" \\u2014 learning your first library/framework. Most of the demand you\\u2019ll see in the job market for web developers will involve knowledge of some Javascript library or framework. Popular ones are React, Angular, Vue, Preact, and jQuery (though not as much nowadays). You\\u2019ll likely end up learning more than one, but I like learning React first because it\\u2019s going to shake up everything you\\u2019ve learned so far. Courses to check out:\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"https://www.leveluptutorials.com/tutorials/react-for-everyone\"\n  }), \"Level Up Tutorials: React for Everyone\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"https://www.udemy.com/react-redux/\"\n  }), \"Modern React with Redux\"))), mdx(\"h2\", {\n    \"id\": \"css-time\"\n  }, \"CSS Time\"), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Time\"), \": 20 hours\"), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"https://media.giphy.com/media/yYSSBtDgbbRzq/giphy.gif\",\n    \"alt\": \"Family guy blind fighting css\"\n  }))), mdx(\"p\", null, \"By this time you should have a collection of good projects and hopefully learned CSS along the way. It\\u2019s normally the first thing you learn, but the hardest to master. There\\u2019s also a bunch of different ways to style as you\\u2019ve probably seen in the courses listed above. You have CSS, SCSS, LESS, CSS-in-JS, inline-styles, PostCSS, Scoped CSS, and on top of that a bunch of different design methodologies for organizing your CSS. Don\\u2019t let any of this overwhelm you. To get caught up, read Modern CSS Explained For Dinosaurs.\\nNow it\\u2019s time to dive into Flexbox. This will give you the power to create layouts with ease. For learning, read \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://medium.freecodecamp.org/an-animated-guide-to-flexbox-d280cf6afc35\"\n  }), \"How Flexbox works \\u2014 explained with big, colorful, animated gifs\"), \".\"), mdx(\"h2\", {\n    \"id\": \"more-javascript\"\n  }, \"More Javascript\"), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Time\"), \": 20 hours\\nIf you\\u2019ve made it this far, it\\u2019s time to slow it down and review what you\\u2019ve learned. Libraries, coding patterns, and best practices change all the time, but the foundation of the language does not. Learning Javascript on a deep level is the key to long term success in web development. Buy this course, go through every lesson of it, and make sure you understand these things before moving forward. \", mdx(\"em\", {\n    parentName: \"p\"\n  }, \"break glass\")), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"https://www.udemy.com/understand-javascript/\"\n  }), \"Javascript: Understanding the Weird Parts\"))), mdx(\"p\", null, \"Following this guide will help you learn faster, and focus on the most important aspects of web development. If you would be interested in a free video series that follows the the structure of this guide please clap and subscribe!\"), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"https://media.giphy.com/media/lnlAifQdenMxW/giphy.gif\",\n    \"alt\": \"Johnny drama victory\"\n  }))));\n}\n;\nMDXContent.isMDXComponent = true;","hero":{"full":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAJABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAABAAF/8QAFQEBAQAAAAAAAAAAAAAAAAAAAgD/2gAMAwEAAhADEAAAATJyNWR50F//xAAbEAEAAgIDAAAAAAAAAAAAAAACAAEDBBIxMv/aAAgBAQABBQLG+ZRLN4lUM1PC7//EABcRAQADAAAAAAAAAAAAAAAAAAABETH/2gAIAQMBAT8B1UP/xAAWEQEBAQAAAAAAAAAAAAAAAAAAARH/2gAIAQIBAT8BbX//xAAaEAACAgMAAAAAAAAAAAAAAAABEAARAkGB/9oACAEBAAY/AqOhLxfV/8QAGBABAAMBAAAAAAAAAAAAAAAAAQARMRD/2gAIAQEAAT8hJAtZrLgLRI5UyzXg/9oADAMBAAIAAwAAABCDD//EABcRAAMBAAAAAAAAAAAAAAAAAAABESH/2gAIAQMBAT8QWIKR/8QAFhEBAQEAAAAAAAAAAAAAAAAAAREA/9oACAECAQE/EFjc23//xAAcEAEAAgIDAQAAAAAAAAAAAAABABEhMUGhsXH/2gAIAQEAAT8QCgSHgzuE5RxpSq3iklBUY+zqE7HwnnP/2Q==","aspectRatio":2.2264150943396226,"src":"/static/e68cc92ecc79a6be606f41d4585bf53a/22328/hero.jpg","srcSet":"/static/e68cc92ecc79a6be606f41d4585bf53a/6d250/hero.jpg 236w,\n/static/e68cc92ecc79a6be606f41d4585bf53a/1a26c/hero.jpg 472w,\n/static/e68cc92ecc79a6be606f41d4585bf53a/22328/hero.jpg 944w,\n/static/e68cc92ecc79a6be606f41d4585bf53a/cca5d/hero.jpg 1260w","srcWebp":"/static/e68cc92ecc79a6be606f41d4585bf53a/1d644/hero.webp","srcSetWebp":"/static/e68cc92ecc79a6be606f41d4585bf53a/cbe96/hero.webp 236w,\n/static/e68cc92ecc79a6be606f41d4585bf53a/8ab83/hero.webp 472w,\n/static/e68cc92ecc79a6be606f41d4585bf53a/1d644/hero.webp 944w,\n/static/e68cc92ecc79a6be606f41d4585bf53a/7614f/hero.webp 1260w","sizes":"(max-width: 944px) 100vw, 944px"}},"regular":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAUCAwT/xAAWAQEBAQAAAAAAAAAAAAAAAAACAAH/2gAMAwEAAhADEAAAAcca2VqsahX/xAAbEAACAgMBAAAAAAAAAAAAAAABAgMRAAQSE//aAAgBAQABBQIRAq+vznNZG9CE+qMq3//EABURAQEAAAAAAAAAAAAAAAAAAAAS/9oACAEDAQE/AUv/xAAVEQEBAAAAAAAAAAAAAAAAAAAAEv/aAAgBAgEBPwFT/8QAGhAAAgMBAQAAAAAAAAAAAAAAAAERIjFBEP/aAAgBAQAGPwKrmTvjWotww//EABsQAAICAwEAAAAAAAAAAAAAAAERACEQMVFx/9oACAEBAAE/IS5hXXIUXYJsRKOGJWBKFB4awj//2gAMAwEAAgADAAAAEEwP/8QAGBEBAQADAAAAAAAAAAAAAAAAAQARIWH/2gAIAQMBAT8QwJqO7//EABcRAAMBAAAAAAAAAAAAAAAAAAABESH/2gAIAQIBAT8QsY9Yj//EABwQAQACAgMBAAAAAAAAAAAAAAEAESExQVGB0f/aAAgBAQABPxCgoBBFBl8+RDq1ATPEC2XeYeNmr0Z58iGBsmwr7U1pCtT/2Q==","aspectRatio":1.4954128440366972,"src":"/static/e68cc92ecc79a6be606f41d4585bf53a/6694a/hero.jpg","srcSet":"/static/e68cc92ecc79a6be606f41d4585bf53a/70b8f/hero.jpg 163w,\n/static/e68cc92ecc79a6be606f41d4585bf53a/7ec88/hero.jpg 327w,\n/static/e68cc92ecc79a6be606f41d4585bf53a/6694a/hero.jpg 653w,\n/static/e68cc92ecc79a6be606f41d4585bf53a/ed86f/hero.jpg 980w,\n/static/e68cc92ecc79a6be606f41d4585bf53a/30932/hero.jpg 1260w","srcWebp":"/static/e68cc92ecc79a6be606f41d4585bf53a/d603c/hero.webp","srcSetWebp":"/static/e68cc92ecc79a6be606f41d4585bf53a/64a97/hero.webp 163w,\n/static/e68cc92ecc79a6be606f41d4585bf53a/a98ca/hero.webp 327w,\n/static/e68cc92ecc79a6be606f41d4585bf53a/d603c/hero.webp 653w,\n/static/e68cc92ecc79a6be606f41d4585bf53a/c1bd6/hero.webp 980w,\n/static/e68cc92ecc79a6be606f41d4585bf53a/f031e/hero.webp 1260w","sizes":"(max-width: 653px) 100vw, 653px"}},"narrow":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAUCAwT/xAAWAQEBAQAAAAAAAAAAAAAAAAACAAH/2gAMAwEAAhADEAAAAcca2VqsahX/xAAbEAACAgMBAAAAAAAAAAAAAAABAgMRAAQSE//aAAgBAQABBQIRAq+vznNZG9CE+qMq3//EABURAQEAAAAAAAAAAAAAAAAAAAAS/9oACAEDAQE/AUv/xAAVEQEBAAAAAAAAAAAAAAAAAAAAEv/aAAgBAgEBPwFT/8QAGhAAAgMBAQAAAAAAAAAAAAAAAAERIjFBEP/aAAgBAQAGPwKrmTvjWotww//EABsQAAICAwEAAAAAAAAAAAAAAAERACEQMVFx/9oACAEBAAE/IS5hXXIUXYJsRKOGJWBKFB4awj//2gAMAwEAAgADAAAAEEwP/8QAGBEBAQADAAAAAAAAAAAAAAAAAQARIWH/2gAIAQMBAT8QwJqO7//EABcRAAMBAAAAAAAAAAAAAAAAAAABESH/2gAIAQIBAT8QsY9Yj//EABwQAQACAgMBAAAAAAAAAAAAAAEAESExQVGB0f/aAAgBAQABPxCgoBBFBl8+RDq1ATPEC2XeYeNmr0Z58iGBsmwr7U1pCtT/2Q==","aspectRatio":1.5,"src":"/static/e68cc92ecc79a6be606f41d4585bf53a/c1e08/hero.jpg","srcSet":"/static/e68cc92ecc79a6be606f41d4585bf53a/8bed6/hero.jpg 114w,\n/static/e68cc92ecc79a6be606f41d4585bf53a/1e283/hero.jpg 229w,\n/static/e68cc92ecc79a6be606f41d4585bf53a/c1e08/hero.jpg 457w,\n/static/e68cc92ecc79a6be606f41d4585bf53a/8ae28/hero.jpg 686w,\n/static/e68cc92ecc79a6be606f41d4585bf53a/5cf51/hero.jpg 914w,\n/static/e68cc92ecc79a6be606f41d4585bf53a/30932/hero.jpg 1260w","srcWebp":"/static/e68cc92ecc79a6be606f41d4585bf53a/72aed/hero.webp","srcSetWebp":"/static/e68cc92ecc79a6be606f41d4585bf53a/03a0a/hero.webp 114w,\n/static/e68cc92ecc79a6be606f41d4585bf53a/d2b1d/hero.webp 229w,\n/static/e68cc92ecc79a6be606f41d4585bf53a/72aed/hero.webp 457w,\n/static/e68cc92ecc79a6be606f41d4585bf53a/1a85c/hero.webp 686w,\n/static/e68cc92ecc79a6be606f41d4585bf53a/90a86/hero.webp 914w,\n/static/e68cc92ecc79a6be606f41d4585bf53a/f031e/hero.webp 1260w","sizes":"(max-width: 457px) 100vw, 457px"}},"seo":{"fixed":{"src":"/static/e68cc92ecc79a6be606f41d4585bf53a/0ff54/hero.jpg"}}}},"author":{"bio":"CEO and lead engineer of Caldera. Web apps, nature, and good vibes.\n","id":"e7f09e98-4c73-5a32-85ea-d63c09f0296f","name":"Marcus Wood","avatar":{"image":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAUABQDASIAAhEBAxEB/8QAGQABAAIDAAAAAAAAAAAAAAAAAAIFAQME/8QAGAEAAgMAAAAAAAAAAAAAAAAAAAMBAgT/2gAMAwEAAhADEAAAAYR0YXpuFSDlF1AT/8QAGxABAAIDAQEAAAAAAAAAAAAAAQARAgMiMkL/2gAIAQEAAQUC5rVt6uZoMUXP38Xc/8QAGREAAQUAAAAAAAAAAAAAAAAAAAEQEjFB/9oACAEDAQE/AdJCU3//xAAYEQACAwAAAAAAAAAAAAAAAAAAARASMf/aAAgBAgEBPwEoPY//xAAdEAABBAIDAAAAAAAAAAAAAAABAAIQERIhMVGx/9oACAEBAAY/Ai5/HqosxvqBe1toV5FCf//EABsQAQADAQEBAQAAAAAAAAAAAAEAESExQWFR/9oACAEBAAE/IcutOB1fkrrhzaJOz3GvPIIB8BG1pe5Dk7ZG7ttlV8jivan/2gAMAwEAAgADAAAAECgPgv/EABkRAAIDAQAAAAAAAAAAAAAAAAABESExcf/aAAgBAwEBPxCXaTk0YrR//8QAFhEBAQEAAAAAAAAAAAAAAAAAEQEg/9oACAECAQE/ECGB/8QAHRAAAgICAwEAAAAAAAAAAAAAAREAITFBYXGhUf/aAAgBAQABPxC4AaLWgHzmBDmZIQ9As+xKEBzBYqKDTHsMoJdPbEMTOFL6cYQIFJfUQ3FsLy1CAm1iKfM//9k=","aspectRatio":1,"src":"/static/8bcc12af0e783dbae86948b425ff8acf/fa1ea/marcus-wood.jpg","srcSet":"/static/8bcc12af0e783dbae86948b425ff8acf/afb2b/marcus-wood.jpg 13w,\n/static/8bcc12af0e783dbae86948b425ff8acf/7c20e/marcus-wood.jpg 25w,\n/static/8bcc12af0e783dbae86948b425ff8acf/fa1ea/marcus-wood.jpg 50w,\n/static/8bcc12af0e783dbae86948b425ff8acf/03612/marcus-wood.jpg 75w,\n/static/8bcc12af0e783dbae86948b425ff8acf/61cdf/marcus-wood.jpg 100w,\n/static/8bcc12af0e783dbae86948b425ff8acf/fd013/marcus-wood.jpg 200w","srcWebp":"/static/8bcc12af0e783dbae86948b425ff8acf/e7b2c/marcus-wood.webp","srcSetWebp":"/static/8bcc12af0e783dbae86948b425ff8acf/58718/marcus-wood.webp 13w,\n/static/8bcc12af0e783dbae86948b425ff8acf/74aad/marcus-wood.webp 25w,\n/static/8bcc12af0e783dbae86948b425ff8acf/e7b2c/marcus-wood.webp 50w,\n/static/8bcc12af0e783dbae86948b425ff8acf/ed320/marcus-wood.webp 75w,\n/static/8bcc12af0e783dbae86948b425ff8acf/66016/marcus-wood.webp 100w,\n/static/8bcc12af0e783dbae86948b425ff8acf/6b183/marcus-wood.webp 200w","sizes":"(max-width: 50px) 100vw, 50px"}}}},"basePath":"/blog","slug":"/blog/beginning-your-web-development-journey-start-here","id":"fd7cfe27-0579-5095-b7ec-0d15a219bd50","title":"Beginning your Web Development Journey? Start here.","next":[{"node":{"id":"bef10cf7-43ca-5296-982e-96b6cf4bede7","slug":"/blog/did-you-know-responsive-images-require-just-an-image-tag-and-two-attributes","title":"Did You Know Responsive Images Require Just an Image Tag and Two Attributes?","author":"Marcus Wood","date":"September 10th, 2017","dateForSEO":"2017-09-10T00:00:00.000Z","timeToRead":3,"excerpt":"Web performance matters. Studies show that 40 percent of your visitors will abandon your page if it takes more than three seconds to load.","body":"function _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/* @jsx mdx */\nvar _frontmatter = {\n  \"title\": \"Did You Know Responsive Images Require Just an Image Tag and Two Attributes?\",\n  \"author\": \"Marcus Wood\",\n  \"date\": \"2017-09-10T00:00:00.000Z\",\n  \"hero\": \"./images/hero.jpg\",\n  \"excerpt\": \"Web performance matters. Studies show that 40 percent of your visitors will abandon your page if it takes more than three seconds to load.\"\n};\n\nvar makeShortcode = function makeShortcode(name) {\n  return function MDXDefaultShortcode(props) {\n    console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n    return mdx(\"div\", props);\n  };\n};\n\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, [\"components\"]);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"p\", null, \"Web performance matters. \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://blog.kissmetrics.com/loading-time/\"\n  }), \"Studies show\"), \" that 40 percent of your visitors will abandon your page if it takes more than three seconds to load. If you are developing a new site or trying to make your current one faster, optimizing images and enabling the browser to choose the right image depending on the device and screen size will yield the most impressive gains. We\\u2019ll be using Cloudinary, a cloud-based image management solution to optimize, host, transform, and create responsive images.\\nCloudinary offers a variety of ways to optimize the images on your website. Their convenient API allows you to make transformations to images by using parameters in the URL of the image to make sure you always have what you need. This makes it a great fit for creating responsive images and shaving precious kilobytes off your initial page load time. We\\u2019ll be using a script I wrote to upload and generate responsive image tags to replace the current ones on your website.\"), mdx(\"h2\", {\n    \"id\": \"the-story-behind-responsive-images\"\n  }, \"The Story Behind Responsive Images\"), mdx(\"p\", null, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"http://cloudinary.com/documentation/responsive_images\"\n  }), \"Responsive images\"), \" have been around for a couple of years, and current browsers offer good support. They fall back gracefully to the original image if a browser does not support them, and the markup for a responsive image is just a normal tag plus two attributes.\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {}), \"<img sizes=\\u201D(max-width: 500px) 100vw, (max-width: 1400px) 33vw, 1400\\\"\\nsrcset=\\u201Dhttps://res.cloudinary.com/yourapp/image/upload/c_crop,r_max/c_scale,w_1400/v1501546428/Puppy.jpg 1400w,\\nhttps://res.cloudinary.com/yourapp/image/upload/c_crop,r_max/c_scale,w_1365/v1501546428/Puppy.jpg 1365w,\\nhttps://res.cloudinary.com/yourapp/image/upload/c_crop,r_max/c_scale,w_1202/v1501546428/Puppy.jpg 1202w,\\nhttps://res.cloudinary.com/yourapp/image/upload/c_crop,r_max/c_scale,w_872/v1501546428/Puppy.jpg 872w,\\nhttps://res.cloudinary.com/yourapp/image/upload/c_crop,r_max/c_scale,w_625/v1501546428/Puppy.jpg 625w,\\nhttps://res.cloudinary.com/yourapp/image/upload/c_crop,r_max/c_scale,w_200/v1501546428/Puppy.jpg 200w\\u201D\\nsrc=\\u201Dhttps://res.cloudinary.com/yourapp/image/upload/v1501546428/Puppy.jpg\\\"\\nalt=\\u201D\\u201D\\n/>\\n\")), mdx(\"p\", null, \"Responsive images use the same image tag with the addition of two attributes, sizes and srcset. Sizes are media conditions you define based off how the image reacts on certain website sizes. For instance, the tag above tells the browser for devices up to a width of 500 pixels, the image will be 100 percent of the view width(vw) and only 33 percent of the view width up to 1400 pixels. If neither are met, fall back to the size of the image.\\nNext up we have the srcset attribute, which defines the various widths of images the browser can choose from when rendering the page.\"), mdx(\"h2\", {\n    \"id\": \"knowing-the-right-number-of-images-to-make\"\n  }, \"Knowing the Right Number of Images to Make\"), mdx(\"p\", null, \"One of the most challenging parts of responsive images is knowing how many different image sizes to make to see relevant performance gains. Luckily, Cloudinary has a built a \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"http://www.responsivebreakpoints.com/\"\n  }), \"great tool\"), \" that enables you to choose the min-width, max-width, max images to make, and define the byte step before making another image transform.\"), mdx(\"h2\", {\n    \"id\": \"images-to-the-cloud\"\n  }, \"Images to the Cloud\"), mdx(\"p\", null, \"The first thing you\\u2019ll need to do to optimize your images and generate responsive images is to create an account with Cloudinary. They have a generous free tier that supports storing up to 75,000 images. Once you have an account you can manually upload images using the web app or API. We\\u2019ll be using the Cloudinary API, and a little script I made to handle uploading multiple images and generating responsive image tags to place in your app. This helps us create the markup we need and also automatically create the transformations we need to add into our app.\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {}), \"git clone\\n\\nhttps://github.com/mwood23/responsiveImageUploaderCloudinary.git\\n\\nnpm install\\n\")), mdx(\"p\", null, \"Next you\\u2019ll want to take your API information and place it in the .env file from the cloned repo. It can be found on the front page of the Cloudinary web console. While you\\u2019re in the console go over to the settings and choose a default upload quality. I use quality-eco, which will trim off a lot of size on the images while keeping them looking crisp. Now every time you upload an image it will automatically shave off several KBs. Next up, getting the images in there.\\nThe script takes in a JSON file, photosToUpload.json, with the path of where the file is, the responsive configuration and the image transform object.\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {}), \"{\\n  \\\"photos\\\": [\\n    {\\n      \\\"bytes_step\\\": 20000,\\n      \\\"location\\\": \\\"http://res.cloudinary.com/responsivebreakpoints/image/upload/dog.jpg\\\",\\n      \\\"max_images\\\": 20,\\n      \\\"max_width\\\": 1400,\\n      \\\"min_width\\\": 200,\\n      \\\"public_id\\\": \\\"Puppy\\\",\\n      \\\"tags\\\": [],\\n      \\\"transformation\\\": {\\n        \\\"crop\\\": \\\"crop\\\",\\n        \\\"radius\\\": \\\"max\\\"\\n      }\\n    },\\n    {\\n      \\\"bytes_step\\\": 15000,\\n      \\\"location\\\": \\\"/user/name/your/cool/puppy\\\",\\n      \\\"max_images\\\": 14,\\n      \\\"max_width\\\": 1200,\\n      \\\"min_width\\\": 800,\\n      \\\"public_id\\\": \\\"Your cool puppy photo\\\",\\n      \\\"tags\\\": [],\\n      \\\"transformation\\\": {}\\n    }\\n  ]\\n}\\n\")), mdx(\"p\", null, \"The location can take the local path on your computer or a link on the internet. Make sure to give it a public id that is different for each image to keep it organized. It\\u2019s best to look at the size your image is on your website and use the the responsive breakpoints tool mentioned above to determine the breakpoint configuration.\\nNow, back to the script. Navigate to the cloned repo in your terminal of choice and run node index.js. This will give you some logs in the console telling you that your images have been updated successfully and write some pretty markup to output.html that should look something like this:\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {}), \"<! \\u2014 Upload for PUBLIC_ID Puppy \\u2192\\n<img sizes=\\u201D(max-width: 1400px) 100vw, 1400px\\u201D\\nsrcset=\\u201Dhttps://res.cloudinary.com/yourapp/image/upload/c_crop,r_max/c_scale,w_1400/v1501546428/Puppy.jpg 1400w,\\nhttps://res.cloudinary.com/yourapp/image/upload/c_crop,r_max/c_scale,w_1365/v1501546428/Puppy.jpg 1365w,\\nhttps://res.cloudinary.com/yourapp/image/upload/c_crop,r_max/c_scale,w_1202/v1501546428/Puppy.jpg 1202w,\\nhttps://res.cloudinary.com/yourapp/image/upload/c_crop,r_max/c_scale,w_872/v1501546428/Puppy.jpg 872w,\\nhttps://res.cloudinary.com/yourapp/image/upload/c_crop,r_max/c_scale,w_625/v1501546428/Puppy.jpg 625w,\\nhttps://res.cloudinary.com/yourapp/image/upload/c_crop,r_max/c_scale,w_200/v1501546428/Puppy.jpg 200w\\u201D\\nsrc=\\u201Dhttps://res.cloudinary.com/yourapp/image/upload/v1501546428/Puppy.jpg\\\"\\nalt=\\u201D\\u201D\\n/>\\n<! \\u2014 Upload for PUBLIC_ID Your cool puppy photo \\u2192\\n<img sizes=\\u201D(max-width: 1200px) 100vw, 1200px\\u201D\\nsrcset=\\u201Dhttps://res.cloudinary.com/yourapp/image/upload/c_scale,w_1200/v1501546589/Your%20cool%20puppy%20photo.jpg 1200w,\\nhttps://res.cloudinary.com/yourapp/image/upload/c_scale,w_1182/v1501546589/Your%20cool%20puppy%20photo.jpg 1182w,\\nhttps://res.cloudinary.com/yourapp/image/upload/c_scale,w_1018/v1501546589/Your%20cool%20puppy%20photo.jpg 1018w,\\nhttps://res.cloudinary.com/yourapp/image/upload/c_scale,w_800/v1501546589/Your%20cool%20puppy%20photo.jpg 800w\\u201D\\nsrc=\\u201Dhttps://res.cloudinary.com/yourapp/image/upload/v1501546589/Your%20cool%20puppy%20photo.jpg\\\"\\nalt=\\u201D\\u201D\\n/>\\n\")), mdx(\"p\", null, \"Now you just need to replace the image tag in your app with the one above and you will have performant, responsive images. The image optimization alone should take a good amount of time off page rendering times. Combine that with responsive images and you\\u2019ve created a better user experience with just a couple hours of work (depending on how many images you have). This method works great for server-side rendered apps, static sites, or web apps where you don\\u2019t want to introduce another dependency into your app to optimize a couple of images. However, if your web app is heavily focuses on uploading and showing images Cloudinary has a \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"http://cloudinary.com/documentation/responsive_images#step_3_call_the_cloudinary_responsive_method\"\n  }), \"Javascript solution\"), \" that works well.\\nLet me know what kind of performance gains this did for you by running a \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://developers.google.com/web/tools/lighthouse/\"\n  }), \"Lighthouse test\"), \" before and after on your app!\"));\n}\n;\nMDXContent.isMDXComponent = true;","hero":{"full":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAJABQDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAQBAgP/xAAWAQEBAQAAAAAAAAAAAAAAAAACAAH/2gAMAwEAAhADEAAAAaSblIipl//EABwQAAAGAwAAAAAAAAAAAAAAAAABAgMSMgQRMf/aAAgBAQABBQIjLUgtxEservF2/8QAFhEBAQEAAAAAAAAAAAAAAAAAEQEQ/9oACAEDAQE/AUhn/8QAFREBAQAAAAAAAAAAAAAAAAAAEBH/2gAIAQIBAT8Bh//EABoQAAICAwAAAAAAAAAAAAAAAAABEEFRgZH/2gAIAQEABj8CWC+Fmxx//8QAHhAAAQMEAwAAAAAAAAAAAAAAAAERMRAhUXGBobH/2gAIAQEAAT8hQeDIzaZCu5nBNsdRaH//2gAMAwEAAgADAAAAEOQv/8QAFhEAAwAAAAAAAAAAAAAAAAAAAAEx/9oACAEDAQE/EFIFD//EABYRAQEBAAAAAAAAAAAAAAAAAAEREP/aAAgBAgEBPxApuf/EAB4QAQACAQQDAAAAAAAAAAAAAAEAESFRYXHwMUGx/9oACAEBAAE/EG0q9rVVXtCI5AhyMAc7EUUUCx2zvNZ0Wk8nB8n/2Q==","aspectRatio":2.2264150943396226,"src":"/static/1d9cd0d60d7a77e770cf2bb93e44b7fa/22328/hero.jpg","srcSet":"/static/1d9cd0d60d7a77e770cf2bb93e44b7fa/6d250/hero.jpg 236w,\n/static/1d9cd0d60d7a77e770cf2bb93e44b7fa/1a26c/hero.jpg 472w,\n/static/1d9cd0d60d7a77e770cf2bb93e44b7fa/22328/hero.jpg 944w,\n/static/1d9cd0d60d7a77e770cf2bb93e44b7fa/cca5d/hero.jpg 1260w","srcWebp":"/static/1d9cd0d60d7a77e770cf2bb93e44b7fa/1d644/hero.webp","srcSetWebp":"/static/1d9cd0d60d7a77e770cf2bb93e44b7fa/cbe96/hero.webp 236w,\n/static/1d9cd0d60d7a77e770cf2bb93e44b7fa/8ab83/hero.webp 472w,\n/static/1d9cd0d60d7a77e770cf2bb93e44b7fa/1d644/hero.webp 944w,\n/static/1d9cd0d60d7a77e770cf2bb93e44b7fa/7614f/hero.webp 1260w","sizes":"(max-width: 944px) 100vw, 944px"}},"regular":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAMABQDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAQBAgP/xAAWAQEBAQAAAAAAAAAAAAAAAAACAAH/2gAMAwEAAhADEAAAAaTkqUwLmX//xAAaEAEBAAIDAAAAAAAAAAAAAAABAgMSABEx/9oACAEBAAEFAhA25eSNl6xTd3Xj/8QAFhEBAQEAAAAAAAAAAAAAAAAAEQEQ/9oACAEDAQE/AUhn/8QAFREBAQAAAAAAAAAAAAAAAAAAEBH/2gAIAQIBAT8Bh//EABoQAAICAwAAAAAAAAAAAAAAAAAhAUECEFH/2gAIAQEABj8CjhZYkPKdf//EAB0QAAICAgMBAAAAAAAAAAAAAAABESFRcTFBgbH/2gAIAQEAAT8h9AVkhtpj9oVgbPcn0fYcakXOz//aAAwDAQACAAMAAAAQ5A//xAAXEQADAQAAAAAAAAAAAAAAAAAAAREx/9oACAEDAQE/EFbAsP/EABcRAAMBAAAAAAAAAAAAAAAAAAABIRH/2gAIAQIBAT8Qpjjw/8QAHBABAAICAwEAAAAAAAAAAAAAAQARITFRYXFB/9oACAEBAAE/EGgoSrNVfUI32ULdmoe+ptBpYvj2J3zF4rfPMMCgvGj7LwWruqz/2Q==","aspectRatio":1.6804123711340206,"src":"/static/1d9cd0d60d7a77e770cf2bb93e44b7fa/6694a/hero.jpg","srcSet":"/static/1d9cd0d60d7a77e770cf2bb93e44b7fa/70b8f/hero.jpg 163w,\n/static/1d9cd0d60d7a77e770cf2bb93e44b7fa/7ec88/hero.jpg 327w,\n/static/1d9cd0d60d7a77e770cf2bb93e44b7fa/6694a/hero.jpg 653w,\n/static/1d9cd0d60d7a77e770cf2bb93e44b7fa/ed86f/hero.jpg 980w,\n/static/1d9cd0d60d7a77e770cf2bb93e44b7fa/30932/hero.jpg 1260w","srcWebp":"/static/1d9cd0d60d7a77e770cf2bb93e44b7fa/d603c/hero.webp","srcSetWebp":"/static/1d9cd0d60d7a77e770cf2bb93e44b7fa/64a97/hero.webp 163w,\n/static/1d9cd0d60d7a77e770cf2bb93e44b7fa/a98ca/hero.webp 327w,\n/static/1d9cd0d60d7a77e770cf2bb93e44b7fa/d603c/hero.webp 653w,\n/static/1d9cd0d60d7a77e770cf2bb93e44b7fa/c1bd6/hero.webp 980w,\n/static/1d9cd0d60d7a77e770cf2bb93e44b7fa/f031e/hero.webp 1260w","sizes":"(max-width: 653px) 100vw, 653px"}},"narrow":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAMABQDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAQBAgP/xAAWAQEBAQAAAAAAAAAAAAAAAAACAAH/2gAMAwEAAhADEAAAAaTkqUwLmX//xAAaEAEBAAIDAAAAAAAAAAAAAAABAgMSABEx/9oACAEBAAEFAhA25eSNl6xTd3Xj/8QAFhEBAQEAAAAAAAAAAAAAAAAAEQEQ/9oACAEDAQE/AUhn/8QAFREBAQAAAAAAAAAAAAAAAAAAEBH/2gAIAQIBAT8Bh//EABoQAAICAwAAAAAAAAAAAAAAAAAhAUECEFH/2gAIAQEABj8CjhZYkPKdf//EAB0QAAICAgMBAAAAAAAAAAAAAAABESFRcTFBgbH/2gAIAQEAAT8h9AVkhtpj9oVgbPcn0fYcakXOz//aAAwDAQACAAMAAAAQ5A//xAAXEQADAQAAAAAAAAAAAAAAAAAAAREx/9oACAEDAQE/EFbAsP/EABcRAAMBAAAAAAAAAAAAAAAAAAABIRH/2gAIAQIBAT8Qpjjw/8QAHBABAAICAwEAAAAAAAAAAAAAAQARITFRYXFB/9oACAEBAAE/EGgoSrNVfUI32ULdmoe+ptBpYvj2J3zF4rfPMMCgvGj7LwWruqz/2Q==","aspectRatio":1.6764705882352942,"src":"/static/1d9cd0d60d7a77e770cf2bb93e44b7fa/c1e08/hero.jpg","srcSet":"/static/1d9cd0d60d7a77e770cf2bb93e44b7fa/8bed6/hero.jpg 114w,\n/static/1d9cd0d60d7a77e770cf2bb93e44b7fa/1e283/hero.jpg 229w,\n/static/1d9cd0d60d7a77e770cf2bb93e44b7fa/c1e08/hero.jpg 457w,\n/static/1d9cd0d60d7a77e770cf2bb93e44b7fa/8ae28/hero.jpg 686w,\n/static/1d9cd0d60d7a77e770cf2bb93e44b7fa/5cf51/hero.jpg 914w,\n/static/1d9cd0d60d7a77e770cf2bb93e44b7fa/30932/hero.jpg 1260w","srcWebp":"/static/1d9cd0d60d7a77e770cf2bb93e44b7fa/72aed/hero.webp","srcSetWebp":"/static/1d9cd0d60d7a77e770cf2bb93e44b7fa/03a0a/hero.webp 114w,\n/static/1d9cd0d60d7a77e770cf2bb93e44b7fa/d2b1d/hero.webp 229w,\n/static/1d9cd0d60d7a77e770cf2bb93e44b7fa/72aed/hero.webp 457w,\n/static/1d9cd0d60d7a77e770cf2bb93e44b7fa/1a85c/hero.webp 686w,\n/static/1d9cd0d60d7a77e770cf2bb93e44b7fa/90a86/hero.webp 914w,\n/static/1d9cd0d60d7a77e770cf2bb93e44b7fa/f031e/hero.webp 1260w","sizes":"(max-width: 457px) 100vw, 457px"}},"seo":{"fixed":{"src":"/static/1d9cd0d60d7a77e770cf2bb93e44b7fa/0ff54/hero.jpg"}}}}},{"node":{"id":"b8cb571e-709a-5f0c-98be-b69c2dbed477","slug":"/blog/supercharge-your-workflow-with-profiles-and-arrangements","title":"Supercharge your workflow with profiles and arrangements","author":"Marcus Wood","date":"May 23rd, 2020","dateForSEO":"2020-05-23T00:00:00.000Z","timeToRead":2,"excerpt":"If you’ve ever had to manage multiple projects, keeping up with the command line can be cumbersome. Here are a couple of hot tips on how juggle multiple projects that will save you a ton of time.","body":"function _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/* @jsx mdx */\nvar _frontmatter = {\n  \"title\": \"Supercharge your workflow with profiles and arrangements\",\n  \"author\": \"Marcus Wood\",\n  \"date\": \"2020-05-23T00:00:00.000Z\",\n  \"hero\": \"./images/hero.jpg\",\n  \"excerpt\": \"If you’ve ever had to manage multiple projects, keeping up with the command line can be cumbersome. Here are a couple of hot tips on how juggle multiple projects that will save you a ton of time.\"\n};\n\nvar makeShortcode = function makeShortcode(name) {\n  return function MDXDefaultShortcode(props) {\n    console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n    return mdx(\"div\", props);\n  };\n};\n\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, [\"components\"]);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"p\", null, \"If you\\u2019ve ever had to manage multiple projects, keeping up with the command line can be cumbersome. Here are a couple of hot tips on how juggle multiple projects that will save you a ton of time.\"), mdx(\"p\", null, \"If you\\u2019re using the regular Mac Terminal, I highly recommend switching over to iTerm2 (it\\u2019s just better). More on why in a bit.\"), mdx(\"h2\", {\n    \"id\": \"ssh-aliases\"\n  }, \"SSH Aliases\"), mdx(\"p\", null, \"Sometimes, you need to SSH into a server somewhere. Sometimes you have twenty different servers you\\u2019d like to SSH into. Remembering where they live and what they\\u2019re called can be a pain.\\nTo save time, create aliases for each server in under a minute. Here\\u2019s how:\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-sh\"\n  }), \"# Open a terminal window\\nnano ~/.ssh/config\\n\\n# Fill in the following to create an alias\\nHost <Name you want to assign>\\n  Hostname <Where you want to ssh>\\n  User <User you want to login as>\\n  IdentityFile ~/.ssh/<pem file you want to use>\\n\\n# Exit and save the file\\nctrl + x\\ny\\nenter\\n\\n# Now instead of doing this to connect\\nssh -i \\\"<pem file>\\\" <user>@<hostname>\\n\\n# You can do this\\nssh name-you-assigned\\n\")), mdx(\"h2\", {\n    \"id\": \"iterm2-profiles-and-arrangements\"\n  }, \"iTerm2 Profiles and Arrangements\"), mdx(\"p\", null, \"Profiles are great and have changed my daily workflow. Sometimes your terminal looks like this:\"), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"https://res.cloudinary.com/calderablog/image/upload/q_auto:good/v1564962203/unnamed-terminals_qpzalq.png\",\n    \"alt\": \"unnamed terminals\"\n  }))), mdx(\"p\", null, \"The problem is, you don\\u2019t know which window you want to click. You also don\\u2019t want to close out windows, because then you\\u2019ll have to open a new window, navigate back to the correct directory, and remember the copy pasta to make it go.\\nWith profiles and window arrangements, you don\\u2019t have to worry about any of that.\\nThere\\u2019s a quick video walk through below if you get lost on any of these steps.\\nA profile enables you to open a new command line window in a certain directory and run commands automatically. Let\\u2019s make one!\\nFirst, close all open command line windows in iTerm, and start with a new command line window. Next, you\\u2019ll want to navigate to \\u201CProfiles\\u201D in the Menubar and click \\u201COpen Profiles\\u2026\\u201D\"), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"https://res.cloudinary.com/calderablog/image/upload/q_auto:good/v1564962202/iterm-save-profiles_hgowgv.png\",\n    \"alt\": \"save profiles\"\n  }))), mdx(\"p\", null, \"Now click \\u201CEdit Profiles\\u2026\\u201D which should bring you here:\"), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"https://res.cloudinary.com/calderablog/image/upload/q_auto:good/v1564962202/iterm-edit-profiles_d7t6xq.png\",\n    \"alt\": \"edit iterm profiles\"\n  }))), mdx(\"p\", null, \"Gamebyrd and Mongod are some profiles I made so don\\u2019t worry if you don\\u2019t see them\"), mdx(\"p\", null, \"Click the + sign at the bottom left side to create a new profile. Make sure to give it a name and update the directory to be the the root of your project.\"), mdx(\"p\", null, \"If you want to run commands when this profile is opened, add them in the \\u201CSend text at start:\\u201D field. One of my favorite recipes is to open up the project in my code editor and build it for development.\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-sh\"\n  }), \"# Separate commands with a semi-colon\\natom .; preact watch\\n\")), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"https://res.cloudinary.com/calderablog/image/upload/q_auto:good/v1564962202/iterm-edit-profiles-2_do5uaf.png\",\n    \"alt\": \"edit iterm profiles\"\n  }))), mdx(\"p\", null, \"Exiting out of the window will save your changes (there\\u2019s no button to do this).\"), mdx(\"p\", null, \"Next up, we need to test it out. Click on \\u201CProfiles\\u201D in the Menubar and select the profile you made to make sure it works. If you run into any issues, make sure your directory path is correct and that your commands are separated correctly.\"), mdx(\"p\", null, \"Once all that works, it\\u2019s time to create a window arrangement to easily launch the newly made profile. Make sure you don\\u2019t have any lingering terminal windows open when you do this step or they\\u2019ll be saved as part of the arrangement.\"), mdx(\"p\", null, \"In a new terminal window, click on the profile you just made. If it opens in a new tab make sure to close the \\u201CDefault\\u201D tab. Navigate to the \\u201CWindow\\u201D tab in the Menubar and select \\u201CSave Window Arrangement.\\u201D Give it a name and click ok. You\\u2019re good to go!\"), mdx(\"p\", null, \"Now all of your terminal windows will be named. They\\u2019ll automatically remember the commands you need to start each project.\"), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"https://res.cloudinary.com/calderablog/image/upload/q_auto:good/v1564962202/iterm-named-terminals_bu3raw.png\",\n    \"alt\": \"named iterm terminals\"\n  }))), mdx(\"h2\", {\n    \"id\": \"wrapping-things-up\"\n  }, \"Wrapping Things Up\"), mdx(\"p\", null, \"After the first time you do so, you\\u2019ll be able to create new profiles and arrangements with ease. You can also combine multiple profiles into an arrangement, use tabbed terminal windows to run multiple parts of a project, and much more.\"), mdx(\"p\", null, \"Was this helpful? If so, please clap on the story and let me know what else you\\u2019d like to know about my development process or tips on mastering the command line.\"));\n}\n;\nMDXContent.isMDXComponent = true;","hero":{"full":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAJABQDASIAAhEBAxEB/8QAGQAAAQUAAAAAAAAAAAAAAAAAAAEDBAUG/8QAFQEBAQAAAAAAAAAAAAAAAAAAAAH/2gAMAwEAAhADEAAAAWRLyIpnCv/EABoQAAIDAQEAAAAAAAAAAAAAAAECAxEyBEL/2gAIAQEAAQUCe3kUPc/UInGvL7//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/AT//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/AT//xAAcEAACAgIDAAAAAAAAAAAAAAAAAQIREiFhcYH/2gAIAQEABj8Ci41S5KdvZjpkezwZ/8QAHBAAAgICAwAAAAAAAAAAAAAAAAERITFhQaHw/9oACAEBAAE/IYnNpIYVSlkpcEL0K7wefSOY7h//2gAMAwEAAgADAAAAED8P/8QAFREBAQAAAAAAAAAAAAAAAAAAEBH/2gAIAQMBAT8Qh//EABURAQEAAAAAAAAAAAAAAAAAABEQ/9oACAECAQE/EFn/xAAfEAEAAgEDBQAAAAAAAAAAAAABABEhEJGhQWFxscH/2gAIAQEAAT8QLyxMlTrV/JedyUNmzPi94MNxbq1nDXat5y0Dl+tO/9k=","aspectRatio":2.2264150943396226,"src":"/static/b31e8063c018ffde4fa3c15d4e3eb348/22328/hero.jpg","srcSet":"/static/b31e8063c018ffde4fa3c15d4e3eb348/6d250/hero.jpg 236w,\n/static/b31e8063c018ffde4fa3c15d4e3eb348/1a26c/hero.jpg 472w,\n/static/b31e8063c018ffde4fa3c15d4e3eb348/22328/hero.jpg 944w,\n/static/b31e8063c018ffde4fa3c15d4e3eb348/d0da8/hero.jpg 1416w,\n/static/b31e8063c018ffde4fa3c15d4e3eb348/1efb0/hero.jpg 1800w","srcWebp":"/static/b31e8063c018ffde4fa3c15d4e3eb348/1d644/hero.webp","srcSetWebp":"/static/b31e8063c018ffde4fa3c15d4e3eb348/cbe96/hero.webp 236w,\n/static/b31e8063c018ffde4fa3c15d4e3eb348/8ab83/hero.webp 472w,\n/static/b31e8063c018ffde4fa3c15d4e3eb348/1d644/hero.webp 944w,\n/static/b31e8063c018ffde4fa3c15d4e3eb348/e5141/hero.webp 1416w,\n/static/b31e8063c018ffde4fa3c15d4e3eb348/27336/hero.webp 1800w","sizes":"(max-width: 944px) 100vw, 944px"}},"regular":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAIEBQb/xAAVAQEBAAAAAAAAAAAAAAAAAAAAAf/aAAwDAQACEAMQAAABRpCRYmTK/8QAGRABAQEAAwAAAAAAAAAAAAAAAgMBABET/9oACAEBAAEFAnXZv3ouOxnol1t9Mso1R//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8BP//EABwQAAICAgMAAAAAAAAAAAAAAAECABESITEyUf/aAAgBAQAGPwJFU0somtym5nYwEICT7MmO5//EABoQAAMBAAMAAAAAAAAAAAAAAAABESExYXH/2gAIAQEAAT8hZvRjUopLHSUVGulcRB98Gt750PFQ/9oADAMBAAIAAwAAABCvD//EABURAQEAAAAAAAAAAAAAAAAAABAR/9oACAEDAQE/EIf/xAAVEQEBAAAAAAAAAAAAAAAAAAABEP/aAAgBAgEBPxBZ/8QAHhABAAICAgMBAAAAAAAAAAAAAQARITFBYVFxgcH/2gAIAQEAAT8QFt6TReIyUPrLxvrPyD9B2Csn4x0UCFFV9LySvDWvBOe4slqL0B4Dgn//2Q==","aspectRatio":1.4954128440366972,"src":"/static/b31e8063c018ffde4fa3c15d4e3eb348/6694a/hero.jpg","srcSet":"/static/b31e8063c018ffde4fa3c15d4e3eb348/70b8f/hero.jpg 163w,\n/static/b31e8063c018ffde4fa3c15d4e3eb348/7ec88/hero.jpg 327w,\n/static/b31e8063c018ffde4fa3c15d4e3eb348/6694a/hero.jpg 653w,\n/static/b31e8063c018ffde4fa3c15d4e3eb348/ed86f/hero.jpg 980w,\n/static/b31e8063c018ffde4fa3c15d4e3eb348/52c17/hero.jpg 1306w,\n/static/b31e8063c018ffde4fa3c15d4e3eb348/8d3de/hero.jpg 1800w","srcWebp":"/static/b31e8063c018ffde4fa3c15d4e3eb348/d603c/hero.webp","srcSetWebp":"/static/b31e8063c018ffde4fa3c15d4e3eb348/64a97/hero.webp 163w,\n/static/b31e8063c018ffde4fa3c15d4e3eb348/a98ca/hero.webp 327w,\n/static/b31e8063c018ffde4fa3c15d4e3eb348/d603c/hero.webp 653w,\n/static/b31e8063c018ffde4fa3c15d4e3eb348/c1bd6/hero.webp 980w,\n/static/b31e8063c018ffde4fa3c15d4e3eb348/89ac0/hero.webp 1306w,\n/static/b31e8063c018ffde4fa3c15d4e3eb348/44939/hero.webp 1800w","sizes":"(max-width: 653px) 100vw, 653px"}},"narrow":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAIEBQb/xAAVAQEBAAAAAAAAAAAAAAAAAAAAAf/aAAwDAQACEAMQAAABRpCRYmTK/8QAGRABAQEAAwAAAAAAAAAAAAAAAgMBABET/9oACAEBAAEFAnXZv3ouOxnol1t9Mso1R//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8BP//EABwQAAICAgMAAAAAAAAAAAAAAAECABESITEyUf/aAAgBAQAGPwJFU0somtym5nYwEICT7MmO5//EABoQAAMBAAMAAAAAAAAAAAAAAAABESExYXH/2gAIAQEAAT8hZvRjUopLHSUVGulcRB98Gt750PFQ/9oADAMBAAIAAwAAABCvD//EABURAQEAAAAAAAAAAAAAAAAAABAR/9oACAEDAQE/EIf/xAAVEQEBAAAAAAAAAAAAAAAAAAABEP/aAAgBAgEBPxBZ/8QAHhABAAICAgMBAAAAAAAAAAAAAQARITFBYVFxgcH/2gAIAQEAAT8QFt6TReIyUPrLxvrPyD9B2Csn4x0UCFFV9LySvDWvBOe4slqL0B4Dgn//2Q==","aspectRatio":1.5,"src":"/static/b31e8063c018ffde4fa3c15d4e3eb348/c1e08/hero.jpg","srcSet":"/static/b31e8063c018ffde4fa3c15d4e3eb348/8bed6/hero.jpg 114w,\n/static/b31e8063c018ffde4fa3c15d4e3eb348/1e283/hero.jpg 229w,\n/static/b31e8063c018ffde4fa3c15d4e3eb348/c1e08/hero.jpg 457w,\n/static/b31e8063c018ffde4fa3c15d4e3eb348/8ae28/hero.jpg 686w,\n/static/b31e8063c018ffde4fa3c15d4e3eb348/5cf51/hero.jpg 914w,\n/static/b31e8063c018ffde4fa3c15d4e3eb348/8d3de/hero.jpg 1800w","srcWebp":"/static/b31e8063c018ffde4fa3c15d4e3eb348/72aed/hero.webp","srcSetWebp":"/static/b31e8063c018ffde4fa3c15d4e3eb348/03a0a/hero.webp 114w,\n/static/b31e8063c018ffde4fa3c15d4e3eb348/d2b1d/hero.webp 229w,\n/static/b31e8063c018ffde4fa3c15d4e3eb348/72aed/hero.webp 457w,\n/static/b31e8063c018ffde4fa3c15d4e3eb348/1a85c/hero.webp 686w,\n/static/b31e8063c018ffde4fa3c15d4e3eb348/90a86/hero.webp 914w,\n/static/b31e8063c018ffde4fa3c15d4e3eb348/44939/hero.webp 1800w","sizes":"(max-width: 457px) 100vw, 457px"}},"seo":{"fixed":{"src":"/static/b31e8063c018ffde4fa3c15d4e3eb348/0ff54/hero.jpg"}}}}}]}}}