~wuz/wuz.sh

ref: c94543aa4ef4b2dacae576921acce9bf8a217528 wuz.sh/articles.json -rw-r--r-- 627.0 KiB
c94543aa — Conlin Durbin fix mobile 1 year, 1 month ago
                                                                                
1
[{"title":"Introducing do...while","slug":"introduction-dowhile-3kbc","created_at":"2018-06-12T03:03:34.219Z","main_image":null,"description":"a weekly new Javascript livecast","published":true,"published_at":"2018-06-12T03:03:34.208Z","processed_html":"\u003cp\u003eHello friends!\u003cbr\u003e\nRecently I have been looking for a way to bring together a community around topics like Javascript, getting hired as a frontend developer, and navigating your way through an ever-changing professional landscape. \u003c/p\u003e\n\n\u003cp\u003eWith this in mind, I am introducing \"do...while\" - a weekly hangout/livestream discussing Javascript, Frontend Engineering, and more! \u003c/p\u003e\n\n\u003cp\u003e\u003ca href=\"https://res.cloudinary.com/practicaldev/image/fetch/s--d7e-3kgt--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/ps18ik1t6475fg98qha1.png\" class=\"article-body-image-wrapper\"\u003e\u003cimg src=\"https://res.cloudinary.com/practicaldev/image/fetch/s--d7e-3kgt--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/ps18ik1t6475fg98qha1.png\" alt=\"do while stream\" loading=\"lazy\"\u003e\u003c/a\u003e\u003c/p\u003e\n\n\u003cp\u003eJoin us every Tuesday at 6:15 EST on Twitch or at \u003ca href=\"https://dowhile.stream\"\u003ehttps://dowhile.stream\u003c/a\u003e. Come with questions and answers! We'll work on a coding project, talk about a topic, and have some fun!\u003c/p\u003e\n\n\u003cp\u003eYou can check out prior streams \u003ca href=\"https://www.youtube.com/channel/UC_u19v9pPheVbjcAH1Psm7w\"\u003ehere\u003c/a\u003e and follow the stream on \u003ca href=\"https://www.twitch.tv/dowhilestream\"\u003eTwitch\u003c/a\u003e.\u003c/p\u003e\n\n","social_image":null,"body_markdown":"---\r\ntitle: Introducing do...while\r\npublished: true\r\ndescription: a weekly new Javascript livecast\r\ntags: livecast, learning, Javascript, frontend\r\n---\r\n\r\nHello friends!\r\nRecently I have been looking for a way to bring together a community around topics like Javascript, getting hired as a frontend developer, and navigating your way through an ever-changing professional landscape. \r\n\r\nWith this in mind, I am introducing \"do...while\" - a weekly hangout/livestream discussing Javascript, Frontend Engineering, and more! \r\n\r\n![do while stream](https://thepracticaldev.s3.amazonaws.com/i/ps18ik1t6475fg98qha1.png)\r\n\r\nJoin us every Tuesday at 6:15 EST on Twitch or at https://dowhile.stream. Come with questions and answers! We'll work on a coding project, talk about a topic, and have some fun!\r\n\r\nYou can check out prior streams [here](https://www.youtube.com/channel/UC_u19v9pPheVbjcAH1Psm7w) and follow the stream on [Twitch](https://www.twitch.tv/dowhilestream).\r\n\r\n\r\n\r\n\r\n\r\n\r\n","canonical_url":null,"show_comments":true,"main_image_background_hex_color":"#dddddd","published_from_feed":false,"comments_count":0,"video":null,"video_code":null,"video_source_url":null,"video_thumbnail_url":null,"video_closed_caption_track_url":null,"feed_source_url":null,"edited_at":"2018-06-12T03:17:22.041Z","crossposted_at":null,"language":"en","cached_tag_list":"livecast, learning, javascript, frontend","path":"/wuz/introduction-dowhile-3kbc","cached_user_name":"Conlin Durbin","cached_user_username":"wuz","last_comment_at":"2018-06-12T03:03:34.208Z","public_reactions_count":6},{"title":"The Communal Web","slug":"the-communal-web-1p59","created_at":"2018-09-04T19:10:47.422Z","main_image":null,"description":"\n\n...","published":false,"published_at":"2018-02-04T00:00:00.000Z","processed_html":"\u003c!DOCTYPE html PUBLIC \"-//W3C//DTD HTML 4.0 Transitional//EN\" \"http://www.w3.org/TR/REC-html40/loose.dtd\"\u003e\n\n","social_image":null,"body_markdown":"","canonical_url":null,"show_comments":true,"main_image_background_hex_color":"#dddddd","published_from_feed":true,"comments_count":0,"video":null,"video_code":null,"video_source_url":null,"video_thumbnail_url":null,"video_closed_caption_track_url":null,"feed_source_url":"wuzlog.glitch.me/p/the-communal-web.md","edited_at":"2019-01-11T03:19:18.365Z","crossposted_at":"2019-01-11T03:18:15.554Z","language":null,"cached_tag_list":"","path":"/wuz/the-communal-web-1p59","cached_user_name":"Conlin Durbin","cached_user_username":"wuz","last_comment_at":"2018-02-04T00:00:00.000Z","public_reactions_count":0},{"title":"[Javascript, IMO] The `this` keyword","slug":"javascript-imo-the-this-keyword-4816-temp-slug-2204842","created_at":"2018-11-09T01:45:39.623Z","main_image":null,"description":"Oh, jeez - this is going to get confusing   (See what I did there?)  We're talking about the...","published":false,"published_at":null,"processed_html":"\u003ch1\u003e\n  \u003ca name=\"oh-jeez-raw-this-endraw-is-going-to-get-confusing\" href=\"#oh-jeez-raw-this-endraw-is-going-to-get-confusing\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  Oh, jeez - \u003ccode\u003ethis\u003c/code\u003e is going to get confusing\n\u003c/h1\u003e\n\n\u003cp\u003e(See what I did there?)\u003c/p\u003e\n\n\u003cp\u003eWe're talking about the \u003ccode\u003ethis\u003c/code\u003e keyword, and it's going to be very confusing. To keep the terms straight, when talking about the keyword I will be using \u003ccode\u003ethis\u003c/code\u003e, in the monospaced, \u003ccode\u003ecode\u003c/code\u003e style. Any other time, the word will just be used like normal. Hopefully, this will help us keep \u003ccode\u003ethis\u003c/code\u003e straight. Alright, everyone good? Let's jump on in!\u003c/p\u003e\n\n\u003ch2\u003e\n  \u003ca name=\"what-is-raw-this-endraw-\" href=\"#what-is-raw-this-endraw-\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  What is \u003ccode\u003ethis\u003c/code\u003e?\n\u003c/h2\u003e\n\n\u003cp\u003eThe \u003ccode\u003ethis\u003c/code\u003e keyword is one of the most difficult parts of Javascript. It allows you to access the to the current context. Outside of a function, \u003ccode\u003ethis\u003c/code\u003e refers to the global scope. Inside a function, the \u003ccode\u003ethis\u003c/code\u003e keyword can refer to many different things. By default, a global function will have a \u003ccode\u003ethis\u003c/code\u003e keyword equal to the window function. By default in strict mode, the \u003ccode\u003ethis\u003c/code\u003e keyword will be undefined when called a global function.\u003cbr\u003e\n\u003c/p\u003e\n\n\u003cdiv class=\"highlight\"\u003e\u003cpre class=\"highlight javascript\"\u003e\u003ccode\u003e\u003cspan class=\"nx\"\u003econsole\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003elog\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"k\"\u003ethis\u003c/span\u003e \u003cspan class=\"o\"\u003e===\u003c/span\u003e \u003cspan class=\"nb\"\u003ewindow\u003c/span\u003e\u003cspan class=\"p\"\u003e);\u003c/span\u003e \u003cspan class=\"c1\"\u003e// true\u003c/span\u003e\n\n\u003cspan class=\"c1\"\u003e// strict mode\u003c/span\u003e\n\u003cspan class=\"nx\"\u003econsole\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003elog\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"k\"\u003ethis\u003c/span\u003e \u003cspan class=\"o\"\u003e===\u003c/span\u003e \u003cspan class=\"kc\"\u003eundefined\u003c/span\u003e\u003cspan class=\"p\"\u003e);\u003c/span\u003e \u003cspan class=\"c1\"\u003e// true\u003c/span\u003e\n\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\n\n\n\n\u003cp\u003eAlso by default, a functions this binding is that of the scope above it.\u003cbr\u003e\n\u003c/p\u003e\n\n\u003cdiv class=\"highlight\"\u003e\u003cpre class=\"highlight javascript\"\u003e\u003ccode\u003e\u003cspan class=\"kd\"\u003efunction\u003c/span\u003e \u003cspan class=\"nx\"\u003ef1\u003c/span\u003e\u003cspan class=\"p\"\u003e()\u003c/span\u003e \u003cspan class=\"p\"\u003e{\u003c/span\u003e\n    \u003cspan class=\"k\"\u003ereturn\u003c/span\u003e \u003cspan class=\"k\"\u003ethis\u003c/span\u003e\u003cspan class=\"p\"\u003e;\u003c/span\u003e\n\u003cspan class=\"p\"\u003e}\u003c/span\u003e\n\n\u003cspan class=\"nx\"\u003econsole\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003elog\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"nx\"\u003ef1\u003c/span\u003e\u003cspan class=\"p\"\u003e()\u003c/span\u003e \u003cspan class=\"o\"\u003e===\u003c/span\u003e \u003cspan class=\"nb\"\u003ewindow\u003c/span\u003e\u003cspan class=\"p\"\u003e);\u003c/span\u003e \u003cspan class=\"c1\"\u003e// true\u003c/span\u003e\n\n\u003cspan class=\"kd\"\u003efunction\u003c/span\u003e \u003cspan class=\"nx\"\u003ef1\u003c/span\u003e\u003cspan class=\"p\"\u003e()\u003c/span\u003e \u003cspan class=\"p\"\u003e{\u003c/span\u003e\n    \u003cspan class=\"dl\"\u003e'\u003c/span\u003e\u003cspan class=\"s1\"\u003euse strict\u003c/span\u003e\u003cspan class=\"dl\"\u003e'\u003c/span\u003e\u003cspan class=\"p\"\u003e;\u003c/span\u003e\n    \u003cspan class=\"k\"\u003ereturn\u003c/span\u003e \u003cspan class=\"k\"\u003ethis\u003c/span\u003e\u003cspan class=\"p\"\u003e;\u003c/span\u003e\n\u003cspan class=\"p\"\u003e}\u003c/span\u003e\n\n\u003cspan class=\"nx\"\u003econsole\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003elog\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"nx\"\u003ef1\u003c/span\u003e\u003cspan class=\"p\"\u003e()\u003c/span\u003e \u003cspan class=\"o\"\u003e===\u003c/span\u003e \u003cspan class=\"kc\"\u003eundefined\u003c/span\u003e\u003cspan class=\"p\"\u003e);\u003c/span\u003e \u003cspan class=\"c1\"\u003e// true\u003c/span\u003e\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\n\n\n\n\u003cp\u003eSo now we know what \u003ccode\u003ethis\u003c/code\u003e is by default. \u003c/p\u003e\n\n\u003ch2\u003e\n  \u003ca name=\"how-does-this-change\" href=\"#how-does-this-change\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  How does \"this\" change?\n\u003c/h2\u003e\n\n\u003cp\u003eThere are many functions that can change the binding of \u003ccode\u003ethis\u003c/code\u003e in Javascript. Using the \u003ccode\u003e.call\u003c/code\u003e, \u003ccode\u003e.apply\u003c/code\u003e and \u003ccode\u003e.bind\u003c/code\u003e methods on a function, you can change the \u003ccode\u003ethis\u003c/code\u003e of a function to almost anything.\u003c/p\u003e\n\n\u003ch2\u003e\n  \u003ca name=\"when-to-use-this\" href=\"#when-to-use-this\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  When to use \"this\"?\n\u003c/h2\u003e\n\n","social_image":null,"body_markdown":"---\r\ntitle: [Javascript, IMO] The `this` keyword\r\npublished: false\r\ndescription: \r\ntags: \r\n---\r\n\r\n# Oh, jeez - `this` is going to get confusing\r\n\r\n(See what I did there?)\r\n\r\nWe're talking about the `this` keyword, and it's going to be very confusing. To keep the terms straight, when talking about the keyword I will be using `this`, in the monospaced, `code` style. Any other time, the word will just be used like normal. Hopefully, this will help us keep `this` straight. Alright, everyone good? Let's jump on in!\r\n\r\n## What is `this`?\r\n\r\nThe `this` keyword is one of the most difficult parts of Javascript. It allows you to access the to the current context. Outside of a function, `this` refers to the global scope. Inside a function, the `this` keyword can refer to many different things. By default, a global function will have a `this` keyword equal to the window function. By default in strict mode, the `this` keyword will be undefined when called a global function.\r\n\r\n```js\r\nconsole.log(this === window); // true\r\n\r\n// strict mode\r\nconsole.log(this === undefined); // true\r\n\r\n```\r\n\r\nAlso by default, a functions this binding is that of the scope above it.\r\n```js\r\nfunction f1() {\r\n    return this;\r\n}\r\n\r\nconsole.log(f1() === window); // true\r\n\r\nfunction f1() {\r\n    'use strict';\r\n    return this;\r\n}\r\n\r\nconsole.log(f1() === undefined); // true\r\n```\r\n\r\nSo now we know what `this` is by default. \r\n\r\n## How does \"this\" change?\r\n\r\nThere are many functions that can change the binding of `this` in Javascript. Using the `.call`, `.apply` and `.bind` methods on a function, you can change the `this` of a function to almost anything.\r\n\r\n## When to use \"this\"?","canonical_url":null,"show_comments":true,"main_image_background_hex_color":"#dddddd","published_from_feed":false,"comments_count":0,"video":null,"video_code":null,"video_source_url":null,"video_thumbnail_url":null,"video_closed_caption_track_url":null,"feed_source_url":null,"edited_at":null,"crossposted_at":null,"language":null,"cached_tag_list":"","path":"/wuz/javascript-imo-the-this-keyword-4816-temp-slug-2204842","cached_user_name":"Conlin Durbin","cached_user_username":"wuz","last_comment_at":"2017-01-01T05:00:00.000Z","public_reactions_count":0},{"title":"What's one thing you want to know more about?","slug":"whats-one-thing-you-want-to-know-more-about-49f1","created_at":"2018-11-09T18:54:37.335Z","main_image":null,"description":"Quick question about future learning","published":true,"published_at":"2018-11-09T18:54:37.310Z","processed_html":"\u003cp\u003eHey DEV-ers, what is one thing you want to learn more about? It can be related to anything - tech, career, hobbies, health - whatever. I just want to know what you'd like to know more about.\u003c/p\u003e\n\n","social_image":null,"body_markdown":"---\r\ntitle: What's one thing you want to know more about?\r\npublished: true\r\ndescription: Quick question about future learning\r\ntags: discuss\r\n---\r\n\r\nHey DEV-ers, what is one thing you want to learn more about? It can be related to anything - tech, career, hobbies, health - whatever. I just want to know what you'd like to know more about.","canonical_url":null,"show_comments":true,"main_image_background_hex_color":"#dddddd","published_from_feed":false,"comments_count":0,"video":null,"video_code":null,"video_source_url":null,"video_thumbnail_url":null,"video_closed_caption_track_url":null,"feed_source_url":null,"edited_at":null,"crossposted_at":null,"language":"en","cached_tag_list":"discuss","path":"/wuz/whats-one-thing-you-want-to-know-more-about-49f1","cached_user_name":"Conlin Durbin","cached_user_username":"wuz","last_comment_at":"2018-11-09T18:54:37.310Z","public_reactions_count":3},{"title":"What dev topic do you think you should understand, but don't?","slug":"what-dev-topic-do-you-think-you-should-understand-but-dont-55hm","created_at":"2018-11-16T15:33:29.558Z","main_image":null,"description":"An all-too-common experience","published":true,"published_at":"2018-11-16T15:34:39.457Z","processed_html":"\u003ch2\u003e\n  \u003ca name=\"happy-friday-devto\" href=\"#happy-friday-devto\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  Happy Friday, dev.to\n\u003c/h2\u003e\n\n\u003cp\u003eLet's get introspective.\u003c/p\u003e\n\n\u003cp\u003e\u003ca href=\"https://res.cloudinary.com/practicaldev/image/fetch/s--eCoyliX7--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://i.kym-cdn.com/photos/images/newsfeed/000/853/556/29e.gif\" class=\"article-body-image-wrapper\"\u003e\u003cimg src=\"https://res.cloudinary.com/practicaldev/image/fetch/s--eCoyliX7--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://i.kym-cdn.com/photos/images/newsfeed/000/853/556/29e.gif\" alt='\"Too afraid to ask\" meme' loading=\"lazy\"\u003e\u003c/a\u003e\u003c/p\u003e\n\n\u003cp\u003eWe all know this situation: Someone is discussing a tech topic and, suddenly, \u003cem\u003ebam!\u003c/em\u003e, they bring up monads or prototypical inheritance. Usually, we are just left there nodding along, hoping we get some time to Google that thing later. \u003c/p\u003e\n\n\u003cp\u003eI'd like to know what dev-related topics you don't understand, but are too afraid to ask about. Maybe we can all learn something!\u003c/p\u003e\n\n\u003cp\u003e\u003cstrong\u003eNOTE: If you don't want to post them here, shoot me a \u003ca href=\"https://twitter.com/callmewuz\"\u003eDM on Twitter\u003c/a\u003e! I'll anonymize and post back here!\u003c/strong\u003e\u003c/p\u003e\n\n\u003cp\u003eI'll start this out! I don't understand the concept of monads. It's made worse by the fact that I feel like I \u003cem\u003ealmost\u003c/em\u003e understand monads. Anyone want to try and tackle explaining them to me (or linking to somewhere that does), I would really appreciate it!\u003c/p\u003e\n\n\u003cp\u003e\u003ca href=\"https://i.giphy.com/media/3o7qDFqyTXbUKr8COs/giphy.gif\" class=\"article-body-image-wrapper\"\u003e\u003cimg src=\"https://i.giphy.com/media/3o7qDFqyTXbUKr8COs/giphy.gif\" alt=\"happy tortoise, eating pancakes\" loading=\"lazy\"\u003e\u003c/a\u003e\u003c/p\u003e\n\n","social_image":"https://cl.ly/589588f92952/download/Image%202018-11-16%20at%2011.16.44%20AM.png","body_markdown":"---\r\ntitle: What dev topic do you think you should understand, but don't?\r\npublished: true\r\ndescription: An all-too-common experience\r\ntags: career, beginners, discuss\r\n---\r\n\r\n## Happy Friday, dev.to\r\n\r\nLet's get introspective.\r\n\r\n![\"Too afraid to ask\" meme](https://i.kym-cdn.com/photos/images/newsfeed/000/853/556/29e.gif)\r\n\r\nWe all know this situation: Someone is discussing a tech topic and, suddenly, *bam!*, they bring up monads or prototypical inheritance. Usually, we are just left there nodding along, hoping we get some time to Google that thing later. \r\n\r\nI'd like to know what dev-related topics you don't understand, but are too afraid to ask about. Maybe we can all learn something!\r\n\r\n**NOTE: If you don't want to post them here, shoot me a [DM on Twitter](https://twitter.com/callmewuz)! I'll anonymize and post back here!**\r\n\r\nI'll start this out! I don't understand the concept of monads. It's made worse by the fact that I feel like I _almost_ understand monads. Anyone want to try and tackle explaining them to me (or linking to somewhere that does), I would really appreciate it!\r\n\r\n![happy tortoise, eating pancakes](https://media.giphy.com/media/3o7qDFqyTXbUKr8COs/giphy.gif)\r\n\r\n ","canonical_url":null,"show_comments":true,"main_image_background_hex_color":"#dddddd","published_from_feed":false,"comments_count":84,"video":null,"video_code":null,"video_source_url":null,"video_thumbnail_url":null,"video_closed_caption_track_url":null,"feed_source_url":null,"edited_at":null,"crossposted_at":null,"language":"en","cached_tag_list":"career, beginners, discuss","path":"/wuz/what-dev-topic-do-you-think-you-should-understand-but-dont-55hm","cached_user_name":"Conlin Durbin","cached_user_username":"wuz","last_comment_at":"2020-04-24T14:38:30.900Z","public_reactions_count":89},{"title":"Leave Loudly this holiday! ","slug":"leave-loudly-this-holiday--33l7","created_at":"2018-11-19T21:11:43.842Z","main_image":null,"description":"This holiday break is a good time to remember to leave loudly","published":true,"published_at":"2018-11-19T21:11:43.826Z","processed_html":"\u003cp\u003e\u003ca href=\"https://i.giphy.com/media/WFsGRpN7EekEt6ULha/giphy.gif\" class=\"article-body-image-wrapper\"\u003e\u003cimg src=\"https://i.giphy.com/media/WFsGRpN7EekEt6ULha/giphy.gif\" alt=\"man eating popcorn in the stands\" loading=\"lazy\"\u003e\u003c/a\u003e\u003c/p\u003e\n\n\u003cp\u003eHey folks!\u003c/p\u003e\n\n\u003cp\u003eWith the holiday season coming around for many DEV-ers, let's all remember to Leave Loudly!\u003c/p\u003e\n\n\u003ch2\u003e\n  \u003ca name=\"what-does-this-mean\" href=\"#what-does-this-mean\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  What does this mean?\n\u003c/h2\u003e\n\n\u003cp\u003e\u003ca href=\"https://www.news.com.au/finance/work/leaders/why-pepsico-ceo-asks-his-team-to-leave-loudly/news-story/5467b3ffff387c3a5dd79ac3a245c868\"\u003eLeaving loudly was originally developed by the CEO of Pepsi\u003c/a\u003e as a way to spread a culture of acceptance to working good hours. He encouraged executive to tell everyone when they were leaving the office - and the reason they were leaving. This helped normalize a culture of taking care of yourself and your family.\u003c/p\u003e\n\n\u003cp\u003eIt means when you leave the office, be sure you are actually leaving - and make sure other people know too. It also means reducing the amount of work you are doing outside of work. Pepsi encourages sending only required emails out of work hours and on weekends.\u003c/p\u003e\n\n\u003ch2\u003e\n  \u003ca name=\"what-this-means-for-us-developers\" href=\"#what-this-means-for-us-developers\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  What this means for us developers?\n\u003c/h2\u003e\n\n\u003cp\u003eThere are a lot of times we as developers have a tendency to work long hours or to work on \"vacations\" - often under the guise of \"I just need to fix this one bug\" or \"If I don't fix this, everyone will be upset with me.\" Often times one more bug leads to another and there is someone else available to fix the things that need fixed. \u003c/p\u003e\n\n\u003cp\u003eIt means the more senior developers should spend time promoting a culture of going home, of spending time with family and friends, and of taking care of themselves. This will trickle to more junior developers and others. \u003c/p\u003e\n\n\u003ch2\u003e\n  \u003ca name=\"this-holiday\" href=\"#this-holiday\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  This holiday\n\u003c/h2\u003e\n\n\u003cp\u003eThere are lots of vacation days coming up soon for many of us! I encourage you to \"sign off\" everyday at the office - make a quick slack post about where you are going, when you will be back in office (this helps people plan around your time), and what you are going to do during the break! Then, shut down your computer, actually leave, and don't sign on during your vacation (unless absolutely required).\u003c/p\u003e\n\n\u003cp\u003eI'll be leaving loudly tomorrow and taking an extra day on Wednesday to take care of myself and some other obligations. Then I'll be out until next Monday, ready for a new week (and probably a few mashed potatoes heavier)!\u003c/p\u003e\n\n\u003cp\u003eCheers, friends! Have a good one!\u003c/p\u003e\n\n","social_image":null,"body_markdown":"---\r\ntitle: Leave Loudly this holiday! \r\npublished: true\r\ndescription: This holiday break is a good time to remember to leave loudly\r\ntags: career, self-care, culture\r\n---\r\n\r\n![man eating popcorn in the stands](https://media.giphy.com/media/WFsGRpN7EekEt6ULha/giphy.gif)\r\n\r\nHey folks!\r\n\r\nWith the holiday season coming around for many DEV-ers, let's all remember to Leave Loudly!\r\n\r\n## What does this mean?\r\n\r\n[Leaving loudly was originally developed by the CEO of Pepsi](https://www.news.com.au/finance/work/leaders/why-pepsico-ceo-asks-his-team-to-leave-loudly/news-story/5467b3ffff387c3a5dd79ac3a245c868) as a way to spread a culture of acceptance to working good hours. He encouraged executive to tell everyone when they were leaving the office - and the reason they were leaving. This helped normalize a culture of taking care of yourself and your family.\r\n\r\nIt means when you leave the office, be sure you are actually leaving - and make sure other people know too. It also means reducing the amount of work you are doing outside of work. Pepsi encourages sending only required emails out of work hours and on weekends.\r\n\r\n## What this means for us developers?\r\n\r\nThere are a lot of times we as developers have a tendency to work long hours or to work on \"vacations\" - often under the guise of \"I just need to fix this one bug\" or \"If I don't fix this, everyone will be upset with me.\" Often times one more bug leads to another and there is someone else available to fix the things that need fixed. \r\n\r\nIt means the more senior developers should spend time promoting a culture of going home, of spending time with family and friends, and of taking care of themselves. This will trickle to more junior developers and others. \r\n\r\n## This holiday\r\n\r\nThere are lots of vacation days coming up soon for many of us! I encourage you to \"sign off\" everyday at the office - make a quick slack post about where you are going, when you will be back in office (this helps people plan around your time), and what you are going to do during the break! Then, shut down your computer, actually leave, and don't sign on during your vacation (unless absolutely required).\r\n\r\nI'll be leaving loudly tomorrow and taking an extra day on Wednesday to take care of myself and some other obligations. Then I'll be out until next Monday, ready for a new week (and probably a few mashed potatoes heavier)!\r\n\r\nCheers, friends! Have a good one!\r\n","canonical_url":null,"show_comments":true,"main_image_background_hex_color":"#dddddd","published_from_feed":false,"comments_count":3,"video":null,"video_code":null,"video_source_url":null,"video_thumbnail_url":null,"video_closed_caption_track_url":null,"feed_source_url":null,"edited_at":null,"crossposted_at":null,"language":"en","cached_tag_list":"career, selfcare, culture","path":"/wuz/leave-loudly-this-holiday--33l7","cached_user_name":"Conlin Durbin","cached_user_username":"wuz","last_comment_at":"2018-11-21T16:29:31.210Z","public_reactions_count":20},{"title":"Stop trying to be so DRY, instead Write Everything Twice (WET)","slug":"stop-trying-to-be-so-dry-instead-write-everything-twice-wet-5g33","created_at":"2018-11-26T04:08:02.378Z","main_image":"https://thepracticaldev.s3.amazonaws.com/i/vmlpyk5wgzw1b85g4j1f.jpg","description":"Write everything twice, just not a third time.","published":true,"published_at":"2018-12-18T22:29:16.794Z","processed_html":"\u003cp\u003eAs developers, we often hear cliched phrases tossed around like \u003ca href=\"https://en.wikipedia.org/wiki/Don%27t_repeat_yourself\"\u003e\"Don't Repeat Yourself\"\u003c/a\u003e. We take ideas like this and run with them, sometimes a bit too far.\u003c/p\u003e\n\n\u003cp\u003eStepping back and evaluating why we do these things is helpful. So today, let's look at an alternative ideology to DRY programming.\u003c/p\u003e\n\n\u003ch1\u003e\n  \u003ca name=\"dont-repeat-yourself-dry-programming-defined\" href=\"#dont-repeat-yourself-dry-programming-defined\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  Don't Repeat Yourself (DRY) programming, defined\n\u003c/h1\u003e\n\n\u003cp\u003eDRY is defined (according to Wikipedia) as:\u003c/p\u003e\n\n\u003cblockquote\u003e\n\u003cp\u003eEvery piece of knowledge must have a single, unambiguous, authoritative representation within a system.\u003c/p\u003e\n\u003c/blockquote\u003e\n\n\u003cp\u003eSome of this might get a bit pedantic, but that can be helpful when considering something like this. Let's break down the parts of the phrasing there.\u003c/p\u003e\n\n\u003ch2\u003e\n  \u003ca name=\"every-piece\" href=\"#every-piece\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  Every piece\n\u003c/h2\u003e\n\n\u003cp\u003eWhat is \"every piece\"? Can we never repeat a variable name? An HTML entity?\u003c/p\u003e\n\n\u003cp\u003eOk, ok. So we can repeat \u003ccode\u003e\u0026lt;div\u0026gt;\u003c/code\u003e's without much issue and I don't think anyone will take offense at it. But this does bring up the question - when do we decide something has become a \"piece of knowledge\"? In React, a good example might be a component - but is that \u003ccode\u003ePrimaryButton\u003c/code\u003e and \u003ccode\u003eSecondaryButton\u003c/code\u003e or does it mean a generalized \u003ccode\u003eButton\u003c/code\u003e class? The answer is generally considered to be \"Whatever your organization chooses\", but this can still leave a good bit of ambiguity around what we choose to abstract.  \u003c/p\u003e\n\n\u003ch2\u003e\n  \u003ca name=\"knowledge\" href=\"#knowledge\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  knowledge\n\u003c/h2\u003e\n\n\u003cp\u003eThis is another ambiguous point - what do we define as knowledge? Consider a styled button element using some atomic classes and React. If it takes a senior dev 10 seconds to create , they may not consider that knowledge worth abstracting. But to a more junior developer who doesn't know the system well, that knowledge could be a good abstraction. Otherwise, they might have to hunt down the classes, remind themselves of how buttons work, and figure out the syntax for an \u003ccode\u003eonClick\u003c/code\u003e. Knowledge is relative and using it in a definition adds ambiguity.\u003c/p\u003e\n\n\u003cblockquote\u003e\n\u003cp\u003e\u003cem\u003eUpdate:\u003c/em\u003e Xander left the following comment below. I think that article does a great job of explaining what \"knowledge\" should mean.\u003cbr\u003e\n\u003c/p\u003e\n\u003cdiv class=\"liquid-comment\"\u003e\n  \u003cdiv class=\"details\"\u003e\n    \u003ca href=\"/xtrasmal\"\u003e\n      \u003cimg class=\"profile-pic\" src=\"https://res.cloudinary.com/practicaldev/image/fetch/s--GMQ-WHWi--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://res.cloudinary.com/practicaldev/image/fetch/s--QvbkVcY9--/c_fill%2Cf_auto%2Cfl_progressive%2Ch_50%2Cq_auto%2Cw_50/https://dev-to-uploads.s3.amazonaws.com/uploads/user/profile_image/11330/e187db9c-2837-4f92-87e3-ae22ad85e3ef.jpeg\" alt=\"xtrasmal profile image\" loading=\"lazy\"\u003e\n    \u003c/a\u003e\n    \u003ca href=\"/xtrasmal\"\u003e\n      \u003cspan class=\"comment-username\"\u003eXander\u003c/span\u003e\n    \u003c/a\u003e\n      \u003ca href=\"https://twitter.com/xtrasmal\"\u003e\n        \u003cimg src=\"/assets/twitter-logo.svg\" class=\"icon-img\" alt=\"twitter\" loading=\"lazy\"\u003e\n      \u003c/a\u003e\n    \u003cdiv class=\"comment-date\"\u003e\n  \u003ca href=\"/xtrasmal/comment/7jhn\"\u003e\n    \u003ctime datetime=\"2018-12-19T11:46:18Z\"\u003e\n      Dec 19 '18\n    \u003c/time\u003e\n  \u003c/a\u003e\n\u003c/div\u003e\n\n  \u003c/div\u003e\n  \u003cdiv class=\"body\"\u003e\n    \u003cp\u003eJust wanted to leave this here for people who are interested.\u003c/p\u003e\n\n\u003cp\u003e\"DRY is about Knowledge, Code duplication is not the issue.\"\u003cbr\u003e\n\u003ca href=\"http://verraes.net/2014/08/dry-is-about-knowledge/\" rel=\"nofollow\"\u003everraes.net/2014/08/dry-is-about-k...\u003c/a\u003e\u003c/p\u003e\n\n\n  \u003c/div\u003e\n\u003c/div\u003e\n\n\u003c/blockquote\u003e\n\n\u003ch2\u003e\n  \u003ca name=\"single-unambiguous-authoritative-representation\" href=\"#single-unambiguous-authoritative-representation\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  single, unambiguous, authoritative representation\n\u003c/h2\u003e\n\n\u003cp\u003eA \"single\" representation leaves a lot to be desired. From the view of a devops engineer, a single representation might be an entire application they need to deploy. To a frontend dev, that might be a component. And to a backend dev, that might be a method on a class or an API endpoint. Where does the line get drawn?\u003c/p\u003e\n\n\u003cp\u003eWe also have the word \"unambiguous\" - but as I've just pointed out, the rest of this sentence defines more ambiguity. \"Authoritative\" makes sense - your DRY code should define exactly what it does and be true to that definition. However, that isn't explicitly confined to DRY code.\u003c/p\u003e\n\n\u003ch2\u003e\n  \u003ca name=\"system\" href=\"#system\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  system\n\u003c/h2\u003e\n\n\u003cp\u003eFinally, we have the world \"system\" - this gets back to the \"single\" statement we discussed a second ago. What is a \"system\"? In React, it might be a component or a Redux action/component/reducer. In containerized software, we could be talking about a whole pod or just a single instance.\u003c/p\u003e\n\n\u003cp\u003eAt the end of the day, DRY all to often promotes pre-optimization, which is unnecessary and sometimes actually hurts your ability to write code. Sometimes it is more difficult to modify an abstracted component to fit a specific use case. You add a lot of complexity or you break that component out into something new - which isn't super DRY. You can't know every use case for your component on day one.\u003c/p\u003e\n\n\u003ch1\u003e\n  \u003ca name=\"an-alternative-write-everything-twice-wet-programming\" href=\"#an-alternative-write-everything-twice-wet-programming\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  An alternative - Write Everything Twice (WET) programming\n\u003c/h1\u003e\n\n\u003cp\u003eInstead, I propose WET programming. To me the definition would be:\u003c/p\u003e\n\n\u003cblockquote\u003e\n\u003cp\u003eYou can ask yourself \"Haven't I written this before?\" two times, but never three.\u003c/p\u003e\n\u003c/blockquote\u003e\n\n\u003cp\u003eWith this definition the focus moves away from premature optimization and instead allows you to repeat similar code a couple times. It also shifts the focus to a more gut reaction. It allows you to make decisions based on the exact use case you are looking at. If you are building a web app, you probably want to abstract your buttons into a component, because you are going to be using a lot of them. But if there is a single page that has some special styling (maybe a pricing page?), then you don't need to worry too much about abstracting out the components on that page. In fact, under this system, if you needed a new page that was similar to that special page, you could just copy/paste and change the code you need. However, at the moment that that happens a third time, its time to spend a bit of time abstracting out the parts that can be abstracted.\u003c/p\u003e\n\n\u003cp\u003eI would also add this stipulation (to both WET and DRY programming):\u003c/p\u003e\n\n\u003cblockquote\u003e\n\u003cp\u003eYou must comment your abstractions\u003c/p\u003e\n\u003c/blockquote\u003e\n\n\u003cp\u003eAnytime you abstract something out you are reordering the map of your application. If you aren't commenting to discuss your reasons for abstracting, you are doing a disservice to your team (and your future self!).\u003c/p\u003e\n\n\u003cp\u003eWhat do you think? Does this track with how you develop?\u003c/p\u003e\n\n","social_image":"","body_markdown":"---\r\ntitle: Stop trying to be so DRY, instead Write Everything Twice (WET)\r\npublished: true\r\ndescription: Write everything twice, just not a third time.\r\ntags: productivity, paradigms, career, practices\r\ncover_image: https://thepracticaldev.s3.amazonaws.com/i/vmlpyk5wgzw1b85g4j1f.jpg\r\n---\r\n\r\nAs developers, we often hear cliched phrases tossed around like [\"Don't Repeat Yourself\"](https://en.wikipedia.org/wiki/Don%27t_repeat_yourself). We take ideas like this and run with them, sometimes a bit too far.\r\n\r\nStepping back and evaluating why we do these things is helpful. So today, let's look at an alternative ideology to DRY programming.\r\n\r\n# Don't Repeat Yourself (DRY) programming, defined\r\n\r\nDRY is defined (according to Wikipedia) as:\r\n\r\n\u003e Every piece of knowledge must have a single, unambiguous, authoritative representation within a system.\r\n\r\nSome of this might get a bit pedantic, but that can be helpful when considering something like this. Let's break down the parts of the phrasing there.\r\n\r\n## Every piece\r\n\r\nWhat is \"every piece\"? Can we never repeat a variable name? An HTML entity?\r\n\r\nOk, ok. So we can repeat `\u003cdiv\u003e`'s without much issue and I don't think anyone will take offense at it. But this does bring up the question - when do we decide something has become a \"piece of knowledge\"? In React, a good example might be a component - but is that `PrimaryButton` and `SecondaryButton` or does it mean a generalized `Button` class? The answer is generally considered to be \"Whatever your organization chooses\", but this can still leave a good bit of ambiguity around what we choose to abstract.  \r\n\r\n## knowledge\r\n\r\nThis is another ambiguous point - what do we define as knowledge? Consider a styled button element using some atomic classes and React. If it takes a senior dev 10 seconds to create , they may not consider that knowledge worth abstracting. But to a more junior developer who doesn't know the system well, that knowledge could be a good abstraction. Otherwise, they might have to hunt down the classes, remind themselves of how buttons work, and figure out the syntax for an `onClick`. Knowledge is relative and using it in a definition adds ambiguity.\r\n\r\n\u003e *Update:* Xander left the following comment below. I think that article does a great job of explaining what \"knowledge\" should mean.\r\n\u003e {% devcomment 7jhn %}\r\n\r\n## single, unambiguous, authoritative representation\r\n\r\nA \"single\" representation leaves a lot to be desired. From the view of a devops engineer, a single representation might be an entire application they need to deploy. To a frontend dev, that might be a component. And to a backend dev, that might be a method on a class or an API endpoint. Where does the line get drawn?\r\n\r\nWe also have the word \"unambiguous\" - but as I've just pointed out, the rest of this sentence defines more ambiguity. \"Authoritative\" makes sense - your DRY code should define exactly what it does and be true to that definition. However, that isn't explicitly confined to DRY code.\r\n\r\n## system\r\n\r\nFinally, we have the world \"system\" - this gets back to the \"single\" statement we discussed a second ago. What is a \"system\"? In React, it might be a component or a Redux action/component/reducer. In containerized software, we could be talking about a whole pod or just a single instance.\r\n\r\nAt the end of the day, DRY all to often promotes pre-optimization, which is unnecessary and sometimes actually hurts your ability to write code. Sometimes it is more difficult to modify an abstracted component to fit a specific use case. You add a lot of complexity or you break that component out into something new - which isn't super DRY. You can't know every use case for your component on day one.\r\n\r\n# An alternative - Write Everything Twice (WET) programming\r\n\r\nInstead, I propose WET programming. To me the definition would be:\r\n\r\n\u003e You can ask yourself \"Haven't I written this before?\" two times, but never three.\r\n\r\nWith this definition the focus moves away from premature optimization and instead allows you to repeat similar code a couple times. It also shifts the focus to a more gut reaction. It allows you to make decisions based on the exact use case you are looking at. If you are building a web app, you probably want to abstract your buttons into a component, because you are going to be using a lot of them. But if there is a single page that has some special styling (maybe a pricing page?), then you don't need to worry too much about abstracting out the components on that page. In fact, under this system, if you needed a new page that was similar to that special page, you could just copy/paste and change the code you need. However, at the moment that that happens a third time, its time to spend a bit of time abstracting out the parts that can be abstracted.\r\n\r\nI would also add this stipulation (to both WET and DRY programming):\r\n\r\n\u003e You must comment your abstractions\r\n\r\nAnytime you abstract something out you are reordering the map of your application. If you aren't commenting to discuss your reasons for abstracting, you are doing a disservice to your team (and your future self!).\r\n\r\nWhat do you think? Does this track with how you develop?","canonical_url":null,"show_comments":true,"main_image_background_hex_color":"#dddddd","published_from_feed":false,"comments_count":83,"video":null,"video_code":null,"video_source_url":null,"video_thumbnail_url":null,"video_closed_caption_track_url":null,"feed_source_url":null,"edited_at":"2018-12-19T23:20:54.384Z","crossposted_at":null,"language":"en","cached_tag_list":"productivity, paradigms, career, practices","path":"/wuz/stop-trying-to-be-so-dry-instead-write-everything-twice-wet-5g33","cached_user_name":"Conlin Durbin","cached_user_username":"wuz","last_comment_at":"2020-05-02T21:23:03.010Z","public_reactions_count":474},{"title":"Design for Developers by Sarah Drasner starts soon!","slug":"design-for-developers-by-sarah-drasner-starts-soon-54ii","created_at":"2018-11-28T15:30:51.302Z","main_image":null,"description":"Check it out on Frontend Masters","published":true,"published_at":"2018-11-28T15:30:51.290Z","processed_html":"\u003cblockquote class=\"ltag__twitter-tweet\" data-url=\"https://twitter.com/sarah_edo/status/1067796979470819328\"\u003e\n      \u003cdiv class=\"ltag__twitter-tweet__media\"\u003e\n        \u003cimg src=\"https://res.cloudinary.com/practicaldev/image/fetch/s--feakDaUR--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://pbs.twimg.com/media/DtGTsKRUwAAVyNE.jpg\" alt=\"unknown tweet media content\" loading=\"lazy\"\u003e\n      \u003c/div\u003e\n\n  \u003cdiv class=\"ltag__twitter-tweet__main\" data-url=\"https://twitter.com/sarah_edo/status/1067796979470819328\"\u003e\n    \u003cdiv class=\"ltag__twitter-tweet__header\"\u003e\n      \u003cimg class=\"ltag__twitter-tweet__profile-image\" src=\"https://res.cloudinary.com/practicaldev/image/fetch/s--ZDjfDYeo--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://pbs.twimg.com/profile_images/1039352369232789504/M7tgq-c8_normal.jpg\" alt=\"Sarah Drasner profile image\" loading=\"lazy\"\u003e\n      \u003cdiv class=\"ltag__twitter-tweet__full-name\"\u003e\n        Sarah Drasner\n      \u003c/div\u003e\n      \u003cdiv class=\"ltag__twitter-tweet__username\"\u003e\n        \u003ca class=\"comment-mentioned-user\" href=\"https://dev.to/sarah_edo\"\u003e@sarah_edo\u003c/a\u003e\n\n      \u003c/div\u003e\n      \u003cdiv class=\"ltag__twitter-tweet__twitter-logo\"\u003e\n        \u003cimg src=\"https://res.cloudinary.com/practicaldev/image/fetch/s--P4t6ys1m--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://practicaldev-herokuapp-com.freetls.fastly.net/assets/twitter-f95605061196010f91e64806688390eb1a4dbc9e913682e043eb8b1e06ca484f.svg\" alt=\"twitter logo\" loading=\"lazy\"\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"ltag__twitter-tweet__body\"\u003e\n      Good morning! Ready to kick off Design for Developers workshop for \u003ca href=\"https://twitter.com/FrontendMasters\"\u003e@FrontendMasters\u003c/a\u003e pretty soon. It’ll be streaming from the homepage today if you want to tune in. \n    \u003c/div\u003e\n    \u003cdiv class=\"ltag__twitter-tweet__date\"\u003e\n      15:06 PM - 28 Nov 2018\n    \u003c/div\u003e\n\n\n    \u003cdiv class=\"ltag__twitter-tweet__actions\"\u003e\n      \u003ca href=\"https://twitter.com/intent/tweet?in_reply_to=1067796979470819328\" class=\"ltag__twitter-tweet__actions__button\"\u003e\n        \u003cimg src=\"/assets/twitter-reply-action.svg\" alt=\"Twitter reply action\" loading=\"lazy\"\u003e\n      \u003c/a\u003e\n      \u003ca href=\"https://twitter.com/intent/retweet?tweet_id=1067796979470819328\" class=\"ltag__twitter-tweet__actions__button\"\u003e\n        \u003cimg src=\"/assets/twitter-retweet-action.svg\" alt=\"Twitter retweet action\" loading=\"lazy\"\u003e\n      \u003c/a\u003e\n      10\n      \u003ca href=\"https://twitter.com/intent/like?tweet_id=1067796979470819328\" class=\"ltag__twitter-tweet__actions__button\"\u003e\n        \u003cimg src=\"/assets/twitter-like-action.svg\" alt=\"Twitter like action\" loading=\"lazy\"\u003e\n      \u003c/a\u003e\n      63\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/blockquote\u003e\n\n\n\u003cp\u003eSarah Drasner is hosting a workshop on FrontendMasters about design for developers! \u003ca href=\"https://frontendmasters.com\"\u003eCheck it out\u003c/a\u003e then check out this #discuss by Jaime Rios:\u003c/p\u003e\n\n\n\u003cdiv class=\"ltag__link\"\u003e\n  \u003ca href=\"/papaponmx\" class=\"ltag__link__link\"\u003e\n    \u003cdiv class=\"ltag__link__pic\"\u003e\n      \u003cimg src=\"https://res.cloudinary.com/practicaldev/image/fetch/s--DBTzEO1t--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://res.cloudinary.com/practicaldev/image/fetch/s--faaVCIyB--/c_fill%2Cf_auto%2Cfl_progressive%2Ch_150%2Cq_auto%2Cw_150/https://dev-to-uploads.s3.amazonaws.com/uploads/user/profile_image/71432/0b0de2da-c3b2-41ea-ae43-b80c09fa27ff.jpeg\" alt=\"papaponmx image\" loading=\"lazy\"\u003e\n    \u003c/div\u003e\n  \u003c/a\u003e\n  \u003ca href=\"/papaponmx/flipping-the-coin-should-developers-design-26ie\" class=\"ltag__link__link\"\u003e\n    \u003cdiv class=\"ltag__link__content\"\u003e\n      \u003ch2\u003eFlipping the coin: Should developers design?\u003c/h2\u003e\n      \u003ch3\u003eJaime Rios ・ Nov 28 '18 ・ 1 min read\u003c/h3\u003e\n      \u003cdiv class=\"ltag__link__taglist\"\u003e\n        \u003cspan class=\"ltag__link__tag\"\u003e#discuss\u003c/span\u003e\n        \u003cspan class=\"ltag__link__tag\"\u003e#webdev\u003c/span\u003e\n        \u003cspan class=\"ltag__link__tag\"\u003e#design\u003c/span\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  \u003c/a\u003e\n\u003c/div\u003e\n\n\n","social_image":"","body_markdown":"---\r\ntitle: Design for Developers by Sarah Drasner starts soon!\r\npublished: true\r\ndescription: Check it out on Frontend Masters\r\ntags: webdev, design, workshop\r\n---\r\n\r\n{% twitter 1067796979470819328 %}\r\n\r\nSarah Drasner is hosting a workshop on FrontendMasters about design for developers! [Check it out](https://frontendmasters.com) then check out this #discuss by Jaime Rios:\r\n\r\n{% link https://dev.to/papaponmx/flipping-the-coin-should-developers-design-26ie %}","canonical_url":null,"show_comments":true,"main_image_background_hex_color":"#dddddd","published_from_feed":false,"comments_count":0,"video":null,"video_code":null,"video_source_url":null,"video_thumbnail_url":null,"video_closed_caption_track_url":null,"feed_source_url":null,"edited_at":"2018-11-28T15:31:05.985Z","crossposted_at":null,"language":"en","cached_tag_list":"webdev, design, workshop","path":"/wuz/design-for-developers-by-sarah-drasner-starts-soon-54ii","cached_user_name":"Conlin Durbin","cached_user_username":"wuz","last_comment_at":"2018-11-28T15:30:51.290Z","public_reactions_count":8},{"title":"Starting a Dev.to IRC?","slug":"starting-a-devto-irc-4p0i","created_at":"2018-11-28T15:33:41.314Z","main_image":null,"description":"I love the discussion and community here, but sometimes it would be nice to have a real-time communic...","published":true,"published_at":"2018-11-28T15:33:41.232Z","processed_html":"\u003cp\u003eI love the discussion and community here, but sometimes it would be nice to have a real-time communication tool. How would DEV-ers feel about setting up an IRC server/channel for the community to chat?\u003c/p\u003e\n\n","social_image":null,"body_markdown":"---\r\ntitle: Starting a Dev.to IRC?\r\npublished: true\r\ntags: meta\r\n---\r\n\r\nI love the discussion and community here, but sometimes it would be nice to have a real-time communication tool. How would DEV-ers feel about setting up an IRC server/channel for the community to chat?\r\n","canonical_url":null,"show_comments":true,"main_image_background_hex_color":"#dddddd","published_from_feed":false,"comments_count":11,"video":null,"video_code":null,"video_source_url":null,"video_thumbnail_url":null,"video_closed_caption_track_url":null,"feed_source_url":null,"edited_at":null,"crossposted_at":null,"language":"en","cached_tag_list":"meta","path":"/wuz/starting-a-devto-irc-4p0i","cached_user_name":"Conlin Durbin","cached_user_username":"wuz","last_comment_at":"2018-11-29T19:16:45.206Z","public_reactions_count":8},{"title":"Making mistakes: My first big programming blunder","slug":"making-mistakes-my-first-big-programming-blunder-48m2","created_at":"2018-12-08T16:53:40.829Z","main_image":"https://thepracticaldev.s3.amazonaws.com/i/bfq46b1zko7slkc7muu6.jpg","description":"The end of the world isn't always.","published":true,"published_at":"2019-01-09T16:30:04.949Z","processed_html":"\u003cp\u003eI started programming in a somewhat non-traditional way. My mom is a librarian in my home town, so in high school I started working there as a student page. I was pretty good with computers and thought I knew a lot more than I did. So when I heard that the library was design and building a new website, I thought maybe I could help out! I was already working in the computer lab at the library (from which I have many takeaways and perhaps a future post), so learning and working on the new website was a natural next step. I offered my help and my boss graciously said yes.\u003c/p\u003e\n\n\u003cp\u003eI started in right away. The site was being built on Wordpress, using a pre-existing theme as a starting point. We had lots of custom HTML and plugins working together to support much of the functionality of the site. Suffice to say, the \"architecture\" looked something like this:\u003c/p\u003e\n\n\u003cp\u003e\u003ca href=\"https://res.cloudinary.com/practicaldev/image/fetch/s--cVDwrd9I--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://ae01.alicdn.com/kf/HTB19sGjjrYI8KJjy0Faq6zAiVXak.jpg\" class=\"article-body-image-wrapper\"\u003e\u003cimg src=\"https://res.cloudinary.com/practicaldev/image/fetch/s--cVDwrd9I--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://ae01.alicdn.com/kf/HTB19sGjjrYI8KJjy0Faq6zAiVXak.jpg\" alt=\"a game of jenga\" loading=\"lazy\"\u003e\u003c/a\u003e\u003c/p\u003e\n\n\u003cp\u003eI had been working on the site for about a month when the inevitable happened. I made a change to a plugin and the site \u003cem\u003edid not\u003c/em\u003e like it. Something crashed and I quickly realized the difference between knowing enough to break something and knowing enough to fix it. \u003c/p\u003e\n\n\u003cp\u003eI'd broken everything.\u003c/p\u003e\n\n\u003cfigure\u003e\u003cp\u003e\u003ca href=\"https://res.cloudinary.com/practicaldev/image/fetch/s--6fY8lkue--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/hocnrsaeaxtatgp0ofwu.png\" class=\"article-body-image-wrapper\"\u003e\u003cimg src=\"https://res.cloudinary.com/practicaldev/image/fetch/s--6fY8lkue--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/hocnrsaeaxtatgp0ofwu.png\" alt=\"not the actual error\" loading=\"lazy\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cfigcaption\u003eNot an actual Wordpress error\u003c/figcaption\u003e\u003c/figure\u003e\n\n\n\n\u003cp\u003eI started thinking through my next steps. We hadn't used version control - I don't think anyone working on the site even knew what that was. We were uploading through FTP to the server for the \"beta\" site. There was no way to recover an old version or to even revert the change I made. I disabled plugins, deleted code, and tried everything I could think of to get back to a working state. Nothing seemed to work.\u003c/p\u003e\n\n\u003cp\u003eAfter a brief bit of panic, I knew that this was ultimately my responsibility. I decided to go to my boss with a new plan:\u003c/p\u003e\n\n\u003col\u003e\n\u003cli\u003eExplain what had happened\u003c/li\u003e\n\u003cli\u003eHope I didn't get fired/removed from the website project\u003c/li\u003e\n\u003cli\u003ePromise to build a new site\u003c/li\u003e\n\u003c/ol\u003e\n\n\u003cp\u003eLuckily my boss was awesome - she understood that this was a great learning opportunity for me. She allowed me to keep working on the project and so I started over from scratch. I learned from my mistakes. Instead of starting the project with an existing theme, I began reading about creating Wordpress themes. I stopped relying as much on plugins for functionality. Through this job, I gained a lot of knowledge about programming and ultimately ended up where I am today - working as a full-time software engineer.\u003c/p\u003e\n\n\u003cp\u003eI still make mistakes (though usually they are less destructive). The library still uses the site I built. And I have a great story to share with new developers.\u003c/p\u003e\n\n\u003cp\u003e\u003cem\u003eSo remember:\u003c/em\u003e\u003cbr\u003e\nNew devs - you are going to make mistakes. Work hard to reconcile them.\u003c/p\u003e\n\n\u003cp\u003eEmployers/managers/seniors - Mistakes are \u003cem\u003egoing\u003c/em\u003e to happen. You can either respond by getting angry and firing people or you can turn a mistake into a teachable moment and a point of ownership and pride for a new engineer on your team.\u003c/p\u003e\n\n\u003cp\u003eWhat was your biggest mistake in programming? How did you respond? What happened?\u003c/p\u003e\n\n","social_image":null,"body_markdown":"---\r\ntitle: Making mistakes: My first big programming blunder\r\npublished: true\r\ndescription: The end of the world isn't always.\r\ntags: career, beginner\r\ncover_image: https://thepracticaldev.s3.amazonaws.com/i/bfq46b1zko7slkc7muu6.jpg\r\n---\r\n\r\nI started programming in a somewhat non-traditional way. My mom is a librarian in my home town, so in high school I started working there as a student page. I was pretty good with computers and thought I knew a lot more than I did. So when I heard that the library was design and building a new website, I thought maybe I could help out! I was already working in the computer lab at the library (from which I have many takeaways and perhaps a future post), so learning and working on the new website was a natural next step. I offered my help and my boss graciously said yes.\r\n\r\nI started in right away. The site was being built on Wordpress, using a pre-existing theme as a starting point. We had lots of custom HTML and plugins working together to support much of the functionality of the site. Suffice to say, the \"architecture\" looked something like this:\r\n\r\n![a game of jenga](https://ae01.alicdn.com/kf/HTB19sGjjrYI8KJjy0Faq6zAiVXak.jpg)\r\n\r\nI had been working on the site for about a month when the inevitable happened. I made a change to a plugin and the site *did not* like it. Something crashed and I quickly realized the difference between knowing enough to break something and knowing enough to fix it. \r\n\r\nI'd broken everything.\r\n\r\n![not the actual error](https://thepracticaldev.s3.amazonaws.com/i/hocnrsaeaxtatgp0ofwu.png)\r\n\u003cfigcaption\u003eNot an actual Wordpress error\u003c/figcaption\u003e\r\n\r\nI started thinking through my next steps. We hadn't used version control - I don't think anyone working on the site even knew what that was. We were uploading through FTP to the server for the \"beta\" site. There was no way to recover an old version or to even revert the change I made. I disabled plugins, deleted code, and tried everything I could think of to get back to a working state. Nothing seemed to work.\r\n\r\nAfter a brief bit of panic, I knew that this was ultimately my responsibility. I decided to go to my boss with a new plan:\r\n\r\n1. Explain what had happened\r\n2. Hope I didn't get fired/removed from the website project\r\n3. Promise to build a new site\r\n\r\nLuckily my boss was awesome - she understood that this was a great learning opportunity for me. She allowed me to keep working on the project and so I started over from scratch. I learned from my mistakes. Instead of starting the project with an existing theme, I began reading about creating Wordpress themes. I stopped relying as much on plugins for functionality. Through this job, I gained a lot of knowledge about programming and ultimately ended up where I am today - working as a full-time software engineer.\r\n\r\nI still make mistakes (though usually they are less destructive). The library still uses the site I built. And I have a great story to share with new developers.\r\n\r\n*So remember:*\r\nNew devs - you are going to make mistakes. Work hard to reconcile them.\r\n\r\nEmployers/managers/seniors - Mistakes are _going_ to happen. You can either respond by getting angry and firing people or you can turn a mistake into a teachable moment and a point of ownership and pride for a new engineer on your team.\r\n\r\nWhat was your biggest mistake in programming? How did you respond? What happened?","canonical_url":null,"show_comments":true,"main_image_background_hex_color":"#dddddd","published_from_feed":false,"comments_count":2,"video":null,"video_code":null,"video_source_url":null,"video_thumbnail_url":null,"video_closed_caption_track_url":null,"feed_source_url":null,"edited_at":null,"crossposted_at":null,"language":null,"cached_tag_list":"career, beginners","path":"/wuz/making-mistakes-my-first-big-programming-blunder-48m2","cached_user_name":"Conlin Durbin","cached_user_username":"wuz","last_comment_at":"2019-01-11T15:46:03.950Z","public_reactions_count":21},{"title":"Linked lists in the wild: React Hooks","slug":"linked-lists-in-the-wild-react-hooks-3ep8","created_at":"2018-12-09T18:32:39.093Z","main_image":"https://thepracticaldev.s3.amazonaws.com/i/rcglra25frobt2r6yipz.jpg","description":"Under the hood, React hooks utilize a linked list. Here's why.","published":true,"published_at":"2018-12-17T22:03:09.441Z","processed_html":"\u003cp\u003eI was digging into some of the code for React hooks the other day, right after reading Ali's great post on linked lists:\u003c/p\u003e\n\n\n\u003cdiv class=\"ltag__link\"\u003e\n  \u003ca href=\"/aspittel\" class=\"ltag__link__link\"\u003e\n    \u003cdiv class=\"ltag__link__pic\"\u003e\n      \u003cimg src=\"https://res.cloudinary.com/practicaldev/image/fetch/s--lsknEIX6--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://res.cloudinary.com/practicaldev/image/fetch/s--stJcpewb--/c_fill%2Cf_auto%2Cfl_progressive%2Ch_150%2Cq_auto%2Cw_150/https://dev-to-uploads.s3.amazonaws.com/uploads/user/profile_image/38627/77a2a5e7-603e-41b4-afcc-f7aff468ae2f.jpg\" alt=\"aspittel image\" loading=\"lazy\"\u003e\n    \u003c/div\u003e\n  \u003c/a\u003e\n  \u003ca href=\"/aspittel/thank-u-next-an-introduction-to-linked-lists-4pph\" class=\"ltag__link__link\"\u003e\n    \u003cdiv class=\"ltag__link__content\"\u003e\n      \u003ch2\u003ethank u, next: an introduction to linked lists\u003c/h2\u003e\n      \u003ch3\u003eAli Spittel ・ Dec  5 '18 ・ 1 min read\u003c/h3\u003e\n      \u003cdiv class=\"ltag__link__taglist\"\u003e\n        \u003cspan class=\"ltag__link__tag\"\u003e#datastructures\u003c/span\u003e\n        \u003cspan class=\"ltag__link__tag\"\u003e#beginners\u003c/span\u003e\n        \u003cspan class=\"ltag__link__tag\"\u003e#programming\u003c/span\u003e\n        \u003cspan class=\"ltag__link__tag\"\u003e#javascript\u003c/span\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  \u003c/a\u003e\n\u003c/div\u003e\n\n\n\u003cp\u003eAs I was diving in, I noticed that hooks are actually using linked lists under the hood. It's always cool to run across an implementation or use case of a data structure, so I thought I would share how and why they are being used, as far as I can tell.\u003c/p\u003e\n\n\u003ch2\u003e\n  \u003ca name=\"the-implementation\" href=\"#the-implementation\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  The implementation\n\u003c/h2\u003e\n\n\u003cp\u003eThere is a comment in the hooks implementation that reads:\u003cbr\u003e\n\u003c/p\u003e\n\n\u003cdiv class=\"highlight\"\u003e\u003cpre class=\"highlight javascript\"\u003e\u003ccode\u003e\u003cspan class=\"c1\"\u003e// Hooks are stored as a linked list on the fiber's memoizedState field. The\u003c/span\u003e\n\u003cspan class=\"c1\"\u003e// current hook list is the list that belongs to the current fiber. The\u003c/span\u003e\n\u003cspan class=\"c1\"\u003e// work-in-progress hook list is a new list that will be added to the\u003c/span\u003e\n\u003cspan class=\"c1\"\u003e// work-in-progress fiber.\u003c/span\u003e\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\n\n\n\n\u003cp\u003eIf you don't know what a fiber is, don't worry. They are basically a code representation of a unit of work in React. From the original \u003ca href=\"https://github.com/acdlite/react-fiber-architecture#what-is-a-fiber\"\u003eFiber github\u003c/a\u003e:\u003c/p\u003e\n\n\u003cblockquote\u003e\n\u003cul\u003e\n\u003cli\u003epause work and come back to it later.\u003c/li\u003e\n\u003cli\u003eassign priority to different types of work.\u003c/li\u003e\n\u003cli\u003ereuse previously completed work.\u003c/li\u003e\n\u003cli\u003eabort work if it's no longer needed.\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/blockquote\u003e\n\n\u003cp\u003eTherefore, hooks are stored in a fiber's state. A fiber has a linked list of its current hooks. When something updates in React, the fiber creates a new work-in-progress hook list and appends it to the list.\u003c/p\u003e\n\n\u003cp\u003eHere is the implementation of Hooks from \u003ca href=\"https://github.com/facebook/react/blob/master/packages/react-reconciler/src/ReactFiberHooks.js#L264\"\u003ethe React src\u003c/a\u003e (comments are from the code itself):\u003cbr\u003e\n\u003c/p\u003e\n\n\u003cdiv class=\"highlight\"\u003e\u003cpre class=\"highlight javascript\"\u003e\u003ccode\u003e\u003cspan class=\"kd\"\u003efunction\u003c/span\u003e \u003cspan class=\"nx\"\u003ecreateWorkInProgressHook\u003c/span\u003e\u003cspan class=\"p\"\u003e():\u003c/span\u003e \u003cspan class=\"nx\"\u003eHook\u003c/span\u003e \u003cspan class=\"p\"\u003e{\u003c/span\u003e\n  \u003cspan class=\"k\"\u003eif\u003c/span\u003e \u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"nx\"\u003eworkInProgressHook\u003c/span\u003e \u003cspan class=\"o\"\u003e===\u003c/span\u003e \u003cspan class=\"kc\"\u003enull\u003c/span\u003e\u003cspan class=\"p\"\u003e)\u003c/span\u003e \u003cspan class=\"p\"\u003e{\u003c/span\u003e\n    \u003cspan class=\"c1\"\u003e// This is the first hook in the list\u003c/span\u003e\n    \u003cspan class=\"k\"\u003eif\u003c/span\u003e \u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"nx\"\u003efirstWorkInProgressHook\u003c/span\u003e \u003cspan class=\"o\"\u003e===\u003c/span\u003e \u003cspan class=\"kc\"\u003enull\u003c/span\u003e\u003cspan class=\"p\"\u003e)\u003c/span\u003e \u003cspan class=\"p\"\u003e{\u003c/span\u003e\n      \u003cspan class=\"nx\"\u003eisReRender\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"kc\"\u003efalse\u003c/span\u003e\u003cspan class=\"p\"\u003e;\u003c/span\u003e\n      \u003cspan class=\"nx\"\u003ecurrentHook\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"nx\"\u003efirstCurrentHook\u003c/span\u003e\u003cspan class=\"p\"\u003e;\u003c/span\u003e\n      \u003cspan class=\"k\"\u003eif\u003c/span\u003e \u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"nx\"\u003ecurrentHook\u003c/span\u003e \u003cspan class=\"o\"\u003e===\u003c/span\u003e \u003cspan class=\"kc\"\u003enull\u003c/span\u003e\u003cspan class=\"p\"\u003e)\u003c/span\u003e \u003cspan class=\"p\"\u003e{\u003c/span\u003e\n        \u003cspan class=\"c1\"\u003e// This is a newly mounted hook\u003c/span\u003e\n        \u003cspan class=\"nx\"\u003eworkInProgressHook\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"nx\"\u003ecreateHook\u003c/span\u003e\u003cspan class=\"p\"\u003e();\u003c/span\u003e\n      \u003cspan class=\"p\"\u003e}\u003c/span\u003e \u003cspan class=\"k\"\u003eelse\u003c/span\u003e \u003cspan class=\"p\"\u003e{\u003c/span\u003e\n        \u003cspan class=\"c1\"\u003e// Clone the current hook.\u003c/span\u003e\n        \u003cspan class=\"nx\"\u003eworkInProgressHook\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"nx\"\u003ecloneHook\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"nx\"\u003ecurrentHook\u003c/span\u003e\u003cspan class=\"p\"\u003e);\u003c/span\u003e\n      \u003cspan class=\"p\"\u003e}\u003c/span\u003e\n      \u003cspan class=\"nx\"\u003efirstWorkInProgressHook\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"nx\"\u003eworkInProgressHook\u003c/span\u003e\u003cspan class=\"p\"\u003e;\u003c/span\u003e\n    \u003cspan class=\"p\"\u003e}\u003c/span\u003e \u003cspan class=\"k\"\u003eelse\u003c/span\u003e \u003cspan class=\"p\"\u003e{\u003c/span\u003e\n      \u003cspan class=\"c1\"\u003e// There's already a work-in-progress. Reuse it.\u003c/span\u003e\n      \u003cspan class=\"nx\"\u003eisReRender\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"kc\"\u003etrue\u003c/span\u003e\u003cspan class=\"p\"\u003e;\u003c/span\u003e\n      \u003cspan class=\"nx\"\u003ecurrentHook\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"nx\"\u003efirstCurrentHook\u003c/span\u003e\u003cspan class=\"p\"\u003e;\u003c/span\u003e\n      \u003cspan class=\"nx\"\u003eworkInProgressHook\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"nx\"\u003efirstWorkInProgressHook\u003c/span\u003e\u003cspan class=\"p\"\u003e;\u003c/span\u003e\n    \u003cspan class=\"p\"\u003e}\u003c/span\u003e\n  \u003cspan class=\"p\"\u003e}\u003c/span\u003e \u003cspan class=\"k\"\u003eelse\u003c/span\u003e \u003cspan class=\"p\"\u003e{\u003c/span\u003e\n    \u003cspan class=\"k\"\u003eif\u003c/span\u003e \u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"nx\"\u003eworkInProgressHook\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003enext\u003c/span\u003e \u003cspan class=\"o\"\u003e===\u003c/span\u003e \u003cspan class=\"kc\"\u003enull\u003c/span\u003e\u003cspan class=\"p\"\u003e)\u003c/span\u003e \u003cspan class=\"p\"\u003e{\u003c/span\u003e\n      \u003cspan class=\"nx\"\u003eisReRender\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"kc\"\u003efalse\u003c/span\u003e\u003cspan class=\"p\"\u003e;\u003c/span\u003e\n      \u003cspan class=\"kd\"\u003elet\u003c/span\u003e \u003cspan class=\"nx\"\u003ehook\u003c/span\u003e\u003cspan class=\"p\"\u003e;\u003c/span\u003e\n      \u003cspan class=\"k\"\u003eif\u003c/span\u003e \u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"nx\"\u003ecurrentHook\u003c/span\u003e \u003cspan class=\"o\"\u003e===\u003c/span\u003e \u003cspan class=\"kc\"\u003enull\u003c/span\u003e\u003cspan class=\"p\"\u003e)\u003c/span\u003e \u003cspan class=\"p\"\u003e{\u003c/span\u003e\n        \u003cspan class=\"c1\"\u003e// This is a newly mounted hook\u003c/span\u003e\n        \u003cspan class=\"nx\"\u003ehook\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"nx\"\u003ecreateHook\u003c/span\u003e\u003cspan class=\"p\"\u003e();\u003c/span\u003e\n      \u003cspan class=\"p\"\u003e}\u003c/span\u003e \u003cspan class=\"k\"\u003eelse\u003c/span\u003e \u003cspan class=\"p\"\u003e{\u003c/span\u003e\n        \u003cspan class=\"nx\"\u003ecurrentHook\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"nx\"\u003ecurrentHook\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003enext\u003c/span\u003e\u003cspan class=\"p\"\u003e;\u003c/span\u003e\n        \u003cspan class=\"k\"\u003eif\u003c/span\u003e \u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"nx\"\u003ecurrentHook\u003c/span\u003e \u003cspan class=\"o\"\u003e===\u003c/span\u003e \u003cspan class=\"kc\"\u003enull\u003c/span\u003e\u003cspan class=\"p\"\u003e)\u003c/span\u003e \u003cspan class=\"p\"\u003e{\u003c/span\u003e\n          \u003cspan class=\"c1\"\u003e// This is a newly mounted hook\u003c/span\u003e\n          \u003cspan class=\"nx\"\u003ehook\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"nx\"\u003ecreateHook\u003c/span\u003e\u003cspan class=\"p\"\u003e();\u003c/span\u003e\n        \u003cspan class=\"p\"\u003e}\u003c/span\u003e \u003cspan class=\"k\"\u003eelse\u003c/span\u003e \u003cspan class=\"p\"\u003e{\u003c/span\u003e\n          \u003cspan class=\"c1\"\u003e// Clone the current hook.\u003c/span\u003e\n          \u003cspan class=\"nx\"\u003ehook\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"nx\"\u003ecloneHook\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"nx\"\u003ecurrentHook\u003c/span\u003e\u003cspan class=\"p\"\u003e);\u003c/span\u003e\n        \u003cspan class=\"p\"\u003e}\u003c/span\u003e\n      \u003cspan class=\"p\"\u003e}\u003c/span\u003e\n      \u003cspan class=\"c1\"\u003e// Append to the end of the list\u003c/span\u003e\n      \u003cspan class=\"nx\"\u003eworkInProgressHook\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"nx\"\u003eworkInProgressHook\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003enext\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"nx\"\u003ehook\u003c/span\u003e\u003cspan class=\"p\"\u003e;\u003c/span\u003e\n    \u003cspan class=\"p\"\u003e}\u003c/span\u003e \u003cspan class=\"k\"\u003eelse\u003c/span\u003e \u003cspan class=\"p\"\u003e{\u003c/span\u003e\n      \u003cspan class=\"c1\"\u003e// There's already a work-in-progress. Reuse it.\u003c/span\u003e\n      \u003cspan class=\"nx\"\u003eisReRender\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"kc\"\u003etrue\u003c/span\u003e\u003cspan class=\"p\"\u003e;\u003c/span\u003e\n      \u003cspan class=\"nx\"\u003eworkInProgressHook\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"nx\"\u003eworkInProgressHook\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003enext\u003c/span\u003e\u003cspan class=\"p\"\u003e;\u003c/span\u003e\n      \u003cspan class=\"nx\"\u003ecurrentHook\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"nx\"\u003ecurrentHook\u003c/span\u003e \u003cspan class=\"o\"\u003e!==\u003c/span\u003e \u003cspan class=\"kc\"\u003enull\u003c/span\u003e \u003cspan class=\"p\"\u003e?\u003c/span\u003e \u003cspan class=\"nx\"\u003ecurrentHook\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003enext\u003c/span\u003e \u003cspan class=\"p\"\u003e:\u003c/span\u003e \u003cspan class=\"kc\"\u003enull\u003c/span\u003e\u003cspan class=\"p\"\u003e;\u003c/span\u003e\n    \u003cspan class=\"p\"\u003e}\u003c/span\u003e\n  \u003cspan class=\"p\"\u003e}\u003c/span\u003e\n  \u003cspan class=\"k\"\u003ereturn\u003c/span\u003e \u003cspan class=\"nx\"\u003eworkInProgressHook\u003c/span\u003e\u003cspan class=\"p\"\u003e;\u003c/span\u003e\n\u003cspan class=\"p\"\u003e}\u003c/span\u003e\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\n\n\n\n\u003cp\u003eLet's dive in to this just a little bit:\u003cbr\u003e\n\u003c/p\u003e\n\n\u003cdiv class=\"highlight\"\u003e\u003cpre class=\"highlight javascript\"\u003e\u003ccode\u003e\u003cspan class=\"k\"\u003eif\u003c/span\u003e \u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"nx\"\u003eworkInProgressHook\u003c/span\u003e \u003cspan class=\"o\"\u003e===\u003c/span\u003e \u003cspan class=\"kc\"\u003enull\u003c/span\u003e\u003cspan class=\"p\"\u003e)\u003c/span\u003e \u003cspan class=\"p\"\u003e{\u003c/span\u003e\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\n\n\n\n\u003cp\u003eis checking to see if we have a current hook that is being used. \u003ccode\u003eworkInProgressHook\u003c/code\u003e a global variable and is used like this:\u003cbr\u003e\n\u003c/p\u003e\n\n\u003cdiv class=\"highlight\"\u003e\u003cpre class=\"highlight javascript\"\u003e\u003ccode\u003e\u003cspan class=\"nx\"\u003eworkInProgressHook\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"nx\"\u003ecreateWorkInProgressHook\u003c/span\u003e\u003cspan class=\"p\"\u003e();\u003c/span\u003e\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\n\n\n\n\u003cp\u003eSo, if \u003ccode\u003eworkInProgressHook\u003c/code\u003e is null, what do we want to do?\u003c/p\u003e\n\n\u003cp\u003eA null workInProgressHook means we aren't currently building a hook. That means we want to work with the \u003cem\u003ecurrent\u003c/em\u003e hook, not build the next hook in the list. There are two times we might want to do this - when we are building a new list and making the first element and on a re-render, when we are reloading an existing list. The next \u003ccode\u003eif\u003c/code\u003e statement shows us this (and the comments are even nice enough to tell us!):\u003cbr\u003e\n\u003c/p\u003e\n\n\u003cdiv class=\"highlight\"\u003e\u003cpre class=\"highlight javascript\"\u003e\u003ccode\u003e\u003cspan class=\"c1\"\u003e// This is the first hook in the list\u003c/span\u003e\n\u003cspan class=\"k\"\u003eif\u003c/span\u003e \u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"nx\"\u003efirstWorkInProgressHook\u003c/span\u003e \u003cspan class=\"o\"\u003e===\u003c/span\u003e \u003cspan class=\"kc\"\u003enull\u003c/span\u003e\u003cspan class=\"p\"\u003e)\u003c/span\u003e \u003cspan class=\"p\"\u003e{\u003c/span\u003e\n  \u003cspan class=\"nx\"\u003eisReRender\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"kc\"\u003efalse\u003c/span\u003e\u003cspan class=\"p\"\u003e;\u003c/span\u003e\n  \u003cspan class=\"nx\"\u003ecurrentHook\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"nx\"\u003efirstCurrentHook\u003c/span\u003e\u003cspan class=\"p\"\u003e;\u003c/span\u003e\n  \u003cspan class=\"k\"\u003eif\u003c/span\u003e \u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"nx\"\u003ecurrentHook\u003c/span\u003e \u003cspan class=\"o\"\u003e===\u003c/span\u003e \u003cspan class=\"kc\"\u003enull\u003c/span\u003e\u003cspan class=\"p\"\u003e)\u003c/span\u003e \u003cspan class=\"p\"\u003e{\u003c/span\u003e\n    \u003cspan class=\"c1\"\u003e// This is a newly mounted hook\u003c/span\u003e\n     \u003cspan class=\"nx\"\u003eworkInProgressHook\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"nx\"\u003ecreateHook\u003c/span\u003e\u003cspan class=\"p\"\u003e();\u003c/span\u003e\n  \u003cspan class=\"p\"\u003e}\u003c/span\u003e \u003cspan class=\"k\"\u003eelse\u003c/span\u003e \u003cspan class=\"p\"\u003e{\u003c/span\u003e\n    \u003cspan class=\"c1\"\u003e// Clone the current hook.\u003c/span\u003e\n    \u003cspan class=\"nx\"\u003eworkInProgressHook\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"nx\"\u003ecloneHook\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"nx\"\u003ecurrentHook\u003c/span\u003e\u003cspan class=\"p\"\u003e);\u003c/span\u003e\n  \u003cspan class=\"p\"\u003e}\u003c/span\u003e\n  \u003cspan class=\"nx\"\u003efirstWorkInProgressHook\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"nx\"\u003eworkInProgressHook\u003c/span\u003e\u003cspan class=\"p\"\u003e;\u003c/span\u003e\n\u003cspan class=\"p\"\u003e}\u003c/span\u003e \u003cspan class=\"k\"\u003eelse\u003c/span\u003e \u003cspan class=\"p\"\u003e{\u003c/span\u003e\n  \u003cspan class=\"c1\"\u003e// There's already a work-in-progress. Reuse it.\u003c/span\u003e\n  \u003cspan class=\"nx\"\u003eisReRender\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"kc\"\u003etrue\u003c/span\u003e\u003cspan class=\"p\"\u003e;\u003c/span\u003e\n  \u003cspan class=\"nx\"\u003ecurrentHook\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"nx\"\u003efirstCurrentHook\u003c/span\u003e\u003cspan class=\"p\"\u003e;\u003c/span\u003e\n  \u003cspan class=\"nx\"\u003eworkInProgressHook\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"nx\"\u003efirstWorkInProgressHook\u003c/span\u003e\u003cspan class=\"p\"\u003e;\u003c/span\u003e\n\u003cspan class=\"p\"\u003e}\u003c/span\u003e\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\n\n\n\n\u003cp\u003eIf we don't have a \u003ccode\u003efirstWorkInProgressHook\u003c/code\u003e, we need to start building the linked list - which has yet another if statement. But, if we do have one, that means we are already creating a work-in-progress and the first current hook can just be copied!\u003c/p\u003e\n\n\u003cp\u003eThe next if statement down:\u003cbr\u003e\n\u003c/p\u003e\n\n\u003cdiv class=\"highlight\"\u003e\u003cpre class=\"highlight javascript\"\u003e\u003ccode\u003e\u003cspan class=\"k\"\u003eif\u003c/span\u003e \u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"nx\"\u003ecurrentHook\u003c/span\u003e \u003cspan class=\"o\"\u003e===\u003c/span\u003e \u003cspan class=\"kc\"\u003enull\u003c/span\u003e\u003cspan class=\"p\"\u003e)\u003c/span\u003e \u003cspan class=\"p\"\u003e{\u003c/span\u003e\n  \u003cspan class=\"c1\"\u003e// This is a newly mounted hook\u003c/span\u003e\n   \u003cspan class=\"nx\"\u003eworkInProgressHook\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"nx\"\u003ecreateHook\u003c/span\u003e\u003cspan class=\"p\"\u003e();\u003c/span\u003e\n\u003cspan class=\"p\"\u003e}\u003c/span\u003e \u003cspan class=\"k\"\u003eelse\u003c/span\u003e \u003cspan class=\"p\"\u003e{\u003c/span\u003e\n  \u003cspan class=\"c1\"\u003e// Clone the current hook.\u003c/span\u003e\n  \u003cspan class=\"nx\"\u003eworkInProgressHook\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"nx\"\u003ecloneHook\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"nx\"\u003ecurrentHook\u003c/span\u003e\u003cspan class=\"p\"\u003e);\u003c/span\u003e\n\u003cspan class=\"p\"\u003e}\u003c/span\u003e\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\n\n\n\n\u003cp\u003eNow we want to check if we have a current hook. If we don't we are creating a completely new list, which means we call \u003ccode\u003ecreateHook\u003c/code\u003e.\u003c/p\u003e\n\n\u003cblockquote\u003e\n\u003cp\u003e\u003ccode\u003ecreateHook\u003c/code\u003e just returns a object with a bunch of null set properties. The one we will be interested in the \u003ccode\u003enext\u003c/code\u003e property.\u003c/p\u003e\n\u003c/blockquote\u003e\n\n\u003cp\u003eOtherwise, this is a list that we have already rendered once. React saves some performance by just cloning the hook and moving on, that way it doesn't have to re-create a hook every time this function is called.\u003c/p\u003e\n\n\u003cp\u003eSo now we have our first hook! We set our \u003ccode\u003efirstWorkInProgressHook\u003c/code\u003e to the new one we just made!\u003cbr\u003e\n\u003c/p\u003e\n\n\u003cdiv class=\"highlight\"\u003e\u003cpre class=\"highlight javascript\"\u003e\u003ccode\u003e\u003cspan class=\"nx\"\u003efirstWorkInProgressHook\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"nx\"\u003eworkInProgressHook\u003c/span\u003e\u003cspan class=\"p\"\u003e;\u003c/span\u003e\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\n\n\n\n\u003cp\u003eNow, what happens when we call \u003ccode\u003ecreateWorkInProgressHook\u003c/code\u003e again?\u003cbr\u003e\n\u003c/p\u003e\n\n\u003cdiv class=\"highlight\"\u003e\u003cpre class=\"highlight javascript\"\u003e\u003ccode\u003e\u003cspan class=\"kd\"\u003efunction\u003c/span\u003e \u003cspan class=\"nx\"\u003ecreateWorkInProgressHook\u003c/span\u003e\u003cspan class=\"p\"\u003e():\u003c/span\u003e \u003cspan class=\"nx\"\u003eHook\u003c/span\u003e \u003cspan class=\"p\"\u003e{\u003c/span\u003e\n  \u003cspan class=\"k\"\u003eif\u003c/span\u003e \u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"nx\"\u003eworkInProgressHook\u003c/span\u003e \u003cspan class=\"o\"\u003e===\u003c/span\u003e \u003cspan class=\"kc\"\u003enull\u003c/span\u003e\u003cspan class=\"p\"\u003e)\u003c/span\u003e \u003cspan class=\"p\"\u003e{\u003c/span\u003e\n    \u003cspan class=\"c1\"\u003e// ...\u003c/span\u003e\n  \u003cspan class=\"p\"\u003e}\u003c/span\u003e \u003cspan class=\"k\"\u003eelse\u003c/span\u003e \u003cspan class=\"p\"\u003e{\u003c/span\u003e\n    \u003cspan class=\"c1\"\u003e// what happens here?\u003c/span\u003e\n  \u003cspan class=\"p\"\u003e}\u003c/span\u003e\n  \u003cspan class=\"k\"\u003ereturn\u003c/span\u003e \u003cspan class=\"nx\"\u003eworkInProgressHook\u003c/span\u003e\u003cspan class=\"p\"\u003e;\u003c/span\u003e\n\u003cspan class=\"p\"\u003e}\u003c/span\u003e\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\n\n\n\n\u003cp\u003eLet's look!\u003c/p\u003e\n\n\u003cp\u003eNow that \u003ccode\u003eworkInProgressHook\u003c/code\u003e isn't null, we need to check if it has a next hook -\u003cbr\u003e\n\u003c/p\u003e\n\n\u003cdiv class=\"highlight\"\u003e\u003cpre class=\"highlight javascript\"\u003e\u003ccode\u003e\u003cspan class=\"k\"\u003eif\u003c/span\u003e \u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"nx\"\u003eworkInProgressHook\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003enext\u003c/span\u003e \u003cspan class=\"o\"\u003e===\u003c/span\u003e \u003cspan class=\"kc\"\u003enull\u003c/span\u003e\u003cspan class=\"p\"\u003e)\u003c/span\u003e \u003cspan class=\"p\"\u003e{\u003c/span\u003e\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\n\n\n\n\u003cp\u003eIf there isn't one, we should create a new hook and append it to the list, which is exactly what happens:\u003cbr\u003e\n\u003c/p\u003e\n\n\u003cdiv class=\"highlight\"\u003e\u003cpre class=\"highlight javascript\"\u003e\u003ccode\u003e\u003cspan class=\"nx\"\u003eisReRender\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"kc\"\u003efalse\u003c/span\u003e\u003cspan class=\"p\"\u003e;\u003c/span\u003e\n\u003cspan class=\"kd\"\u003elet\u003c/span\u003e \u003cspan class=\"nx\"\u003ehook\u003c/span\u003e\u003cspan class=\"p\"\u003e;\u003c/span\u003e\n\u003cspan class=\"k\"\u003eif\u003c/span\u003e \u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"nx\"\u003ecurrentHook\u003c/span\u003e \u003cspan class=\"o\"\u003e===\u003c/span\u003e \u003cspan class=\"kc\"\u003enull\u003c/span\u003e\u003cspan class=\"p\"\u003e)\u003c/span\u003e \u003cspan class=\"p\"\u003e{\u003c/span\u003e\n  \u003cspan class=\"c1\"\u003e// This is a newly mounted hook\u003c/span\u003e\n  \u003cspan class=\"nx\"\u003ehook\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"nx\"\u003ecreateHook\u003c/span\u003e\u003cspan class=\"p\"\u003e();\u003c/span\u003e\n\u003cspan class=\"p\"\u003e}\u003c/span\u003e \u003cspan class=\"k\"\u003eelse\u003c/span\u003e \u003cspan class=\"p\"\u003e{\u003c/span\u003e\n  \u003cspan class=\"nx\"\u003ecurrentHook\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"nx\"\u003ecurrentHook\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003enext\u003c/span\u003e\u003cspan class=\"p\"\u003e;\u003c/span\u003e\n  \u003cspan class=\"k\"\u003eif\u003c/span\u003e \u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"nx\"\u003ecurrentHook\u003c/span\u003e \u003cspan class=\"o\"\u003e===\u003c/span\u003e \u003cspan class=\"kc\"\u003enull\u003c/span\u003e\u003cspan class=\"p\"\u003e)\u003c/span\u003e \u003cspan class=\"p\"\u003e{\u003c/span\u003e\n    \u003cspan class=\"c1\"\u003e// This is a newly mounted hook\u003c/span\u003e\n    \u003cspan class=\"nx\"\u003ehook\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"nx\"\u003ecreateHook\u003c/span\u003e\u003cspan class=\"p\"\u003e();\u003c/span\u003e\n  \u003cspan class=\"p\"\u003e}\u003c/span\u003e \u003cspan class=\"k\"\u003eelse\u003c/span\u003e \u003cspan class=\"p\"\u003e{\u003c/span\u003e\n    \u003cspan class=\"c1\"\u003e// Clone the current hook.\u003c/span\u003e\n    \u003cspan class=\"nx\"\u003ehook\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"nx\"\u003ecloneHook\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"nx\"\u003ecurrentHook\u003c/span\u003e\u003cspan class=\"p\"\u003e);\u003c/span\u003e\n  \u003cspan class=\"p\"\u003e}\u003c/span\u003e\n\u003cspan class=\"p\"\u003e}\u003c/span\u003e\n\u003cspan class=\"c1\"\u003e// Append to the end of the list\u003c/span\u003e\n\u003cspan class=\"nx\"\u003eworkInProgressHook\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"nx\"\u003eworkInProgressHook\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003enext\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"nx\"\u003ehook\u003c/span\u003e\u003cspan class=\"p\"\u003e;\u003c/span\u003e\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\n\n\n\n\u003cp\u003eSo, again we check if there is a current hook to clone (this time checking to see if the next hook exists, since that let's us know if this hook has been created before). If there is, we clone it, if not we create a new one.\u003c/p\u003e\n\n\u003cp\u003eThen we call this magic line:\u003cbr\u003e\n\u003c/p\u003e\n\n\u003cdiv class=\"highlight\"\u003e\u003cpre class=\"highlight javascript\"\u003e\u003ccode\u003e\u003cspan class=\"nx\"\u003eworkInProgressHook\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"nx\"\u003eworkInProgressHook\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003enext\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"nx\"\u003ehook\u003c/span\u003e\u003cspan class=\"p\"\u003e;\u003c/span\u003e\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\n\n\n\n\u003cp\u003eWhich takes our newly created hook, sets it to the next hook for the current one and then sets the current one equal to the new one. This is basically equivalent to this:\u003cbr\u003e\n\u003c/p\u003e\n\n\u003cdiv class=\"highlight\"\u003e\u003cpre class=\"highlight javascript\"\u003e\u003ccode\u003e\u003cspan class=\"nx\"\u003eworkInProgressHook\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003enext\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"nx\"\u003ehook\u003c/span\u003e\u003cspan class=\"p\"\u003e;\u003c/span\u003e\n\u003cspan class=\"nx\"\u003eworkInProgressHook\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"nx\"\u003ehook\u003c/span\u003e\u003cspan class=\"p\"\u003e;\u003c/span\u003e\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\n\n\n\n\u003cp\u003eFinally, if we do already have a work-in-progress hook, we are rerender, and want to do much the same thing we did the first time:\u003cbr\u003e\n\u003c/p\u003e\n\n\u003cdiv class=\"highlight\"\u003e\u003cpre class=\"highlight javascript\"\u003e\u003ccode\u003e\u003cspan class=\"p\"\u003e}\u003c/span\u003e \u003cspan class=\"k\"\u003eelse\u003c/span\u003e \u003cspan class=\"p\"\u003e{\u003c/span\u003e\n  \u003cspan class=\"c1\"\u003e// There's already a work-in-progress. Reuse it.\u003c/span\u003e\n  \u003cspan class=\"nx\"\u003eisReRender\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"kc\"\u003etrue\u003c/span\u003e\u003cspan class=\"p\"\u003e;\u003c/span\u003e\n  \u003cspan class=\"nx\"\u003eworkInProgressHook\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"nx\"\u003eworkInProgressHook\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003enext\u003c/span\u003e\u003cspan class=\"p\"\u003e;\u003c/span\u003e\n  \u003cspan class=\"nx\"\u003ecurrentHook\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"nx\"\u003ecurrentHook\u003c/span\u003e \u003cspan class=\"o\"\u003e!==\u003c/span\u003e \u003cspan class=\"kc\"\u003enull\u003c/span\u003e \u003cspan class=\"p\"\u003e?\u003c/span\u003e \u003cspan class=\"nx\"\u003ecurrentHook\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003enext\u003c/span\u003e \u003cspan class=\"p\"\u003e:\u003c/span\u003e \u003cspan class=\"kc\"\u003enull\u003c/span\u003e\u003cspan class=\"p\"\u003e;\u003c/span\u003e\n\u003cspan class=\"p\"\u003e}\u003c/span\u003e\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\n\n\n\n\u003cp\u003eThe only difference here is we need to update the currentHook to be the next hook before moving one, which is done with that ternary on the last line.\u003c/p\u003e\n\n\u003cp\u003eWe've created a linked list using some global variables and a a function! That's pretty cool!\u003c/p\u003e\n\n\u003cp\u003eThis honestly might be the first time I've seen a linked list used in actual code! Hopefully, this post made sense! Please let me know if there are any questions!\u003c/p\u003e\n\n","social_image":"","body_markdown":"---\r\ntitle: Linked lists in the wild: React Hooks\r\npublished: true\r\ndescription: Under the hood, React hooks utilize a linked list. Here's why.\r\ncover_image: https://thepracticaldev.s3.amazonaws.com/i/rcglra25frobt2r6yipz.jpg\r\ntags: beginner, datastructures, react, javascript\r\n---\r\n\r\nI was digging into some of the code for React hooks the other day, right after reading Ali's great post on linked lists:\r\n\r\n{% link https://dev.to/aspittel/thank-u-next-an-introduction-to-linked-lists-4pph %}\r\n\r\nAs I was diving in, I noticed that hooks are actually using linked lists under the hood. It's always cool to run across an implementation or use case of a data structure, so I thought I would share how and why they are being used, as far as I can tell.\r\n\r\n## The implementation\r\n\r\nThere is a comment in the hooks implementation that reads:\r\n\r\n```js\r\n// Hooks are stored as a linked list on the fiber's memoizedState field. The\r\n// current hook list is the list that belongs to the current fiber. The\r\n// work-in-progress hook list is a new list that will be added to the\r\n// work-in-progress fiber.\r\n```\r\n\r\nIf you don't know what a fiber is, don't worry. They are basically a code representation of a unit of work in React. From the original [Fiber github](https://github.com/acdlite/react-fiber-architecture#what-is-a-fiber):\r\n\r\n\u003e - pause work and come back to it later.\r\n\u003e - assign priority to different types of work.\r\n\u003e - reuse previously completed work.\r\n\u003e - abort work if it's no longer needed.\r\n\r\nTherefore, hooks are stored in a fiber's state. A fiber has a linked list of its current hooks. When something updates in React, the fiber creates a new work-in-progress hook list and appends it to the list.\r\n\r\nHere is the implementation of Hooks from [the React src](https://github.com/facebook/react/blob/master/packages/react-reconciler/src/ReactFiberHooks.js#L264) (comments are from the code itself):\r\n\r\n```js\r\nfunction createWorkInProgressHook(): Hook {\r\n  if (workInProgressHook === null) {\r\n    // This is the first hook in the list\r\n    if (firstWorkInProgressHook === null) {\r\n      isReRender = false;\r\n      currentHook = firstCurrentHook;\r\n      if (currentHook === null) {\r\n        // This is a newly mounted hook\r\n        workInProgressHook = createHook();\r\n      } else {\r\n        // Clone the current hook.\r\n        workInProgressHook = cloneHook(currentHook);\r\n      }\r\n      firstWorkInProgressHook = workInProgressHook;\r\n    } else {\r\n      // There's already a work-in-progress. Reuse it.\r\n      isReRender = true;\r\n      currentHook = firstCurrentHook;\r\n      workInProgressHook = firstWorkInProgressHook;\r\n    }\r\n  } else {\r\n    if (workInProgressHook.next === null) {\r\n      isReRender = false;\r\n      let hook;\r\n      if (currentHook === null) {\r\n        // This is a newly mounted hook\r\n        hook = createHook();\r\n      } else {\r\n        currentHook = currentHook.next;\r\n        if (currentHook === null) {\r\n          // This is a newly mounted hook\r\n          hook = createHook();\r\n        } else {\r\n          // Clone the current hook.\r\n          hook = cloneHook(currentHook);\r\n        }\r\n      }\r\n      // Append to the end of the list\r\n      workInProgressHook = workInProgressHook.next = hook;\r\n    } else {\r\n      // There's already a work-in-progress. Reuse it.\r\n      isReRender = true;\r\n      workInProgressHook = workInProgressHook.next;\r\n      currentHook = currentHook !== null ? currentHook.next : null;\r\n    }\r\n  }\r\n  return workInProgressHook;\r\n}\r\n```\r\n\r\nLet's dive in to this just a little bit:\r\n\r\n```js\r\nif (workInProgressHook === null) {\r\n```\r\n\r\nis checking to see if we have a current hook that is being used. `workInProgressHook` a global variable and is used like this:\r\n\r\n```js\r\nworkInProgressHook = createWorkInProgressHook();\r\n```\r\n\r\nSo, if `workInProgressHook` is null, what do we want to do?\r\n\r\nA null workInProgressHook means we aren't currently building a hook. That means we want to work with the _current_ hook, not build the next hook in the list. There are two times we might want to do this - when we are building a new list and making the first element and on a re-render, when we are reloading an existing list. The next `if` statement shows us this (and the comments are even nice enough to tell us!): \r\n\r\n```js\r\n// This is the first hook in the list\r\nif (firstWorkInProgressHook === null) {\r\n  isReRender = false;\r\n  currentHook = firstCurrentHook;\r\n  if (currentHook === null) {\r\n    // This is a newly mounted hook\r\n     workInProgressHook = createHook();\r\n  } else {\r\n    // Clone the current hook.\r\n    workInProgressHook = cloneHook(currentHook);\r\n  }\r\n  firstWorkInProgressHook = workInProgressHook;\r\n} else {\r\n  // There's already a work-in-progress. Reuse it.\r\n  isReRender = true;\r\n  currentHook = firstCurrentHook;\r\n  workInProgressHook = firstWorkInProgressHook;\r\n}\r\n```\r\n\r\nIf we don't have a `firstWorkInProgressHook`, we need to start building the linked list - which has yet another if statement. But, if we do have one, that means we are already creating a work-in-progress and the first current hook can just be copied!\r\n\r\nThe next if statement down:\r\n\r\n```js\r\nif (currentHook === null) {\r\n  // This is a newly mounted hook\r\n   workInProgressHook = createHook();\r\n} else {\r\n  // Clone the current hook.\r\n  workInProgressHook = cloneHook(currentHook);\r\n}\r\n```\r\n\r\nNow we want to check if we have a current hook. If we don't we are creating a completely new list, which means we call `createHook`.\r\n\r\n\u003e `createHook` just returns a object with a bunch of null set properties. The one we will be interested in the `next` property.\r\n\r\nOtherwise, this is a list that we have already rendered once. React saves some performance by just cloning the hook and moving on, that way it doesn't have to re-create a hook every time this function is called.\r\n\r\nSo now we have our first hook! We set our `firstWorkInProgressHook` to the new one we just made!\r\n\r\n```js \r\nfirstWorkInProgressHook = workInProgressHook;\r\n```\r\n\r\nNow, what happens when we call `createWorkInProgressHook` again?\r\n\r\n```js\r\nfunction createWorkInProgressHook(): Hook {\r\n  if (workInProgressHook === null) {\r\n    // ...\r\n  } else {\r\n    // what happens here?\r\n  }\r\n  return workInProgressHook;\r\n}\r\n```\r\n\r\nLet's look!\r\n\r\nNow that `workInProgressHook` isn't null, we need to check if it has a next hook -\r\n```js\r\nif (workInProgressHook.next === null) {\r\n```\r\n\r\nIf there isn't one, we should create a new hook and append it to the list, which is exactly what happens:\r\n\r\n```js\r\nisReRender = false;\r\nlet hook;\r\nif (currentHook === null) {\r\n  // This is a newly mounted hook\r\n  hook = createHook();\r\n} else {\r\n  currentHook = currentHook.next;\r\n  if (currentHook === null) {\r\n    // This is a newly mounted hook\r\n    hook = createHook();\r\n  } else {\r\n    // Clone the current hook.\r\n    hook = cloneHook(currentHook);\r\n  }\r\n}\r\n// Append to the end of the list\r\nworkInProgressHook = workInProgressHook.next = hook;\r\n```\r\n\r\nSo, again we check if there is a current hook to clone (this time checking to see if the next hook exists, since that let's us know if this hook has been created before). If there is, we clone it, if not we create a new one.\r\n\r\nThen we call this magic line:\r\n\r\n```js\r\nworkInProgressHook = workInProgressHook.next = hook;\r\n```\r\nWhich takes our newly created hook, sets it to the next hook for the current one and then sets the current one equal to the new one. This is basically equivalent to this:\r\n\r\n```js\r\nworkInProgressHook.next = hook;\r\nworkInProgressHook = hook;\r\n```\r\n\r\nFinally, if we do already have a work-in-progress hook, we are rerender, and want to do much the same thing we did the first time:\r\n\r\n```js\r\n} else {\r\n  // There's already a work-in-progress. Reuse it.\r\n  isReRender = true;\r\n  workInProgressHook = workInProgressHook.next;\r\n  currentHook = currentHook !== null ? currentHook.next : null;\r\n}\r\n```\r\n\r\nThe only difference here is we need to update the currentHook to be the next hook before moving one, which is done with that ternary on the last line.\r\n\r\n\r\nWe've created a linked list using some global variables and a a function! That's pretty cool!\r\n\r\nThis honestly might be the first time I've seen a linked list used in actual code! Hopefully, this post made sense! Please let me know if there are any questions!\r\n","canonical_url":null,"show_comments":true,"main_image_background_hex_color":"#dddddd","published_from_feed":false,"comments_count":14,"video":null,"video_code":null,"video_source_url":null,"video_thumbnail_url":null,"video_closed_caption_track_url":null,"feed_source_url":null,"edited_at":null,"crossposted_at":null,"language":null,"cached_tag_list":"beginners, datastructures, react, javascript","path":"/wuz/linked-lists-in-the-wild-react-hooks-3ep8","cached_user_name":"Conlin Durbin","cached_user_username":"wuz","last_comment_at":"2020-02-03T06:47:51.540Z","public_reactions_count":76},{"title":"Verify your git commits with Keybase","slug":"verify-your-git-commits-with-keybase-2lkg-temp-slug-2167278","created_at":"2018-12-18T20:26:04.093Z","main_image":null,"description":"https://blog.scottlowe.org/2017/09/06/using-keybase-gpg-macos/","published":false,"published_at":null,"processed_html":"\u003cp\u003e\u003ca href=\"https://res.cloudinary.com/practicaldev/image/fetch/s--Sigz9END--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/7z9kwk7bjocgvfgcgsdk.png\" class=\"article-body-image-wrapper\"\u003e\u003cimg src=\"https://res.cloudinary.com/practicaldev/image/fetch/s--Sigz9END--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/7z9kwk7bjocgvfgcgsdk.png\" alt=\"verified commits on github\" loading=\"lazy\"\u003e\u003c/a\u003e\u003c/p\u003e\n\n\u003cp\u003e\u003ca href=\"https://blog.scottlowe.org/2017/09/06/using-keybase-gpg-macos/\"\u003ehttps://blog.scottlowe.org/2017/09/06/using-keybase-gpg-macos/\u003c/a\u003e\u003c/p\u003e\n\n","social_image":null,"body_markdown":"---\r\ntitle: Verify your git commits with Keybase\r\npublished: false\r\ndescription: \r\ntags: \r\n---\r\n\r\n![verified commits on github](https://thepracticaldev.s3.amazonaws.com/i/7z9kwk7bjocgvfgcgsdk.png)\r\n\r\nhttps://blog.scottlowe.org/2017/09/06/using-keybase-gpg-macos/","canonical_url":null,"show_comments":true,"main_image_background_hex_color":"#dddddd","published_from_feed":false,"comments_count":0,"video":null,"video_code":null,"video_source_url":null,"video_thumbnail_url":null,"video_closed_caption_track_url":null,"feed_source_url":null,"edited_at":null,"crossposted_at":null,"language":"en","cached_tag_list":"","path":"/wuz/verify-your-git-commits-with-keybase-2lkg-temp-slug-2167278","cached_user_name":"Conlin Durbin","cached_user_username":"wuz","last_comment_at":"2017-01-01T05:00:00.000Z","public_reactions_count":0},{"title":"Welcome to Wellness Wednesday!","slug":"welcome-to-wellness-wednesday-4nd4","created_at":"2018-12-19T22:14:06.376Z","main_image":"https://thepracticaldev.s3.amazonaws.com/i/77i0su08ph8ls41ubs9z.jpg","description":"Take care of yourself this holiday!","published":true,"published_at":"2018-12-19T22:14:06.336Z","processed_html":"\u003ch1\u003e\n  \u003ca name=\"wellness-wednesday\" href=\"#wellness-wednesday\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  Wellness Wednesday\n\u003c/h1\u003e\n\n\u003cp\u003eHey friends! We all spend long hours working at the computer and thinking hard and it can be hard to remember to take care of yourself when there is so much to be done and so little time to do it. With that in mind, I wanted to share a #wellnesswednesday message here once a week!\u003c/p\u003e\n\n\u003ch2\u003e\n  \u003ca name=\"save-your-eyes-with-the-202020-rule\" href=\"#save-your-eyes-with-the-202020-rule\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  Save your eyes with the 20/20/20 rule!\n\u003c/h2\u003e\n\n\u003cp\u003eThis is a common tip, but one that can be easy to forget! I know I often stare at the screen for way too long! Here's the gist: \u003cem\u003eEvery 20 minutes look at something 20ft away for 20 seconds.\u003c/em\u003e If you're like me and often get too focused to remember when 20 minutes has gone by, here are some tips:\u003c/p\u003e\n\n\u003cul\u003e\n\u003cli\u003eSet a timer on your computer, watch, or phone to remind you to look away.\u003c/li\u003e\n\u003cli\u003eFind something to look at - a plant, something out the window, or someone in the office (okay, that one might be a bit creepy).\u003c/li\u003e\n\u003cli\u003eGet a buddy! If you find yourself not following through or dismissing the notifications for \u003cem\u003ejust one more minute\u003c/em\u003e, then consider syncing up with someone at the office. Find someone a bit away, set a notification, and smile/wave/do a little dance, when you both lock eyes.\u003c/li\u003e\n\u003c/ul\u003e\n\n\u003ch2\u003e\n  \u003ca name=\"ill-be-home-for-christmas-or-some-other-reason\" href=\"#ill-be-home-for-christmas-or-some-other-reason\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  I'll be home for Christmas (or some other reason)\n\u003c/h2\u003e\n\n\u003cp\u003eNo matter what your holiday plans, make a commitment to \u003cem\u003ebe\u003c/em\u003e there for it.\u003c/p\u003e\n\n\u003cul\u003e\n\u003cli\u003eIf things get stressful, as they often do around this time, take 5 minutes a few times a day to just \"be\". Just exist for a few minutes - think about how you are feeling, pay attention to your breathing, and take stock of your surroundings.\u003c/li\u003e\n\u003cli\u003ePay attention to what you are eating. Often times around the holidays we eat just because it's what you do. Instead, pay attention to each bite - be thankful for the food, enjoy it, and actually sit down to eat.\u003c/li\u003e\n\u003cli\u003eEngage in gratitude. Take some time to be thankful for what you have. Appreciate where you are, how you got there and the people that helped along the way.\u003c/li\u003e\n\u003cli\u003eRemember to \u003ca href=\"https://dev.to/wuz/leave-loudly-this-holiday--33l7\"\u003eLeave Loudly!\u003c/a\u003e\n\u003c/li\u003e\n\u003c/ul\u003e\n\n\u003cblockquote\u003e\n\u003cp\u003e\u003cem\u003eBonus:\u003c/em\u003e Spend some time doing some good. I'll be delivering toys and food to families around my hometown. It is the most rewarding and fulfilling experience during my holidays. I'd highly recommend finding some way to give back to your community this holiday!\u003c/p\u003e\n\u003c/blockquote\u003e\n\n\u003ch2\u003e\n  \u003ca name=\"weekly-gif\" href=\"#weekly-gif\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  Weekly Gif\n\u003c/h2\u003e\n\n\u003cp\u003eWe could all use some new gifs! Here is mine favorite for this week:\u003c/p\u003e\n\n\u003cp\u003e\u003ca href=\"https://res.cloudinary.com/practicaldev/image/fetch/s--UHsrR35g--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/zt6duln2599vksbxzu2i.gif\" class=\"article-body-image-wrapper\"\u003e\u003cimg src=\"https://res.cloudinary.com/practicaldev/image/fetch/s--UHsrR35g--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/zt6duln2599vksbxzu2i.gif\" alt=\"pizza tree cat\" loading=\"lazy\"\u003e\u003c/a\u003e\u003c/p\u003e\n\n\u003ch2\u003e\n  \u003ca name=\"have-a-great-week\" href=\"#have-a-great-week\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  Have a great week!\n\u003c/h2\u003e\n\n\u003cp\u003eHopefully even if you don't have holiday plans or aren't celebrating anything these tips will still be helpful! We can all use a bit more mindfulness now and then!\u003c/p\u003e\n\n\u003cp\u003eThanks for reading! What holiday survival tips do you have? What is your favorite new gif discovery?\u003c/p\u003e\n\n","social_image":null,"body_markdown":"---\r\ntitle: Welcome to Wellness Wednesday!\r\npublished: true\r\ndescription: Take care of yourself this holiday!\r\ntags: wellnesswednesday, career\r\ncover_image: https://thepracticaldev.s3.amazonaws.com/i/77i0su08ph8ls41ubs9z.jpg\r\n---\r\n\r\n# Wellness Wednesday\r\nHey friends! We all spend long hours working at the computer and thinking hard and it can be hard to remember to take care of yourself when there is so much to be done and so little time to do it. With that in mind, I wanted to share a #wellnesswednesday message here once a week!\r\n\r\n## Save your eyes with the 20/20/20 rule!\r\nThis is a common tip, but one that can be easy to forget! I know I often stare at the screen for way too long! Here's the gist: *Every 20 minutes look at something 20ft away for 20 seconds.* If you're like me and often get too focused to remember when 20 minutes has gone by, here are some tips:\r\n- Set a timer on your computer, watch, or phone to remind you to look away.\r\n- Find something to look at - a plant, something out the window, or someone in the office (okay, that one might be a bit creepy).\r\n- Get a buddy! If you find yourself not following through or dismissing the notifications for _just one more minute_, then consider syncing up with someone at the office. Find someone a bit away, set a notification, and smile/wave/do a little dance, when you both lock eyes.\r\n\r\n## I'll be home for Christmas (or some other reason)\r\nNo matter what your holiday plans, make a commitment to _be_ there for it.\r\n- If things get stressful, as they often do around this time, take 5 minutes a few times a day to just \"be\". Just exist for a few minutes - think about how you are feeling, pay attention to your breathing, and take stock of your surroundings.\r\n- Pay attention to what you are eating. Often times around the holidays we eat just because it's what you do. Instead, pay attention to each bite - be thankful for the food, enjoy it, and actually sit down to eat.\r\n- Engage in gratitude. Take some time to be thankful for what you have. Appreciate where you are, how you got there and the people that helped along the way.\r\n- Remember to [Leave Loudly!](https://dev.to/wuz/leave-loudly-this-holiday--33l7)\r\n\r\n\u003e *Bonus:* Spend some time doing some good. I'll be delivering toys and food to families around my hometown. It is the most rewarding and fulfilling experience during my holidays. I'd highly recommend finding some way to give back to your community this holiday!\r\n\r\n## Weekly Gif\r\n\r\nWe could all use some new gifs! Here is mine favorite for this week:\r\n\r\n![pizza tree cat](https://thepracticaldev.s3.amazonaws.com/i/zt6duln2599vksbxzu2i.gif)\r\n\r\n## Have a great week!\r\n\r\nHopefully even if you don't have holiday plans or aren't celebrating anything these tips will still be helpful! We can all use a bit more mindfulness now and then!\r\n\r\nThanks for reading! What holiday survival tips do you have? What is your favorite new gif discovery?\r\n","canonical_url":null,"show_comments":true,"main_image_background_hex_color":"#dddddd","published_from_feed":false,"comments_count":3,"video":null,"video_code":null,"video_source_url":null,"video_thumbnail_url":null,"video_closed_caption_track_url":null,"feed_source_url":null,"edited_at":null,"crossposted_at":null,"language":"en","cached_tag_list":"wellnesswednesday, career","path":"/wuz/welcome-to-wellness-wednesday-4nd4","cached_user_name":"Conlin Durbin","cached_user_username":"wuz","last_comment_at":"2018-12-20T17:18:51.298Z","public_reactions_count":11},{"title":"What books do you want to read next year?","slug":"what-books-do-you-want-to-read-next-year-295l","created_at":"2018-12-20T15:11:49.553Z","main_image":"https://thepracticaldev.s3.amazonaws.com/i/3ppj5ehsv2n3dz3z8pom.jpg","description":"Hey DEVers! As we go into 2019, I am reviewing my to-read list.   Here are a few of my top picks that...","published":true,"published_at":"2018-12-20T15:11:49.519Z","processed_html":"\u003cp\u003eHey DEVers! As we go into 2019, I am reviewing my to-read list. \u003c/p\u003e\n\n\u003cp\u003eHere are a few of my top picks that I am going to hop into soon:\u003c/p\u003e\n\n\u003cul\u003e\n\u003cli\u003e\n\u003ca href=\"https://www.amazon.com/Mythical-Man-Month-Software-Engineering-Anniversary/dp/0201835959\"\u003eThe Mythical Man-Month\u003c/a\u003e - Frederick P. Brooks Jr.\u003c/li\u003e\n\u003cli\u003e\n\u003ca href=\"https://www.amazon.com/Sense-Style-Thinking-Persons-Writing/dp/0143127799\"\u003eThe Sense of Style\u003c/a\u003e - Steven Pinker\u003c/li\u003e\n\u003cli\u003e\n\u003ca href=\"https://www.amazon.com/dp/1633693643/?coliid=I2JXIG80FWNDW9\u0026amp;colid=2LLLIOPZXIG8Q\u0026amp;psc=0\u0026amp;ref_=lv_ov_lig_dp_it\"\u003eBuild an A-Team\u003c/a\u003e - Whitney Johnson\u003c/li\u003e\n\u003c/ul\u003e\n\n\u003cp\u003e\u003cstrong\u003eWhat books do you want to read next year?\u003c/strong\u003e\u003c/p\u003e\n\n","social_image":null,"body_markdown":"---\r\ntitle: What books do you want to read next year?\r\npublished: true\r\ncover_image: https://thepracticaldev.s3.amazonaws.com/i/3ppj5ehsv2n3dz3z8pom.jpg\r\ntags: discuss, career, books\r\n---\r\n\r\nHey DEVers! As we go into 2019, I am reviewing my to-read list. \r\n\r\nHere are a few of my top picks that I am going to hop into soon:\r\n\r\n- [The Mythical Man-Month](https://www.amazon.com/Mythical-Man-Month-Software-Engineering-Anniversary/dp/0201835959) - Frederick P. Brooks Jr.\r\n- [The Sense of Style](https://www.amazon.com/Sense-Style-Thinking-Persons-Writing/dp/0143127799) - Steven Pinker\r\n- [Build an A-Team](https://www.amazon.com/dp/1633693643/?coliid=I2JXIG80FWNDW9\u0026colid=2LLLIOPZXIG8Q\u0026psc=0\u0026ref_=lv_ov_lig_dp_it) - Whitney Johnson\r\n\r\n**What books do you want to read next year?**","canonical_url":null,"show_comments":true,"main_image_background_hex_color":"#dddddd","published_from_feed":false,"comments_count":7,"video":null,"video_code":null,"video_source_url":null,"video_thumbnail_url":null,"video_closed_caption_track_url":null,"feed_source_url":null,"edited_at":"2018-12-20T15:11:57.294Z","crossposted_at":null,"language":null,"cached_tag_list":"discuss, career, books","path":"/wuz/what-books-do-you-want-to-read-next-year-295l","cached_user_name":"Conlin Durbin","cached_user_username":"wuz","last_comment_at":"2020-04-16T10:28:40.096Z","public_reactions_count":18},{"title":"Setting up a `npx username` card!","slug":"setting-up-a-npx-username-card-1pip","created_at":"2018-12-20T16:53:15.120Z","main_image":null,"description":"A simple idea for an awesome community!","published":true,"published_at":"2018-12-26T21:47:08.009Z","processed_html":"\u003cp\u003eI recently saw this awesome post from \u003ca href=\"https://dev.to/bnb\"\u003ebnb\u003c/a\u003e on Twitter:\u003c/p\u003e\n\n\n\u003cblockquote class=\"ltag__twitter-tweet\" data-url=\"https://twitter.com/bitandbang/status/1075473070368919552\"\u003e\n      \u003cdiv class=\"ltag__twitter-tweet__media\"\u003e\n        \u003cimg src=\"https://res.cloudinary.com/practicaldev/image/fetch/s--uJeZRzHS--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://pbs.twimg.com/media/DuzZACYUUAEmSlT.png\" alt=\"unknown tweet media content\" loading=\"lazy\"\u003e\n      \u003c/div\u003e\n\n  \u003cdiv class=\"ltag__twitter-tweet__main\" data-url=\"https://twitter.com/bitandbang/status/1075473070368919552\"\u003e\n    \u003cdiv class=\"ltag__twitter-tweet__header\"\u003e\n      \u003cimg class=\"ltag__twitter-tweet__profile-image\" src=\"https://res.cloudinary.com/practicaldev/image/fetch/s--kufAN7cv--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://pbs.twimg.com/profile_images/1049324877340192770/hvHeuHuN_normal.jpg\" alt=\"Tierney Cyren profile image\" loading=\"lazy\"\u003e\n      \u003cdiv class=\"ltag__twitter-tweet__full-name\"\u003e\n        Tierney Cyren\n      \u003c/div\u003e\n      \u003cdiv class=\"ltag__twitter-tweet__username\"\u003e\n        @bitandbang\n      \u003c/div\u003e\n      \u003cdiv class=\"ltag__twitter-tweet__twitter-logo\"\u003e\n        \u003cimg src=\"https://res.cloudinary.com/practicaldev/image/fetch/s--P4t6ys1m--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://practicaldev-herokuapp-com.freetls.fastly.net/assets/twitter-f95605061196010f91e64806688390eb1a4dbc9e913682e043eb8b1e06ca484f.svg\" alt=\"twitter logo\" loading=\"lazy\"\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"ltag__twitter-tweet__body\"\u003e\n      Updated my business card 😎 \n    \u003c/div\u003e\n    \u003cdiv class=\"ltag__twitter-tweet__date\"\u003e\n      19:28 PM - 19 Dec 2018\n    \u003c/div\u003e\n\n\n    \u003cdiv class=\"ltag__twitter-tweet__actions\"\u003e\n      \u003ca href=\"https://twitter.com/intent/tweet?in_reply_to=1075473070368919552\" class=\"ltag__twitter-tweet__actions__button\"\u003e\n        \u003cimg src=\"/assets/twitter-reply-action.svg\" alt=\"Twitter reply action\" loading=\"lazy\"\u003e\n      \u003c/a\u003e\n      \u003ca href=\"https://twitter.com/intent/retweet?tweet_id=1075473070368919552\" class=\"ltag__twitter-tweet__actions__button\"\u003e\n        \u003cimg src=\"/assets/twitter-retweet-action.svg\" alt=\"Twitter retweet action\" loading=\"lazy\"\u003e\n      \u003c/a\u003e\n      60\n      \u003ca href=\"https://twitter.com/intent/like?tweet_id=1075473070368919552\" class=\"ltag__twitter-tweet__actions__button\"\u003e\n        \u003cimg src=\"/assets/twitter-like-action.svg\" alt=\"Twitter like action\" loading=\"lazy\"\u003e\n      \u003c/a\u003e\n      658\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/blockquote\u003e\n\n\n\u003cp\u003eThe community response has been awesome and I quickly knew I wanted to make my own:\u003c/p\u003e\n\n\n\u003cblockquote class=\"ltag__twitter-tweet\" data-url=\"https://twitter.com/callmewuz/status/1075789700898664450\"\u003e\n      \u003cdiv class=\"ltag__twitter-tweet__media\"\u003e\n        \u003cimg src=\"https://res.cloudinary.com/practicaldev/image/fetch/s--S1bLXlWh--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://pbs.twimg.com/media/Du34_7HU8AcPrZc.jpg\" alt=\"unknown tweet media content\" loading=\"lazy\"\u003e\n      \u003c/div\u003e\n\n  \u003cdiv class=\"ltag__twitter-tweet__main\" data-url=\"https://twitter.com/callmewuz/status/1075789700898664450\"\u003e\n    \u003cdiv class=\"ltag__twitter-tweet__header\"\u003e\n      \u003cimg class=\"ltag__twitter-tweet__profile-image\" src=\"https://res.cloudinary.com/practicaldev/image/fetch/s--Wn0_iyal--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://pbs.twimg.com/profile_images/1032978917076787200/tEeqlpGD_normal.jpg\" alt=\"🧙‍♂️Conlin Durbin profile image\" loading=\"lazy\"\u003e\n      \u003cdiv class=\"ltag__twitter-tweet__full-name\"\u003e\n        🧙‍♂️Conlin Durbin\n      \u003c/div\u003e\n      \u003cdiv class=\"ltag__twitter-tweet__username\"\u003e\n        @callmewuz\n      \u003c/div\u003e\n      \u003cdiv class=\"ltag__twitter-tweet__twitter-logo\"\u003e\n        \u003cimg src=\"https://res.cloudinary.com/practicaldev/image/fetch/s--P4t6ys1m--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://practicaldev-herokuapp-com.freetls.fastly.net/assets/twitter-f95605061196010f91e64806688390eb1a4dbc9e913682e043eb8b1e06ca484f.svg\" alt=\"twitter logo\" loading=\"lazy\"\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"ltag__twitter-tweet__body\"\u003e\n      Such a fantastic idea by \u003ca href=\"https://twitter.com/bitandbang\"\u003e@bitandbang\u003c/a\u003e! \n    \u003c/div\u003e\n    \u003cdiv class=\"ltag__twitter-tweet__date\"\u003e\n      16:27 PM - 20 Dec 2018\n    \u003c/div\u003e\n\n\n    \u003cdiv class=\"ltag__twitter-tweet__actions\"\u003e\n      \u003ca href=\"https://twitter.com/intent/tweet?in_reply_to=1075789700898664450\" class=\"ltag__twitter-tweet__actions__button\"\u003e\n        \u003cimg src=\"/assets/twitter-reply-action.svg\" alt=\"Twitter reply action\" loading=\"lazy\"\u003e\n      \u003c/a\u003e\n      \u003ca href=\"https://twitter.com/intent/retweet?tweet_id=1075789700898664450\" class=\"ltag__twitter-tweet__actions__button\"\u003e\n        \u003cimg src=\"/assets/twitter-retweet-action.svg\" alt=\"Twitter retweet action\" loading=\"lazy\"\u003e\n      \u003c/a\u003e\n      0\n      \u003ca href=\"https://twitter.com/intent/like?tweet_id=1075789700898664450\" class=\"ltag__twitter-tweet__actions__button\"\u003e\n        \u003cimg src=\"/assets/twitter-like-action.svg\" alt=\"Twitter like action\" loading=\"lazy\"\u003e\n      \u003c/a\u003e\n      0\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/blockquote\u003e\n\n\n\u003cp\u003eToday, I wanted to show everyone the process of making one.\u003c/p\u003e\n\n\u003cp\u003eFirst, let's clone the repo:\u003cbr\u003e\n\u003c/p\u003e\n\n\u003cdiv class=\"highlight\"\u003e\u003cpre class=\"highlight plaintext\"\u003e\u003ccode\u003egit clone https://github.com/bnb/bitandbang\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\n\n\n\n\u003cp\u003eNow, we need to edit some stuff. First, let's open up the \u003ccode\u003epackage.json\u003c/code\u003e and update some of the details. First, change the package name:\u003cbr\u003e\n\u003c/p\u003e\n\n\u003cdiv class=\"highlight\"\u003e\u003cpre class=\"highlight plaintext\"\u003e\u003ccode\u003ename: \u0026lt;your username\u0026gt;\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\n\n\n\n\u003cp\u003eThis will let you publish to npm and get your card with \u003ccode\u003enpx \u0026lt;your_username\u0026gt;\u003c/code\u003e.\u003c/p\u003e\n\n\u003cp\u003eYou can also update the description and author fields to reflect your information.\u003c/p\u003e\n\n\u003cp\u003eIf we run \u003ccode\u003enpm run dev\u003c/code\u003e, we'll see that Tierney's information shows up. Let's make it your card.\u003c/p\u003e\n\n\u003cp\u003eOpen up \u003ccode\u003ebuild.js\u003c/code\u003e:\u003cbr\u003e\n\u003c/p\u003e\n\n\u003cdiv class=\"highlight\"\u003e\u003cpre class=\"highlight javascript\"\u003e\u003ccode\u003e\u003cspan class=\"dl\"\u003e'\u003c/span\u003e\u003cspan class=\"s1\"\u003euse strict\u003c/span\u003e\u003cspan class=\"dl\"\u003e'\u003c/span\u003e\n\n\u003cspan class=\"c1\"\u003e// Pull in our modules\u003c/span\u003e\n\u003cspan class=\"kd\"\u003econst\u003c/span\u003e \u003cspan class=\"nx\"\u003echalk\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"nx\"\u003erequire\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"dl\"\u003e'\u003c/span\u003e\u003cspan class=\"s1\"\u003echalk\u003c/span\u003e\u003cspan class=\"dl\"\u003e'\u003c/span\u003e\u003cspan class=\"p\"\u003e)\u003c/span\u003e\n\u003cspan class=\"kd\"\u003econst\u003c/span\u003e \u003cspan class=\"nx\"\u003eboxen\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"nx\"\u003erequire\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"dl\"\u003e'\u003c/span\u003e\u003cspan class=\"s1\"\u003eboxen\u003c/span\u003e\u003cspan class=\"dl\"\u003e'\u003c/span\u003e\u003cspan class=\"p\"\u003e)\u003c/span\u003e\n\u003cspan class=\"kd\"\u003econst\u003c/span\u003e \u003cspan class=\"nx\"\u003efs\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"nx\"\u003erequire\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"dl\"\u003e'\u003c/span\u003e\u003cspan class=\"s1\"\u003efs\u003c/span\u003e\u003cspan class=\"dl\"\u003e'\u003c/span\u003e\u003cspan class=\"p\"\u003e)\u003c/span\u003e\n\u003cspan class=\"kd\"\u003econst\u003c/span\u003e \u003cspan class=\"nx\"\u003epath\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"nx\"\u003erequire\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"dl\"\u003e'\u003c/span\u003e\u003cspan class=\"s1\"\u003epath\u003c/span\u003e\u003cspan class=\"dl\"\u003e'\u003c/span\u003e\u003cspan class=\"p\"\u003e)\u003c/span\u003e\n\n\u003cspan class=\"c1\"\u003e// Define options for Boxen\u003c/span\u003e\n\u003cspan class=\"kd\"\u003econst\u003c/span\u003e \u003cspan class=\"nx\"\u003eoptions\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"p\"\u003e{\u003c/span\u003e\n  \u003cspan class=\"na\"\u003epadding\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e \u003cspan class=\"mi\"\u003e1\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e\n  \u003cspan class=\"na\"\u003emargin\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e \u003cspan class=\"mi\"\u003e1\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e\n  \u003cspan class=\"na\"\u003eborderStyle\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e \u003cspan class=\"dl\"\u003e'\u003c/span\u003e\u003cspan class=\"s1\"\u003eround\u003c/span\u003e\u003cspan class=\"dl\"\u003e'\u003c/span\u003e\n\u003cspan class=\"p\"\u003e}\u003c/span\u003e\n\n\u003cspan class=\"c1\"\u003e// Text + chalk definitions\u003c/span\u003e\n\u003cspan class=\"kd\"\u003econst\u003c/span\u003e \u003cspan class=\"nx\"\u003edata\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"p\"\u003e{\u003c/span\u003e\n  \u003cspan class=\"na\"\u003ename\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e \u003cspan class=\"nx\"\u003echalk\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003ewhite\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"dl\"\u003e'\u003c/span\u003e\u003cspan class=\"s1\"\u003e               Tierney Cyren\u003c/span\u003e\u003cspan class=\"dl\"\u003e'\u003c/span\u003e\u003cspan class=\"p\"\u003e),\u003c/span\u003e\n  \u003cspan class=\"na\"\u003ehandle\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e \u003cspan class=\"nx\"\u003echalk\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003ewhite\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"dl\"\u003e'\u003c/span\u003e\u003cspan class=\"s1\"\u003ebitandbang\u003c/span\u003e\u003cspan class=\"dl\"\u003e'\u003c/span\u003e\u003cspan class=\"p\"\u003e),\u003c/span\u003e\n  \u003cspan class=\"na\"\u003ework\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e \u003cspan class=\"nx\"\u003echalk\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003ewhite\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"dl\"\u003e'\u003c/span\u003e\u003cspan class=\"s1\"\u003eSenior Cloud Developer Advocate at Microsoft\u003c/span\u003e\u003cspan class=\"dl\"\u003e'\u003c/span\u003e\u003cspan class=\"p\"\u003e),\u003c/span\u003e\n  \u003cspan class=\"na\"\u003eopensource\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e \u003cspan class=\"nx\"\u003echalk\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003ewhite\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"dl\"\u003e'\u003c/span\u003e\u003cspan class=\"s1\"\u003eNode.js Community Committee \u003c/span\u003e\u003cspan class=\"dl\"\u003e'\u003c/span\u003e\u003cspan class=\"p\"\u003e)\u003c/span\u003e \u003cspan class=\"o\"\u003e+\u003c/span\u003e \u003cspan class=\"nx\"\u003echalk\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003egreen\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"dl\"\u003e'\u003c/span\u003e\u003cspan class=\"s1\"\u003e⬢\u003c/span\u003e\u003cspan class=\"dl\"\u003e'\u003c/span\u003e\u003cspan class=\"p\"\u003e),\u003c/span\u003e\n  \u003cspan class=\"na\"\u003etwitter\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e \u003cspan class=\"nx\"\u003echalk\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003egray\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"dl\"\u003e'\u003c/span\u003e\u003cspan class=\"s1\"\u003ehttps://twitter.com/\u003c/span\u003e\u003cspan class=\"dl\"\u003e'\u003c/span\u003e\u003cspan class=\"p\"\u003e)\u003c/span\u003e \u003cspan class=\"o\"\u003e+\u003c/span\u003e \u003cspan class=\"nx\"\u003echalk\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003ecyan\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"dl\"\u003e'\u003c/span\u003e\u003cspan class=\"s1\"\u003ebitandbang\u003c/span\u003e\u003cspan class=\"dl\"\u003e'\u003c/span\u003e\u003cspan class=\"p\"\u003e),\u003c/span\u003e\n  \u003cspan class=\"na\"\u003enpm\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e \u003cspan class=\"nx\"\u003echalk\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003egray\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"dl\"\u003e'\u003c/span\u003e\u003cspan class=\"s1\"\u003ehttps://npmjs.com/\u003c/span\u003e\u003cspan class=\"dl\"\u003e'\u003c/span\u003e\u003cspan class=\"p\"\u003e)\u003c/span\u003e \u003cspan class=\"o\"\u003e+\u003c/span\u003e \u003cspan class=\"nx\"\u003echalk\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003ered\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"dl\"\u003e'\u003c/span\u003e\u003cspan class=\"s1\"\u003e~bnb\u003c/span\u003e\u003cspan class=\"dl\"\u003e'\u003c/span\u003e\u003cspan class=\"p\"\u003e),\u003c/span\u003e\n  \u003cspan class=\"na\"\u003egithub\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e \u003cspan class=\"nx\"\u003echalk\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003egray\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"dl\"\u003e'\u003c/span\u003e\u003cspan class=\"s1\"\u003ehttps://github.com/\u003c/span\u003e\u003cspan class=\"dl\"\u003e'\u003c/span\u003e\u003cspan class=\"p\"\u003e)\u003c/span\u003e \u003cspan class=\"o\"\u003e+\u003c/span\u003e \u003cspan class=\"nx\"\u003echalk\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003egreen\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"dl\"\u003e'\u003c/span\u003e\u003cspan class=\"s1\"\u003ebnb\u003c/span\u003e\u003cspan class=\"dl\"\u003e'\u003c/span\u003e\u003cspan class=\"p\"\u003e),\u003c/span\u003e\n  \u003cspan class=\"na\"\u003elinkedin\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e \u003cspan class=\"nx\"\u003echalk\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003egray\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"dl\"\u003e'\u003c/span\u003e\u003cspan class=\"s1\"\u003ehttps://linkedin.com/in/\u003c/span\u003e\u003cspan class=\"dl\"\u003e'\u003c/span\u003e\u003cspan class=\"p\"\u003e)\u003c/span\u003e \u003cspan class=\"o\"\u003e+\u003c/span\u003e \u003cspan class=\"nx\"\u003echalk\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003eblue\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"dl\"\u003e'\u003c/span\u003e\u003cspan class=\"s1\"\u003ebitandbang\u003c/span\u003e\u003cspan class=\"dl\"\u003e'\u003c/span\u003e\u003cspan class=\"p\"\u003e),\u003c/span\u003e\n  \u003cspan class=\"na\"\u003eweb\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e \u003cspan class=\"nx\"\u003echalk\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003ecyan\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"dl\"\u003e'\u003c/span\u003e\u003cspan class=\"s1\"\u003ehttps://bnb.im\u003c/span\u003e\u003cspan class=\"dl\"\u003e'\u003c/span\u003e\u003cspan class=\"p\"\u003e),\u003c/span\u003e\n  \u003cspan class=\"na\"\u003enpx\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e \u003cspan class=\"nx\"\u003echalk\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003ered\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"dl\"\u003e'\u003c/span\u003e\u003cspan class=\"s1\"\u003enpx\u003c/span\u003e\u003cspan class=\"dl\"\u003e'\u003c/span\u003e\u003cspan class=\"p\"\u003e)\u003c/span\u003e \u003cspan class=\"o\"\u003e+\u003c/span\u003e \u003cspan class=\"dl\"\u003e'\u003c/span\u003e\u003cspan class=\"s1\"\u003e \u003c/span\u003e\u003cspan class=\"dl\"\u003e'\u003c/span\u003e \u003cspan class=\"o\"\u003e+\u003c/span\u003e \u003cspan class=\"nx\"\u003echalk\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003ewhite\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"dl\"\u003e'\u003c/span\u003e\u003cspan class=\"s1\"\u003ebitandbang\u003c/span\u003e\u003cspan class=\"dl\"\u003e'\u003c/span\u003e\u003cspan class=\"p\"\u003e),\u003c/span\u003e\n  \u003cspan class=\"na\"\u003elabelWork\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e \u003cspan class=\"nx\"\u003echalk\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003ewhite\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003ebold\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"dl\"\u003e'\u003c/span\u003e\u003cspan class=\"s1\"\u003e       Work:\u003c/span\u003e\u003cspan class=\"dl\"\u003e'\u003c/span\u003e\u003cspan class=\"p\"\u003e),\u003c/span\u003e\n  \u003cspan class=\"na\"\u003elabelOpenSource\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e \u003cspan class=\"nx\"\u003echalk\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003ewhite\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003ebold\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"dl\"\u003e'\u003c/span\u003e\u003cspan class=\"s1\"\u003eOpen Source:\u003c/span\u003e\u003cspan class=\"dl\"\u003e'\u003c/span\u003e\u003cspan class=\"p\"\u003e),\u003c/span\u003e\n  \u003cspan class=\"na\"\u003elabelTwitter\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e \u003cspan class=\"nx\"\u003echalk\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003ewhite\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003ebold\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"dl\"\u003e'\u003c/span\u003e\u003cspan class=\"s1\"\u003e    Twitter:\u003c/span\u003e\u003cspan class=\"dl\"\u003e'\u003c/span\u003e\u003cspan class=\"p\"\u003e),\u003c/span\u003e\n  \u003cspan class=\"na\"\u003elabelnpm\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e \u003cspan class=\"nx\"\u003echalk\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003ewhite\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003ebold\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"dl\"\u003e'\u003c/span\u003e\u003cspan class=\"s1\"\u003e        npm:\u003c/span\u003e\u003cspan class=\"dl\"\u003e'\u003c/span\u003e\u003cspan class=\"p\"\u003e),\u003c/span\u003e\n  \u003cspan class=\"na\"\u003elabelGitHub\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e \u003cspan class=\"nx\"\u003echalk\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003ewhite\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003ebold\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"dl\"\u003e'\u003c/span\u003e\u003cspan class=\"s1\"\u003e     GitHub:\u003c/span\u003e\u003cspan class=\"dl\"\u003e'\u003c/span\u003e\u003cspan class=\"p\"\u003e),\u003c/span\u003e\n  \u003cspan class=\"na\"\u003elabelLinkedIn\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e \u003cspan class=\"nx\"\u003echalk\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003ewhite\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003ebold\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"dl\"\u003e'\u003c/span\u003e\u003cspan class=\"s1\"\u003e   LinkedIn:\u003c/span\u003e\u003cspan class=\"dl\"\u003e'\u003c/span\u003e\u003cspan class=\"p\"\u003e),\u003c/span\u003e\n  \u003cspan class=\"na\"\u003elabelWeb\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e \u003cspan class=\"nx\"\u003echalk\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003ewhite\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003ebold\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"dl\"\u003e'\u003c/span\u003e\u003cspan class=\"s1\"\u003e        Web:\u003c/span\u003e\u003cspan class=\"dl\"\u003e'\u003c/span\u003e\u003cspan class=\"p\"\u003e),\u003c/span\u003e\n  \u003cspan class=\"na\"\u003elabelCard\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e \u003cspan class=\"nx\"\u003echalk\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003ewhite\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003ebold\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"dl\"\u003e'\u003c/span\u003e\u003cspan class=\"s1\"\u003e       Card:\u003c/span\u003e\u003cspan class=\"dl\"\u003e'\u003c/span\u003e\u003cspan class=\"p\"\u003e)\u003c/span\u003e\n\u003cspan class=\"p\"\u003e}\u003c/span\u003e\n\n\u003cspan class=\"c1\"\u003e// Actual strings we're going to output\u003c/span\u003e\n\u003cspan class=\"kd\"\u003econst\u003c/span\u003e \u003cspan class=\"nx\"\u003enewline\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"dl\"\u003e'\u003c/span\u003e\u003cspan class=\"se\"\u003e\\n\u003c/span\u003e\u003cspan class=\"dl\"\u003e'\u003c/span\u003e\n\u003cspan class=\"kd\"\u003econst\u003c/span\u003e \u003cspan class=\"nx\"\u003eheading\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"s2\"\u003e`\u003c/span\u003e\u003cspan class=\"p\"\u003e${\u003c/span\u003e\u003cspan class=\"nx\"\u003edata\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003ename\u003c/span\u003e\u003cspan class=\"p\"\u003e}\u003c/span\u003e\u003cspan class=\"s2\"\u003e / \u003c/span\u003e\u003cspan class=\"p\"\u003e${\u003c/span\u003e\u003cspan class=\"nx\"\u003edata\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003ehandle\u003c/span\u003e\u003cspan class=\"p\"\u003e}\u003c/span\u003e\u003cspan class=\"s2\"\u003e`\u003c/span\u003e\n\u003cspan class=\"kd\"\u003econst\u003c/span\u003e \u003cspan class=\"nx\"\u003eworking\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"s2\"\u003e`\u003c/span\u003e\u003cspan class=\"p\"\u003e${\u003c/span\u003e\u003cspan class=\"nx\"\u003edata\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003elabelWork\u003c/span\u003e\u003cspan class=\"p\"\u003e}\u003c/span\u003e\u003cspan class=\"s2\"\u003e  \u003c/span\u003e\u003cspan class=\"p\"\u003e${\u003c/span\u003e\u003cspan class=\"nx\"\u003edata\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003ework\u003c/span\u003e\u003cspan class=\"p\"\u003e}\u003c/span\u003e\u003cspan class=\"s2\"\u003e`\u003c/span\u003e\n\u003cspan class=\"kd\"\u003econst\u003c/span\u003e \u003cspan class=\"nx\"\u003eopensourcing\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"s2\"\u003e`\u003c/span\u003e\u003cspan class=\"p\"\u003e${\u003c/span\u003e\u003cspan class=\"nx\"\u003edata\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003elabelOpenSource\u003c/span\u003e\u003cspan class=\"p\"\u003e}\u003c/span\u003e\u003cspan class=\"s2\"\u003e  \u003c/span\u003e\u003cspan class=\"p\"\u003e${\u003c/span\u003e\u003cspan class=\"nx\"\u003edata\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003eopensource\u003c/span\u003e\u003cspan class=\"p\"\u003e}\u003c/span\u003e\u003cspan class=\"s2\"\u003e`\u003c/span\u003e\n\u003cspan class=\"kd\"\u003econst\u003c/span\u003e \u003cspan class=\"nx\"\u003etwittering\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"s2\"\u003e`\u003c/span\u003e\u003cspan class=\"p\"\u003e${\u003c/span\u003e\u003cspan class=\"nx\"\u003edata\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003elabelTwitter\u003c/span\u003e\u003cspan class=\"p\"\u003e}\u003c/span\u003e\u003cspan class=\"s2\"\u003e  \u003c/span\u003e\u003cspan class=\"p\"\u003e${\u003c/span\u003e\u003cspan class=\"nx\"\u003edata\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003etwitter\u003c/span\u003e\u003cspan class=\"p\"\u003e}\u003c/span\u003e\u003cspan class=\"s2\"\u003e`\u003c/span\u003e\n\u003cspan class=\"kd\"\u003econst\u003c/span\u003e \u003cspan class=\"nx\"\u003enpming\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"s2\"\u003e`\u003c/span\u003e\u003cspan class=\"p\"\u003e${\u003c/span\u003e\u003cspan class=\"nx\"\u003edata\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003elabelnpm\u003c/span\u003e\u003cspan class=\"p\"\u003e}\u003c/span\u003e\u003cspan class=\"s2\"\u003e  \u003c/span\u003e\u003cspan class=\"p\"\u003e${\u003c/span\u003e\u003cspan class=\"nx\"\u003edata\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003enpm\u003c/span\u003e\u003cspan class=\"p\"\u003e}\u003c/span\u003e\u003cspan class=\"s2\"\u003e`\u003c/span\u003e\n\u003cspan class=\"kd\"\u003econst\u003c/span\u003e \u003cspan class=\"nx\"\u003egithubing\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"s2\"\u003e`\u003c/span\u003e\u003cspan class=\"p\"\u003e${\u003c/span\u003e\u003cspan class=\"nx\"\u003edata\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003elabelGitHub\u003c/span\u003e\u003cspan class=\"p\"\u003e}\u003c/span\u003e\u003cspan class=\"s2\"\u003e  \u003c/span\u003e\u003cspan class=\"p\"\u003e${\u003c/span\u003e\u003cspan class=\"nx\"\u003edata\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003egithub\u003c/span\u003e\u003cspan class=\"p\"\u003e}\u003c/span\u003e\u003cspan class=\"s2\"\u003e`\u003c/span\u003e\n\u003cspan class=\"kd\"\u003econst\u003c/span\u003e \u003cspan class=\"nx\"\u003elinkedining\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"s2\"\u003e`\u003c/span\u003e\u003cspan class=\"p\"\u003e${\u003c/span\u003e\u003cspan class=\"nx\"\u003edata\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003elabelLinkedIn\u003c/span\u003e\u003cspan class=\"p\"\u003e}\u003c/span\u003e\u003cspan class=\"s2\"\u003e  \u003c/span\u003e\u003cspan class=\"p\"\u003e${\u003c/span\u003e\u003cspan class=\"nx\"\u003edata\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003elinkedin\u003c/span\u003e\u003cspan class=\"p\"\u003e}\u003c/span\u003e\u003cspan class=\"s2\"\u003e`\u003c/span\u003e\n\u003cspan class=\"kd\"\u003econst\u003c/span\u003e \u003cspan class=\"nx\"\u003ewebing\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"s2\"\u003e`\u003c/span\u003e\u003cspan class=\"p\"\u003e${\u003c/span\u003e\u003cspan class=\"nx\"\u003edata\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003elabelWeb\u003c/span\u003e\u003cspan class=\"p\"\u003e}\u003c/span\u003e\u003cspan class=\"s2\"\u003e  \u003c/span\u003e\u003cspan class=\"p\"\u003e${\u003c/span\u003e\u003cspan class=\"nx\"\u003edata\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003eweb\u003c/span\u003e\u003cspan class=\"p\"\u003e}\u003c/span\u003e\u003cspan class=\"s2\"\u003e`\u003c/span\u003e\n\u003cspan class=\"kd\"\u003econst\u003c/span\u003e \u003cspan class=\"nx\"\u003ecarding\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"s2\"\u003e`\u003c/span\u003e\u003cspan class=\"p\"\u003e${\u003c/span\u003e\u003cspan class=\"nx\"\u003edata\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003elabelCard\u003c/span\u003e\u003cspan class=\"p\"\u003e}\u003c/span\u003e\u003cspan class=\"s2\"\u003e  \u003c/span\u003e\u003cspan class=\"p\"\u003e${\u003c/span\u003e\u003cspan class=\"nx\"\u003edata\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003enpx\u003c/span\u003e\u003cspan class=\"p\"\u003e}\u003c/span\u003e\u003cspan class=\"s2\"\u003e`\u003c/span\u003e\n\n\u003cspan class=\"c1\"\u003e// Put all our output together into a single variable so we can use boxen effectively\u003c/span\u003e\n\u003cspan class=\"kd\"\u003econst\u003c/span\u003e \u003cspan class=\"nx\"\u003eoutput\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"nx\"\u003eheading\u003c/span\u003e \u003cspan class=\"o\"\u003e+\u003c/span\u003e \u003cspan class=\"c1\"\u003e// data.name + data.handle\u003c/span\u003e\n               \u003cspan class=\"nx\"\u003enewline\u003c/span\u003e \u003cspan class=\"o\"\u003e+\u003c/span\u003e \u003cspan class=\"nx\"\u003enewline\u003c/span\u003e \u003cspan class=\"o\"\u003e+\u003c/span\u003e \u003cspan class=\"c1\"\u003e// Add one whole blank line\u003c/span\u003e\n               \u003cspan class=\"nx\"\u003eworking\u003c/span\u003e \u003cspan class=\"o\"\u003e+\u003c/span\u003e \u003cspan class=\"nx\"\u003enewline\u003c/span\u003e \u003cspan class=\"o\"\u003e+\u003c/span\u003e \u003cspan class=\"c1\"\u003e// data.labelWork + data.work\u003c/span\u003e\n               \u003cspan class=\"nx\"\u003eopensourcing\u003c/span\u003e \u003cspan class=\"o\"\u003e+\u003c/span\u003e \u003cspan class=\"nx\"\u003enewline\u003c/span\u003e \u003cspan class=\"o\"\u003e+\u003c/span\u003e \u003cspan class=\"nx\"\u003enewline\u003c/span\u003e \u003cspan class=\"o\"\u003e+\u003c/span\u003e \u003cspan class=\"c1\"\u003e// data.labelOpenSource + data.opensource\u003c/span\u003e\n               \u003cspan class=\"nx\"\u003etwittering\u003c/span\u003e \u003cspan class=\"o\"\u003e+\u003c/span\u003e \u003cspan class=\"nx\"\u003enewline\u003c/span\u003e \u003cspan class=\"o\"\u003e+\u003c/span\u003e \u003cspan class=\"c1\"\u003e// data.labelTwitter + data.twitter\u003c/span\u003e\n               \u003cspan class=\"nx\"\u003enpming\u003c/span\u003e \u003cspan class=\"o\"\u003e+\u003c/span\u003e \u003cspan class=\"nx\"\u003enewline\u003c/span\u003e \u003cspan class=\"o\"\u003e+\u003c/span\u003e \u003cspan class=\"c1\"\u003e// data.labelnpm + data.npm\u003c/span\u003e\n               \u003cspan class=\"nx\"\u003egithubing\u003c/span\u003e \u003cspan class=\"o\"\u003e+\u003c/span\u003e \u003cspan class=\"nx\"\u003enewline\u003c/span\u003e \u003cspan class=\"o\"\u003e+\u003c/span\u003e \u003cspan class=\"c1\"\u003e// data.labelGitHub + data.github\u003c/span\u003e\n               \u003cspan class=\"nx\"\u003elinkedining\u003c/span\u003e \u003cspan class=\"o\"\u003e+\u003c/span\u003e \u003cspan class=\"nx\"\u003enewline\u003c/span\u003e \u003cspan class=\"o\"\u003e+\u003c/span\u003e \u003cspan class=\"c1\"\u003e// data.labelLinkedIn + data.linkedin\u003c/span\u003e\n               \u003cspan class=\"nx\"\u003ewebing\u003c/span\u003e \u003cspan class=\"o\"\u003e+\u003c/span\u003e \u003cspan class=\"nx\"\u003enewline\u003c/span\u003e \u003cspan class=\"o\"\u003e+\u003c/span\u003e \u003cspan class=\"nx\"\u003enewline\u003c/span\u003e \u003cspan class=\"o\"\u003e+\u003c/span\u003e \u003cspan class=\"c1\"\u003e// data.labelWeb + data.web\u003c/span\u003e\n               \u003cspan class=\"nx\"\u003ecarding\u003c/span\u003e \u003cspan class=\"c1\"\u003e// data.labelCard + data.npx\u003c/span\u003e\n\n\u003cspan class=\"nx\"\u003efs\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003ewriteFileSync\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"nx\"\u003epath\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003ejoin\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"nx\"\u003e__dirname\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e \u003cspan class=\"dl\"\u003e'\u003c/span\u003e\u003cspan class=\"s1\"\u003ebin/output\u003c/span\u003e\u003cspan class=\"dl\"\u003e'\u003c/span\u003e\u003cspan class=\"p\"\u003e),\u003c/span\u003e \u003cspan class=\"nx\"\u003echalk\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003egreen\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"nx\"\u003eboxen\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"nx\"\u003eoutput\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e \u003cspan class=\"nx\"\u003eoptions\u003c/span\u003e\u003cspan class=\"p\"\u003e)))\u003c/span\u003e\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\n\n\n\n\u003cp\u003ePlay around with the \u003ccode\u003edata\u003c/code\u003e const and add your information. For me it would look like this:\u003cbr\u003e\n\u003c/p\u003e\n\n\u003cdiv class=\"highlight\"\u003e\u003cpre class=\"highlight javascript\"\u003e\u003ccode\u003e\u003cspan class=\"kd\"\u003econst\u003c/span\u003e \u003cspan class=\"nx\"\u003edata\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"p\"\u003e{\u003c/span\u003e\n  \u003cspan class=\"na\"\u003ename\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e \u003cspan class=\"nx\"\u003echalk\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003ewhite\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"dl\"\u003e'\u003c/span\u003e\u003cspan class=\"s1\"\u003eConlin Durbin\u003c/span\u003e\u003cspan class=\"dl\"\u003e'\u003c/span\u003e\u003cspan class=\"p\"\u003e),\u003c/span\u003e\n  \u003cspan class=\"na\"\u003ehandle\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e \u003cspan class=\"nx\"\u003echalk\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003egreenBright\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003ebold\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"dl\"\u003e'\u003c/span\u003e\u003cspan class=\"s1\"\u003ewuz\u003c/span\u003e\u003cspan class=\"dl\"\u003e'\u003c/span\u003e\u003cspan class=\"p\"\u003e),\u003c/span\u003e\n  \u003cspan class=\"na\"\u003ework\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e \u003cspan class=\"nx\"\u003echalk\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003ewhite\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"dl\"\u003e'\u003c/span\u003e\u003cspan class=\"s1\"\u003eFrontend software engineer at Lessonly\u003c/span\u003e\u003cspan class=\"dl\"\u003e'\u003c/span\u003e\u003cspan class=\"p\"\u003e),\u003c/span\u003e\n  \u003cspan class=\"na\"\u003etwitter\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e \u003cspan class=\"nx\"\u003echalk\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003eredBright\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"dl\"\u003e'\u003c/span\u003e\u003cspan class=\"s1\"\u003ehttps://twitter.com/CallMeWuz\u003c/span\u003e\u003cspan class=\"dl\"\u003e'\u003c/span\u003e\u003cspan class=\"p\"\u003e),\u003c/span\u003e\n  \u003cspan class=\"na\"\u003egithub\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e \u003cspan class=\"nx\"\u003echalk\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003eredBright\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"dl\"\u003e'\u003c/span\u003e\u003cspan class=\"s1\"\u003ehttps://github.com/wuz\u003c/span\u003e\u003cspan class=\"dl\"\u003e'\u003c/span\u003e\u003cspan class=\"p\"\u003e),\u003c/span\u003e\n  \u003cspan class=\"na\"\u003elinkedin\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e \u003cspan class=\"nx\"\u003echalk\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003eredBright\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"dl\"\u003e'\u003c/span\u003e\u003cspan class=\"s1\"\u003ehttps://linkedin.com/in/wuz\u003c/span\u003e\u003cspan class=\"dl\"\u003e'\u003c/span\u003e\u003cspan class=\"p\"\u003e),\u003c/span\u003e\n  \u003cspan class=\"na\"\u003eweb\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e \u003cspan class=\"nx\"\u003echalk\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003eredBright\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"dl\"\u003e'\u003c/span\u003e\u003cspan class=\"s1\"\u003ehttps://wuz.fyi\u003c/span\u003e\u003cspan class=\"dl\"\u003e'\u003c/span\u003e\u003cspan class=\"p\"\u003e),\u003c/span\u003e\n  \u003cspan class=\"na\"\u003enpx\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e \u003cspan class=\"nx\"\u003echalk\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003ewhite\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"dl\"\u003e'\u003c/span\u003e\u003cspan class=\"s1\"\u003enpx wuz\u003c/span\u003e\u003cspan class=\"dl\"\u003e'\u003c/span\u003e\u003cspan class=\"p\"\u003e),\u003c/span\u003e\n  \u003cspan class=\"na\"\u003elabelWork\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e \u003cspan class=\"nx\"\u003echalk\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003ewhite\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003ebold\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"dl\"\u003e'\u003c/span\u003e\u003cspan class=\"s1\"\u003e      Work:\u003c/span\u003e\u003cspan class=\"dl\"\u003e'\u003c/span\u003e\u003cspan class=\"p\"\u003e),\u003c/span\u003e\n  \u003cspan class=\"na\"\u003elabelTwitter\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e \u003cspan class=\"nx\"\u003echalk\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003ewhite\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003ebold\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"dl\"\u003e'\u003c/span\u003e\u003cspan class=\"s1\"\u003e   Twitter:\u003c/span\u003e\u003cspan class=\"dl\"\u003e'\u003c/span\u003e\u003cspan class=\"p\"\u003e),\u003c/span\u003e\n  \u003cspan class=\"na\"\u003elabelGitHub\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e \u003cspan class=\"nx\"\u003echalk\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003ewhite\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003ebold\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"dl\"\u003e'\u003c/span\u003e\u003cspan class=\"s1\"\u003e    GitHub:\u003c/span\u003e\u003cspan class=\"dl\"\u003e'\u003c/span\u003e\u003cspan class=\"p\"\u003e),\u003c/span\u003e\n  \u003cspan class=\"na\"\u003elabelLinkedIn\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e \u003cspan class=\"nx\"\u003echalk\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003ewhite\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003ebold\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"dl\"\u003e'\u003c/span\u003e\u003cspan class=\"s1\"\u003e  LinkedIn:\u003c/span\u003e\u003cspan class=\"dl\"\u003e'\u003c/span\u003e\u003cspan class=\"p\"\u003e),\u003c/span\u003e\n  \u003cspan class=\"na\"\u003elabelWeb\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e \u003cspan class=\"nx\"\u003echalk\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003ewhite\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003ebold\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"dl\"\u003e'\u003c/span\u003e\u003cspan class=\"s1\"\u003e       Web:\u003c/span\u003e\u003cspan class=\"dl\"\u003e'\u003c/span\u003e\u003cspan class=\"p\"\u003e),\u003c/span\u003e\n  \u003cspan class=\"na\"\u003elabelCard\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e \u003cspan class=\"nx\"\u003echalk\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003ewhite\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003ebold\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"dl\"\u003e'\u003c/span\u003e\u003cspan class=\"s1\"\u003e      Card:\u003c/span\u003e\u003cspan class=\"dl\"\u003e'\u003c/span\u003e\u003cspan class=\"p\"\u003e)\u003c/span\u003e\n\u003cspan class=\"p\"\u003e}\u003c/span\u003e\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\n\n\n\n\u003cp\u003eYou can play with the colors as much as you like - check out the \u003ca href=\"https://npmjs.org/package/chalk\"\u003echalk\u003c/a\u003e package for more options.\u003c/p\u003e\n\n\u003cp\u003eOnce you are done, run \u003ccode\u003enpm run dev\u003c/code\u003e again. If everything looks good, we are ready to publish to NPM.\u003c/p\u003e\n\n\u003cp\u003eIf you don't have an NPM account, \u003ca href=\"https://npmjs.org\"\u003ego make one!\u003c/a\u003e Once you have you account set up, run \u003ccode\u003enpm login\u003c/code\u003e and follow the prompt to login to your account. Once that is done, go ahead and run an \u003ccode\u003enpm publish\u003c/code\u003e. Make sure your have changed the package name. \u003c/p\u003e\n\n\u003cp\u003eIf everything is set up right, you should see a success message! Try running \u003ccode\u003enpx \u0026lt;your_username\u0026gt;\u003c/code\u003e. \u003c/p\u003e\n\n\u003cp\u003eOnce you get it done, take a screenshot and send it to me here or \u003ca href=\"https://twitter.com/CallMeWuz\"\u003eon Twitter\u003c/a\u003e - I'd love to see it!\u003c/p\u003e\n\n","social_image":"https://res.cloudinary.com/practicaldev/image/fetch/s--uJeZRzHS--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://pbs.twimg.com/media/DuzZACYUUAEmSlT.png","body_markdown":"---\r\ntitle: Setting up a `npx username` card!\r\npublished: true\r\ndescription: A simple idea for an awesome community!\r\ntags: beginner, tutorial, javascript, nodejs\r\n---\r\n\r\n\r\nI recently saw this awesome post from [bnb](https://dev.to/bnb) on Twitter:\r\n\r\n{% twitter 1075473070368919552 %}\r\n\r\nThe community response has been awesome and I quickly knew I wanted to make my own:\r\n\r\n{% twitter 1075789700898664450 %}\r\n\r\nToday, I wanted to show everyone the process of making one.\r\n\r\nFirst, let's clone the repo:\r\n\r\n```\r\ngit clone https://github.com/bnb/bitandbang\r\n```\r\n\r\nNow, we need to edit some stuff. First, let's open up the `package.json` and update some of the details. First, change the package name:\r\n\r\n```\r\nname: \u003cyour username\u003e\r\n```\r\n\r\nThis will let you publish to npm and get your card with `npx \u003cyour_username\u003e`.\r\n\r\nYou can also update the description and author fields to reflect your information.\r\n\r\nIf we run `npm run dev`, we'll see that Tierney's information shows up. Let's make it your card.\r\n\r\nOpen up `build.js`:\r\n\r\n```js\r\n'use strict'\r\n\r\n// Pull in our modules\r\nconst chalk = require('chalk')\r\nconst boxen = require('boxen')\r\nconst fs = require('fs')\r\nconst path = require('path')\r\n\r\n// Define options for Boxen\r\nconst options = {\r\n  padding: 1,\r\n  margin: 1,\r\n  borderStyle: 'round'\r\n}\r\n\r\n// Text + chalk definitions\r\nconst data = {\r\n  name: chalk.white('               Tierney Cyren'),\r\n  handle: chalk.white('bitandbang'),\r\n  work: chalk.white('Senior Cloud Developer Advocate at Microsoft'),\r\n  opensource: chalk.white('Node.js Community Committee ') + chalk.green('⬢'),\r\n  twitter: chalk.gray('https://twitter.com/') + chalk.cyan('bitandbang'),\r\n  npm: chalk.gray('https://npmjs.com/') + chalk.red('~bnb'),\r\n  github: chalk.gray('https://github.com/') + chalk.green('bnb'),\r\n  linkedin: chalk.gray('https://linkedin.com/in/') + chalk.blue('bitandbang'),\r\n  web: chalk.cyan('https://bnb.im'),\r\n  npx: chalk.red('npx') + ' ' + chalk.white('bitandbang'),\r\n  labelWork: chalk.white.bold('       Work:'),\r\n  labelOpenSource: chalk.white.bold('Open Source:'),\r\n  labelTwitter: chalk.white.bold('    Twitter:'),\r\n  labelnpm: chalk.white.bold('        npm:'),\r\n  labelGitHub: chalk.white.bold('     GitHub:'),\r\n  labelLinkedIn: chalk.white.bold('   LinkedIn:'),\r\n  labelWeb: chalk.white.bold('        Web:'),\r\n  labelCard: chalk.white.bold('       Card:')\r\n}\r\n\r\n// Actual strings we're going to output\r\nconst newline = '\\n'\r\nconst heading = `${data.name} / ${data.handle}`\r\nconst working = `${data.labelWork}  ${data.work}`\r\nconst opensourcing = `${data.labelOpenSource}  ${data.opensource}`\r\nconst twittering = `${data.labelTwitter}  ${data.twitter}`\r\nconst npming = `${data.labelnpm}  ${data.npm}`\r\nconst githubing = `${data.labelGitHub}  ${data.github}`\r\nconst linkedining = `${data.labelLinkedIn}  ${data.linkedin}`\r\nconst webing = `${data.labelWeb}  ${data.web}`\r\nconst carding = `${data.labelCard}  ${data.npx}`\r\n\r\n// Put all our output together into a single variable so we can use boxen effectively\r\nconst output = heading + // data.name + data.handle\r\n               newline + newline + // Add one whole blank line\r\n               working + newline + // data.labelWork + data.work\r\n               opensourcing + newline + newline + // data.labelOpenSource + data.opensource\r\n               twittering + newline + // data.labelTwitter + data.twitter\r\n               npming + newline + // data.labelnpm + data.npm\r\n               githubing + newline + // data.labelGitHub + data.github\r\n               linkedining + newline + // data.labelLinkedIn + data.linkedin\r\n               webing + newline + newline + // data.labelWeb + data.web\r\n               carding // data.labelCard + data.npx\r\n\r\nfs.writeFileSync(path.join(__dirname, 'bin/output'), chalk.green(boxen(output, options)))\r\n```\r\n\r\nPlay around with the `data` const and add your information. For me it would look like this:\r\n\r\n```js\r\nconst data = {\r\n  name: chalk.white('Conlin Durbin'),\r\n  handle: chalk.greenBright.bold('wuz'),\r\n  work: chalk.white('Frontend software engineer at Lessonly'),\r\n  twitter: chalk.redBright('https://twitter.com/CallMeWuz'),\r\n  github: chalk.redBright('https://github.com/wuz'),\r\n  linkedin: chalk.redBright('https://linkedin.com/in/wuz'),\r\n  web: chalk.redBright('https://wuz.fyi'),\r\n  npx: chalk.white('npx wuz'),\r\n  labelWork: chalk.white.bold('      Work:'),\r\n  labelTwitter: chalk.white.bold('   Twitter:'),\r\n  labelGitHub: chalk.white.bold('    GitHub:'),\r\n  labelLinkedIn: chalk.white.bold('  LinkedIn:'),\r\n  labelWeb: chalk.white.bold('       Web:'),\r\n  labelCard: chalk.white.bold('      Card:')\r\n}\r\n```\r\n\r\nYou can play with the colors as much as you like - check out the [chalk](https://npmjs.org/package/chalk) package for more options.\r\n\r\nOnce you are done, run `npm run dev` again. If everything looks good, we are ready to publish to NPM.\r\n\r\nIf you don't have an NPM account, [go make one!](https://npmjs.org) Once you have you account set up, run `npm login` and follow the prompt to login to your account. Once that is done, go ahead and run an `npm publish`. Make sure your have changed the package name. \r\n\r\nIf everything is set up right, you should see a success message! Try running `npx \u003cyour_username\u003e`. \r\n\r\nOnce you get it done, take a screenshot and send it to me here or [on Twitter](https://twitter.com/CallMeWuz) - I'd love to see it!","canonical_url":null,"show_comments":true,"main_image_background_hex_color":"#dddddd","published_from_feed":false,"comments_count":20,"video":null,"video_code":null,"video_source_url":null,"video_thumbnail_url":null,"video_closed_caption_track_url":null,"feed_source_url":null,"edited_at":"2019-05-22T19:43:34.363Z","crossposted_at":null,"language":"en","cached_tag_list":"beginners, tutorial, javascript, node","path":"/wuz/setting-up-a-npx-username-card-1pip","cached_user_name":"Conlin Durbin","cached_user_username":"wuz","last_comment_at":"2020-03-25T20:28:00.685Z","public_reactions_count":143},{"title":"Wellness Wednesday - New Year, Dancing, and Self Care","slug":"wellness-wednesday---new-year-dancing-and-self-care-17fh","created_at":"2019-01-02T22:59:19.892Z","main_image":"https://thepracticaldev.s3.amazonaws.com/i/rca8n0k54gmbemeupnxd.jpg","description":"New year, new dev.to goals! Dance to be healthy! Take care of yourself!","published":true,"published_at":"2019-01-02T22:59:51.116Z","processed_html":"\u003ch1\u003e\n  \u003ca name=\"wellness-wednesday\" href=\"#wellness-wednesday\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  Wellness Wednesday\n\u003c/h1\u003e\n\n\u003cp\u003eHello again! Happy New Year! Time for another #wellnesswednesday!\u003c/p\u003e\n\n\u003ch2\u003e\n  \u003ca name=\"sma-goals\" href=\"#sma-goals\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  S.M.A. goals\n\u003c/h2\u003e\n\n\u003cp\u003eSince it is the new year, I'm sure we all have resolutions and goals all over the place. I'm also sure that everyone has heard of \"Smart\" goals. Every year I struggle to set goals using the framework - some times my goals are too lofty and other times they are so small they don't seem worth it on a time-scale. This year, I am focusing on just the S.M.A. part of smart goals. I want to make them specific, measureable and attainable, but since they are personal goals the relevancy doesn't really make sense to me and the time-bound is a difficult thing to come up with. What do you think about this? How do you set goals?\u003c/p\u003e\n\n\u003ch2\u003e\n  \u003ca name=\"dance-sometimes\" href=\"#dance-sometimes\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  Dance sometimes!\n\u003c/h2\u003e\n\n\u003cp\u003eDid you know that dancing lowers the risk of dementia? Plus it can be fun, give you a nice boost of energy, and lighten your mood! Put on some good music and groove out to your favorite song. I personally like to put on some good showtunes and do some chores around the house.\u003c/p\u003e\n\n\u003ch2\u003e\n  \u003ca name=\"aloe-bud\" href=\"#aloe-bud\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  Aloe Bud\n\u003c/h2\u003e\n\n\u003cp\u003e\u003ca href=\"https://itunes.apple.com/us/app/aloe-bud/id1318382054?mt=8\"\u003eAloe is a self-care app\u003c/a\u003e (currently on iOS with android on the way) that uses encouragement to bring awareness to self care activities. I haven't personally used it, but I will as soon as it is on Android!\u003c/p\u003e\n\n\u003cp\u003eHave a good one!\u003c/p\u003e\n\n","social_image":null,"body_markdown":"---\r\ntitle: Wellness Wednesday - New Year, Dancing, and Self Care\r\npublished: true\r\ndescription: New year, new dev.to goals! Dance to be healthy! Take care of yourself!\r\ncover_image: https://thepracticaldev.s3.amazonaws.com/i/rca8n0k54gmbemeupnxd.jpg\r\ntags: wellnesswednesday, self-care, career\r\n---\r\n\r\n# Wellness Wednesday\r\nHello again! Happy New Year! Time for another #wellnesswednesday!\r\n\r\n## S.M.A. goals\r\nSince it is the new year, I'm sure we all have resolutions and goals all over the place. I'm also sure that everyone has heard of \"Smart\" goals. Every year I struggle to set goals using the framework - some times my goals are too lofty and other times they are so small they don't seem worth it on a time-scale. This year, I am focusing on just the S.M.A. part of smart goals. I want to make them specific, measureable and attainable, but since they are personal goals the relevancy doesn't really make sense to me and the time-bound is a difficult thing to come up with. What do you think about this? How do you set goals?\r\n\r\n## Dance sometimes!\r\nDid you know that dancing lowers the risk of dementia? Plus it can be fun, give you a nice boost of energy, and lighten your mood! Put on some good music and groove out to your favorite song. I personally like to put on some good showtunes and do some chores around the house.\r\n\r\n## Aloe Bud\r\n[Aloe is a self-care app](https://itunes.apple.com/us/app/aloe-bud/id1318382054?mt=8) (currently on iOS with android on the way) that uses encouragement to bring awareness to self care activities. I haven't personally used it, but I will as soon as it is on Android!\r\n\r\nHave a good one!\r\n","canonical_url":null,"show_comments":true,"main_image_background_hex_color":"#dddddd","published_from_feed":false,"comments_count":3,"video":null,"video_code":null,"video_source_url":null,"video_thumbnail_url":null,"video_closed_caption_track_url":null,"feed_source_url":null,"edited_at":null,"crossposted_at":null,"language":"en","cached_tag_list":"wellnesswednesday, selfcare, career","path":"/wuz/wellness-wednesday---new-year-dancing-and-self-care-17fh","cached_user_name":"Conlin Durbin","cached_user_username":"wuz","last_comment_at":"2019-01-04T17:29:13.265Z","public_reactions_count":6},{"title":"Learning JS in 2019: My recommended path","slug":"learning-js-in-2019-my-recommended-path-50ca-temp-slug-5399593","created_at":"2019-01-07T16:07:44.982Z","main_image":null,"description":"A post by Conlin Durbin","published":false,"published_at":null,"processed_html":"\u003c!DOCTYPE html PUBLIC \"-//W3C//DTD HTML 4.0 Transitional//EN\" \"http://www.w3.org/TR/REC-html40/loose.dtd\"\u003e\n\n","social_image":null,"body_markdown":"---\r\ntitle: Learning JS in 2019: My recommended path\r\npublished: false\r\ndescription: \r\ntags: beginner, career, javascript, learning\r\n---\r\n\r\n\r\n","canonical_url":null,"show_comments":true,"main_image_background_hex_color":"#dddddd","published_from_feed":false,"comments_count":0,"video":null,"video_code":null,"video_source_url":null,"video_thumbnail_url":null,"video_closed_caption_track_url":null,"feed_source_url":null,"edited_at":null,"crossposted_at":null,"language":null,"cached_tag_list":"beginners, career, javascript, learning","path":"/wuz/learning-js-in-2019-my-recommended-path-50ca-temp-slug-5399593","cached_user_name":"Conlin Durbin","cached_user_username":"wuz","last_comment_at":"2017-01-01T05:00:00.000Z","public_reactions_count":0},{"title":"What podcasts should I be listening to in 2019?","slug":"what-podcasts-should-i-be-listening-to-in-2019-4mnn","created_at":"2019-01-08T02:49:11.051Z","main_image":null,"description":"Hey DEV-ers! I really got into podcasts last year and I am looking for more to check out. What podcas...","published":true,"published_at":"2019-01-08T02:49:10.969Z","processed_html":"\u003cp\u003eHey DEV-ers! I really got into podcasts last year and I am looking for more to check out. What podcasts are you currently digging? What should I check out?\u003c/p\u003e\n\n","social_image":null,"body_markdown":"---\r\ntitle: What podcasts should I be listening to in 2019?\r\npublished: true\r\ndescription: \r\ntags: discuss, podcasts\r\n---\r\n\r\nHey DEV-ers! I really got into podcasts last year and I am looking for more to check out. What podcasts are you currently digging? What should I check out?\r\n\r\n","canonical_url":null,"show_comments":true,"main_image_background_hex_color":"#dddddd","published_from_feed":false,"comments_count":18,"video":null,"video_code":null,"video_source_url":null,"video_thumbnail_url":null,"video_closed_caption_track_url":null,"feed_source_url":null,"edited_at":null,"crossposted_at":null,"language":"en","cached_tag_list":"discuss, podcast","path":"/wuz/what-podcasts-should-i-be-listening-to-in-2019-4mnn","cached_user_name":"Conlin Durbin","cached_user_username":"wuz","last_comment_at":"2020-05-21T16:36:18.361Z","public_reactions_count":52},{"title":"My Dev.to New Year's resolutions","slug":"my-devto-new-years-resolutions-31p9","created_at":"2019-01-08T04:33:23.639Z","main_image":null,"description":"A little late, but it's still January","published":true,"published_at":"2019-02-03T05:11:05.179Z","processed_html":"\u003cp\u003eHey folks! I love the resolutions that are going around here and I thought I would do my own! I'm only a month late, so we are off to a good start... 🤣 First off, I wanna point out this great post by Frederik:\u003c/p\u003e\n\n\n\u003cdiv class=\"ltag__link\"\u003e\n  \u003ca href=\"/_bigblind\" class=\"ltag__link__link\"\u003e\n    \u003cdiv class=\"ltag__link__pic\"\u003e\n      \u003cimg src=\"https://res.cloudinary.com/practicaldev/image/fetch/s--opdddzU6--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://res.cloudinary.com/practicaldev/image/fetch/s--5sGiqlsV--/c_fill%2Cf_auto%2Cfl_progressive%2Ch_150%2Cq_auto%2Cw_150/https://dev-to-uploads.s3.amazonaws.com/uploads/user/profile_image/12652/92ba4d26-3658-460b-9c79-7667b2db8389.jpg\" alt=\"_bigblind image\" loading=\"lazy\"\u003e\n    \u003c/div\u003e\n  \u003c/a\u003e\n  \u003ca href=\"/_bigblind/new-years-resolutions-suck-pick-a-theme-of-the-year-2kh1\" class=\"ltag__link__link\"\u003e\n    \u003cdiv class=\"ltag__link__content\"\u003e\n      \u003ch2\u003eNew Year's Resolutions Suck! Pick a Theme of the Year\u003c/h2\u003e\n      \u003ch3\u003eFrederik 👨‍💻➡️🌐 Creemers ・ Jan  1 '19 ・ 3 min read\u003c/h3\u003e\n      \u003cdiv class=\"ltag__link__taglist\"\u003e\n        \u003cspan class=\"ltag__link__tag\"\u003e#discuss\u003c/span\u003e\n        \u003cspan class=\"ltag__link__tag\"\u003e#personaldevelopment\u003c/span\u003e\n        \u003cspan class=\"ltag__link__tag\"\u003e#motivation\u003c/span\u003e\n        \u003cspan class=\"ltag__link__tag\"\u003e#productivity\u003c/span\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  \u003c/a\u003e\n\u003c/div\u003e\n\n\n\u003cp\u003eI love the idea and I want to try it out. So without further ado, my 2019 theme is:\u003c/p\u003e\n\n\u003ch1\u003e\n  \u003ca name=\"principals\" href=\"#principals\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  Principals\n\u003c/h1\u003e\n\n\u003cp\u003eI've been a developer for a while now. I've worked a few different types of jobs mostly in consulting or on a product team. One thing I am starting to realize is that good development starts with good principals. I'm still working on refining and discovering what all of those principals are, but here are a few that I am currently pursuing.\u003c/p\u003e\n\n\u003ch3\u003e\n  \u003ca name=\"general\" href=\"#general\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  General\n\u003c/h3\u003e\n\n\u003col\u003e\n\u003cli\u003eContinuous metrics drive continuous improvement\u003c/li\u003e\n\u003cli\u003eOpinions are not facts.\u003c/li\u003e\n\u003cli\u003eDon't blame, fix.\u003c/li\u003e\n\u003c/ol\u003e\n\n\u003ch3\u003e\n  \u003ca name=\"code\" href=\"#code\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  Code\n\u003c/h3\u003e\n\n\u003col\u003e\n\u003cli\u003eDon't make your code do too much.\u003c/li\u003e\n\u003cli\u003eYou can't fix code by staring at it.\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://dev.to/wuz/stop-trying-to-be-so-dry-instead-write-everything-twice-wet-5g33\"\u003eWrite Everything Twice\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003eAlways comment your abstractions\u003c/li\u003e\n\u003cli\u003eOptimize for deletion\u003c/li\u003e\n\u003c/ol\u003e\n\n\u003ch3\u003e\n  \u003ca name=\"writing\" href=\"#writing\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  Writing\n\u003c/h3\u003e\n\n\u003col\u003e\n\u003cli\u003eWrite for yourself, edit for your reader\u003c/li\u003e\n\u003c/ol\u003e\n\n\u003ch3\u003e\n  \u003ca name=\"relationships\" href=\"#relationships\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  Relationships\n\u003c/h3\u003e\n\n\u003col\u003e\n\u003cli\u003eClose the loop. Don't let connections fall off. \u003c/li\u003e\n\u003c/ol\u003e\n\n\u003ch3\u003e\n  \u003ca name=\"mentorship\" href=\"#mentorship\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  Mentorship\n\u003c/h3\u003e\n\n\u003col\u003e\n\u003cli\u003eA mentor will share their experiences with you to contribute to your knowledge base.\u003c/li\u003e\n\u003cli\u003eA mentor will use their network to help you succeed to achieve your goals.\u003c/li\u003e\n\u003c/ol\u003e\n\n\u003ch3\u003e\n  \u003ca name=\"some-other-goals\" href=\"#some-other-goals\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  Some other goals\n\u003c/h3\u003e\n\n\u003col\u003e\n\u003cli\u003eWrite on dev.to at least once a week\u003c/li\u003e\n\u003cli\u003eSpeak at a tech conference\u003c/li\u003e\n\u003cli\u003eRelease some work on a side project I have been developing\u003c/li\u003e\n\u003cli\u003eRelease 3 series around learning to be a developer (First one is being written now!)\u003c/li\u003e\n\u003c/ol\u003e\n\n","social_image":null,"body_markdown":"---\r\ntitle: My Dev.to New Year's resolutions\r\npublished: true\r\ndescription: A little late, but it's still January\r\ntags: career, newyear\r\n---\r\n\r\nHey folks! I love the resolutions that are going around here and I thought I would do my own! I'm only a month late, so we are off to a good start... 🤣 First off, I wanna point out this great post by Frederik:\r\n\r\n{% link _bigblind/new-years-resolutions-suck-pick-a-theme-of-the-year-2kh1 %}\r\n\r\nI love the idea and I want to try it out. So without further ado, my 2019 theme is:\r\n\r\n# Principals\r\n\r\nI've been a developer for a while now. I've worked a few different types of jobs mostly in consulting or on a product team. One thing I am starting to realize is that good development starts with good principals. I'm still working on refining and discovering what all of those principals are, but here are a few that I am currently pursuing.\r\n\r\n### General\r\n\r\n1. Continuous metrics drive continuous improvement\r\n2. Opinions are not facts.\r\n3. Don't blame, fix.\r\n\r\n### Code\r\n\r\n1. Don't make your code do too much.\r\n2. You can't fix code by staring at it.\r\n3. [Write Everything Twice](https://dev.to/wuz/stop-trying-to-be-so-dry-instead-write-everything-twice-wet-5g33)\r\n4. Always comment your abstractions\r\n5. Optimize for deletion\r\n\r\n### Writing\r\n\r\n1. Write for yourself, edit for your reader\r\n\r\n### Relationships\r\n\r\n1. Close the loop. Don't let connections fall off. \r\n\r\n### Mentorship\r\n\r\n1. A mentor will share their experiences with you to contribute to your knowledge base.\r\n2. A mentor will use their network to help you succeed to achieve your goals.\r\n\r\n\r\n### Some other goals\r\n\r\n1. Write on dev.to at least once a week\r\n2. Speak at a tech conference\r\n3. Release some work on a side project I have been developing\r\n4. Release 3 series around learning to be a developer (First one is being written now!)\r\n\r\n","canonical_url":null,"show_comments":true,"main_image_background_hex_color":"#dddddd","published_from_feed":false,"comments_count":1,"video":null,"video_code":null,"video_source_url":null,"video_thumbnail_url":null,"video_closed_caption_track_url":null,"feed_source_url":null,"edited_at":null,"crossposted_at":null,"language":"en","cached_tag_list":"career, newyear","path":"/wuz/my-devto-new-years-resolutions-31p9","cached_user_name":"Conlin Durbin","cached_user_username":"wuz","last_comment_at":"2019-02-05T05:10:55.323Z","public_reactions_count":8},{"title":"The Communal Web","slug":"the-communal-web-456l","created_at":"2019-01-11T03:19:46.836Z","main_image":"https://thepracticaldev.s3.amazonaws.com/i/ofl9pbc6w2ai2uxusxjw.jpg","description":"I miss the internet.  I know, I know. It seems a bit weird. But what we have today isn't really the I...","published":true,"published_at":"2019-01-11T03:19:46.792Z","processed_html":"\u003cp\u003eI miss the internet.\u003c/p\u003e\n\n\u003cp\u003eI know, I know. It seems a bit weird. But what we have today isn't really the Internet. Today, the web for most people is 1-4 sites they visit on a daily basis. News is regurgitated, opinion is bubbled.\u003c/p\u003e\n\n\n\u003cblockquote class=\"ltag__twitter-tweet\" data-url=\"https://twitter.com/tveastman/status/1069674780826071040\"\u003e\n\n  \u003cdiv class=\"ltag__twitter-tweet__main\" data-url=\"https://twitter.com/tveastman/status/1069674780826071040\"\u003e\n    \u003cdiv class=\"ltag__twitter-tweet__header\"\u003e\n      \u003cimg class=\"ltag__twitter-tweet__profile-image\" src=\"https://res.cloudinary.com/practicaldev/image/fetch/s--PrsLDUXj--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://pbs.twimg.com/profile_images/1070425298716389377/XX0ZrqGl_normal.jpg\" alt=\"Tom Eastman profile image\" loading=\"lazy\"\u003e\n      \u003cdiv class=\"ltag__twitter-tweet__full-name\"\u003e\n        Tom Eastman\n      \u003c/div\u003e\n      \u003cdiv class=\"ltag__twitter-tweet__username\"\u003e\n        @tveastman\n      \u003c/div\u003e\n      \u003cdiv class=\"ltag__twitter-tweet__twitter-logo\"\u003e\n        \u003cimg src=\"https://res.cloudinary.com/practicaldev/image/fetch/s--P4t6ys1m--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://practicaldev-herokuapp-com.freetls.fastly.net/assets/twitter-f95605061196010f91e64806688390eb1a4dbc9e913682e043eb8b1e06ca484f.svg\" alt=\"twitter logo\" loading=\"lazy\"\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"ltag__twitter-tweet__body\"\u003e\n      I'm old enough to remember when the Internet wasn't a group of five websites, each consisting of screenshots of text from the other four.\n    \u003c/div\u003e\n    \u003cdiv class=\"ltag__twitter-tweet__date\"\u003e\n      19:28 PM - 03 Dec 2018\n    \u003c/div\u003e\n\n\n    \u003cdiv class=\"ltag__twitter-tweet__actions\"\u003e\n      \u003ca href=\"https://twitter.com/intent/tweet?in_reply_to=1069674780826071040\" class=\"ltag__twitter-tweet__actions__button\"\u003e\n        \u003cimg src=\"/assets/twitter-reply-action.svg\" alt=\"Twitter reply action\" loading=\"lazy\"\u003e\n      \u003c/a\u003e\n      \u003ca href=\"https://twitter.com/intent/retweet?tweet_id=1069674780826071040\" class=\"ltag__twitter-tweet__actions__button\"\u003e\n        \u003cimg src=\"/assets/twitter-retweet-action.svg\" alt=\"Twitter retweet action\" loading=\"lazy\"\u003e\n      \u003c/a\u003e\n      11862\n      \u003ca href=\"https://twitter.com/intent/like?tweet_id=1069674780826071040\" class=\"ltag__twitter-tweet__actions__button\"\u003e\n        \u003cimg src=\"/assets/twitter-like-action.svg\" alt=\"Twitter like action\" loading=\"lazy\"\u003e\n      \u003c/a\u003e\n      72674\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/blockquote\u003e\n\n\n\u003cp\u003eI miss the days of (non-corporate) mailing lists, of self-hosted websites - and perhaps most importantly, those days before gmail and facebook and twitter.\u003c/p\u003e\n\n\u003cp\u003eThere are good people doing good work towards that (and this post will have a list at the end), but it's a tough road. Those who know me, know that my 'mission' is to make everything I do centered in some way around art, technology, and community. It's that community that I miss.\u003c/p\u003e\n\n\u003cp\u003eLet me tell you a story.\u003c/p\u003e\n\n\u003ch2\u003e\n  \u003ca name=\"jrednet-or-how-i-started-building-and-learned-to-love-the-web\" href=\"#jrednet-or-how-i-started-building-and-learned-to-love-the-web\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  Jred.net or how I started building and learned to love the web\n\u003c/h2\u003e\n\n\u003cp\u003eBack in 2007, in a weird set of coincidences, my mom discovered Myachi on TV around Christmas-time. She bought them for my siblings and I, thinking it would be a fun little stocking stuffer. Little did any of us know, this random bag full of sand would change a lot about me.\u003c/p\u003e\n\n\u003cp\u003eMyachi, for those who don't know (read: everyone), is what is called a 'handsack'. Think of a hacky-sack, but for your hands. For a semi-chubby kid without a ton of friends, it is the perfect distraction to spend hours and hours on after school.\u003c/p\u003e\n\n\u003cp\u003eOne of my favorite trick videos:\u003c/p\u003e\n\n\u003cp\u003e\u003ciframe width=\"710\" height=\"399\" src=\"https://www.youtube.com/embed/9tKNcRIUEyo\" allowfullscreen loading=\"lazy\"\u003e\n\u003c/iframe\u003e\n\u003c/p\u003e\n\n\u003cp\u003eThe video above shows some of the really cool things you can do with Myachi's. Monk and Animal were two 'masters' - people employed by the company to sell the toy in toy stores in NYC. All the kids who got into Myachi dreamed of being Masters one day. Who doesn't want to get paid to play with toys?\u003c/p\u003e\n\n\u003cp\u003eFor me, Myachi was a place to meet people from all over the world. At this point, I was 13, in Junior High, and not really great at anything. I got a lot of confidence from learning tricks - I showed off a lot at amusement parks, tourist attractions, or anywhere there were people that might be interested.\u003c/p\u003e\n\n\u003cp\u003eThis story, however, is about the community that was created around this toy. Back in the day, there was a PHPBB forum hosted at jred.net. Today the forum has died but, for a short period of time, jred.net was a great place to learn. I started giving back to the forums by making avatars. I had mucked around in GIMP and thought I was great at design (oh god, was I wrong), so I offered to make avatars for anyone that wanted one. And so I got better at design. I made some emotes.\u003c/p\u003e\n\n\u003cp\u003eYou can actually see some of the avatars and emotes I made \u003ca href=\"http://wuz.fyi/jred/\"\u003ehere\u003c/a\u003e. I recently pulled all the images I could get from the wayback machine.\u003c/p\u003e\n\n\u003cp\u003eEventually, I got promoted to forum moderator. I learned a lot about people and moderation on the internet (Jred was a more respectful community than many I see today and it was full of 13 year olds). I started working on the forums a bit too, first by writing guides, then by editing some of the styles and code on the site. I once even helped root out a hacker that had found a loophole in the software and taken over the site (I learned a ton about social engineering from this).\u003c/p\u003e\n\n\u003cp\u003eThe point is, I found a community that was open enough to allow me, a 13-year old with little to no computer skills, to learn and grow with them. I still keep in touch with some of the community, but for the most part that place has died out.\u003c/p\u003e\n\n\u003cp\u003eThink about this today. Many communities are now on Facebook. Can you imagine a situation where a young kid could learn by hacking on a Facebook page? Facebook is too closed source. Communities don't own the software, they just rent the space. MySpace used to be good for that. You could edit your page. Lots of people learned by trying to improve their MySpace pages. What now?\u003c/p\u003e\n\n\u003cp\u003eThese days, I get that sense of community from this site. People here are respectful, the software is open source, and interacting here feels like a real opportunity to give back to the community in a meaningful way.\u003c/p\u003e\n\n\u003cp\u003eI don't know the solution, but I am sure that it starts with curiosity. Working within your communities to improve the lives and skill sets of people there is important. Finding new avenues to reach new people is important. If you are looking for something to do, start a group. Meet real people in real place and get them to talk about the things they love to talk about. Then take that community online. Build a place where people are able to give back and collaborate to improve the community.\u003c/p\u003e\n\n\u003cp\u003eAlso, it's a bit of a tangent, but do \u003ca href=\"https://dev.to/wuz/making-mistakes-my-first-big-programming-blunder-48m2\"\u003esomething for your local library\u003c/a\u003e. Librarians are some of the last true bastions of community. Go find out why. To adapt a \u003ca href=\"https://www.goodreads.com/quotes/1291-and-on-the-subject-of-burning-books-i-want-to\"\u003eKurt Vonnegut\u003c/a\u003e quote: \u003c/p\u003e\n\n\u003cblockquote\u003e\n\u003cp\u003e\"So the internet I love still exists, if not on Facebook or Twitter or Google. The Internet I love still exists at the front desks of our public libraries.\"\u003c/p\u003e\n\u003c/blockquote\u003e\n\n\u003cp\u003eFinally, take back the internet from the big players. Start using open source and decentralized software. I'll keep an up-to-date list of the software I use at the end of this post. Pay for a server on NearlyFreeSpeech or even AWS or whatever you like and make a website. Build it poorly, then work on it. Make it do cool things like blink or spin or ask the user questions. Then share it. Send it to me, send it to your mom, or send it to your congressperson with a note about why community is important and how they shouldn't forget that - just get it out there.\u003c/p\u003e\n\n\u003ch2\u003e\n  \u003ca name=\"some-parts-of-the-internet-that-i-like\" href=\"#some-parts-of-the-internet-that-i-like\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  Some parts of the internet that I like\n\u003c/h2\u003e\n\n\u003cul\u003e\n\u003cli\u003eMastodon - a free, open source, decentralized version of twitter. Find an open node and have fun :) (You can find me \u003ca href=\"https://radical.town/@wuz\"\u003ehere\u003c/a\u003e)\u003c/li\u003e\n\u003cli\u003e\n\u003ca href=\"https://protonmail.com\"\u003eProtonMail\u003c/a\u003e - secure email from Switzerland. Stop giving Google more information about yourself.\u003c/li\u003e\n\u003cli\u003e\n\u003ca href=\"https://glitch.com\"\u003eGlitch\u003c/a\u003e - Glitch seems to be actually doing something to bring back the web that I remember.\u003c/li\u003e\n\u003cli\u003eDev.to - Write something. Write anything. Give back.\u003c/li\u003e\n\u003cli\u003e\n\u003ca href=\"https://www.nearlyfreespeech.net\"\u003eNearlyFreeSpeech\u003c/a\u003e - Pay a few bucks for a server. Build something cool, make yourself a website, build a blog.\u003c/li\u003e\n\u003cli\u003eNot software, but support local artists. Go see concerts, visit art galleries, maybe even make some art yourself. The world will be better for it. Come back and share them online.\u003c/li\u003e\n\u003c/ul\u003e\n\n","social_image":"","body_markdown":"---\r\ntitle: The Communal Web\r\npublished: true\r\ncover_image: https://thepracticaldev.s3.amazonaws.com/i/ofl9pbc6w2ai2uxusxjw.jpg\r\ntags: internet, thoughts, opinion\r\n---\r\n\r\nI miss the internet.\r\n\r\nI know, I know. It seems a bit weird. But what we have today isn't really the Internet. Today, the web for most people is 1-4 sites they visit on a daily basis. News is regurgitated, opinion is bubbled.\r\n\r\n{% twitter 1069674780826071040 %}\r\n\r\nI miss the days of (non-corporate) mailing lists, of self-hosted websites - and perhaps most importantly, those days before gmail and facebook and twitter.\r\n\r\nThere are good people doing good work towards that (and this post will have a list at the end), but it's a tough road. Those who know me, know that my 'mission' is to make everything I do centered in some way around art, technology, and community. It's that community that I miss.\r\n\r\nLet me tell you a story.\r\n\r\n## Jred.net or how I started building and learned to love the web\r\n\r\nBack in 2007, in a weird set of coincidences, my mom discovered Myachi on TV around Christmas-time. She bought them for my siblings and I, thinking it would be a fun little stocking stuffer. Little did any of us know, this random bag full of sand would change a lot about me.\r\n\r\nMyachi, for those who don't know (read: everyone), is what is called a 'handsack'. Think of a hacky-sack, but for your hands. For a semi-chubby kid without a ton of friends, it is the perfect distraction to spend hours and hours on after school.\r\n\r\nOne of my favorite trick videos:\r\n\r\n{% youtube 9tKNcRIUEyo %}\r\n\r\nThe video above shows some of the really cool things you can do with Myachi's. Monk and Animal were two 'masters' - people employed by the company to sell the toy in toy stores in NYC. All the kids who got into Myachi dreamed of being Masters one day. Who doesn't want to get paid to play with toys?\r\n\r\nFor me, Myachi was a place to meet people from all over the world. At this point, I was 13, in Junior High, and not really great at anything. I got a lot of confidence from learning tricks - I showed off a lot at amusement parks, tourist attractions, or anywhere there were people that might be interested.\r\n\r\nThis story, however, is about the community that was created around this toy. Back in the day, there was a PHPBB forum hosted at jred.net. Today the forum has died but, for a short period of time, jred.net was a great place to learn. I started giving back to the forums by making avatars. I had mucked around in GIMP and thought I was great at design (oh god, was I wrong), so I offered to make avatars for anyone that wanted one. And so I got better at design. I made some emotes.\r\n\r\nYou can actually see some of the avatars and emotes I made [here](http://wuz.fyi/jred/). I recently pulled all the images I could get from the wayback machine.\r\n\r\nEventually, I got promoted to forum moderator. I learned a lot about people and moderation on the internet (Jred was a more respectful community than many I see today and it was full of 13 year olds). I started working on the forums a bit too, first by writing guides, then by editing some of the styles and code on the site. I once even helped root out a hacker that had found a loophole in the software and taken over the site (I learned a ton about social engineering from this).\r\n\r\nThe point is, I found a community that was open enough to allow me, a 13-year old with little to no computer skills, to learn and grow with them. I still keep in touch with some of the community, but for the most part that place has died out.\r\n\r\nThink about this today. Many communities are now on Facebook. Can you imagine a situation where a young kid could learn by hacking on a Facebook page? Facebook is too closed source. Communities don't own the software, they just rent the space. MySpace used to be good for that. You could edit your page. Lots of people learned by trying to improve their MySpace pages. What now?\r\n\r\nThese days, I get that sense of community from this site. People here are respectful, the software is open source, and interacting here feels like a real opportunity to give back to the community in a meaningful way.\r\n\r\nI don't know the solution, but I am sure that it starts with curiosity. Working within your communities to improve the lives and skill sets of people there is important. Finding new avenues to reach new people is important. If you are looking for something to do, start a group. Meet real people in real place and get them to talk about the things they love to talk about. Then take that community online. Build a place where people are able to give back and collaborate to improve the community.\r\n\r\nAlso, it's a bit of a tangent, but do [something for your local library](https://dev.to/wuz/making-mistakes-my-first-big-programming-blunder-48m2). Librarians are some of the last true bastions of community. Go find out why. To adapt a [Kurt Vonnegut](https://www.goodreads.com/quotes/1291-and-on-the-subject-of-burning-books-i-want-to) quote: \r\n\r\n\u003e \"So the internet I love still exists, if not on Facebook or Twitter or Google. The Internet I love still exists at the front desks of our public libraries.\"\r\n\r\nFinally, take back the internet from the big players. Start using open source and decentralized software. I'll keep an up-to-date list of the software I use at the end of this post. Pay for a server on NearlyFreeSpeech or even AWS or whatever you like and make a website. Build it poorly, then work on it. Make it do cool things like blink or spin or ask the user questions. Then share it. Send it to me, send it to your mom, or send it to your congressperson with a note about why community is important and how they shouldn't forget that - just get it out there.\r\n\r\n## Some parts of the internet that I like\r\n\r\n- Mastodon - a free, open source, decentralized version of twitter. Find an open node and have fun :) (You can find me [here](https://radical.town/@wuz))\r\n- [ProtonMail](https://protonmail.com) - secure email from Switzerland. Stop giving Google more information about yourself.\r\n- [Glitch](https://glitch.com) - Glitch seems to be actually doing something to bring back the web that I remember.\r\n- Dev.to - Write something. Write anything. Give back.\r\n- [NearlyFreeSpeech](https://www.nearlyfreespeech.net) - Pay a few bucks for a server. Build something cool, make yourself a website, build a blog.\r\n- Not software, but support local artists. Go see concerts, visit art galleries, maybe even make some art yourself. The world will be better for it. Come back and share them online.","canonical_url":null,"show_comments":true,"main_image_background_hex_color":"#dddddd","published_from_feed":false,"comments_count":5,"video":null,"video_code":null,"video_source_url":null,"video_thumbnail_url":null,"video_closed_caption_track_url":null,"feed_source_url":null,"edited_at":null,"crossposted_at":null,"language":"en","cached_tag_list":"internet, thoughts, opinion","path":"/wuz/the-communal-web-456l","cached_user_name":"Conlin Durbin","cached_user_username":"wuz","last_comment_at":"2019-01-12T15:22:09.226Z","public_reactions_count":58},{"title":"What is your job title?","slug":"what-is-your-job-title-5545","created_at":"2019-01-11T14:44:15.272Z","main_image":null,"description":"I'm always fascinated by how many different job titles there are out there. I've a quite a few myself...","published":true,"published_at":"2019-01-11T14:44:15.198Z","processed_html":"\u003cp\u003eI'm always fascinated by how many different job titles there are out there. I've a quite a few myself and I'd love to see what you actual title is and how well you think it relates to your work!\u003c/p\u003e\n\n\u003cp\u003eFor me, I am a \u003cstrong\u003e\u003cem\u003eLevel 3\u003c/em\u003e Software Engineer\u003c/strong\u003e. I focus on front-end development with React, but dip into Rails every now and then. I think this title is a pretty good representation of what I actually do, but I don't believe that there is a standardization around the levels - if someone knows of one, I would love to hear about it!\u003c/p\u003e\n\n\u003cp\u003eHave a great weekend folks!\u003c/p\u003e\n\n","social_image":null,"body_markdown":"---\r\ntitle: What is your job title?\r\npublished: true\r\ndescription: \r\ntags: career, title, discuss\r\n---\r\n\r\nI'm always fascinated by how many different job titles there are out there. I've a quite a few myself and I'd love to see what you actual title is and how well you think it relates to your work!\r\n\r\nFor me, I am a ***Level 3* Software Engineer**. I focus on front-end development with React, but dip into Rails every now and then. I think this title is a pretty good representation of what I actually do, but I don't believe that there is a standardization around the levels - if someone knows of one, I would love to hear about it!\r\n\r\nHave a great weekend folks!","canonical_url":null,"show_comments":true,"main_image_background_hex_color":"#dddddd","published_from_feed":false,"comments_count":21,"video":null,"video_code":null,"video_source_url":null,"video_thumbnail_url":null,"video_closed_caption_track_url":null,"feed_source_url":null,"edited_at":"2019-01-11T14:44:43.973Z","crossposted_at":null,"language":"en","cached_tag_list":"career, title, discuss","path":"/wuz/what-is-your-job-title-5545","cached_user_name":"Conlin Durbin","cached_user_username":"wuz","last_comment_at":"2019-01-21T03:11:21.054Z","public_reactions_count":9},{"title":"What tools does a developer use?","slug":"what-tools-does-a-developer-use-3k28","created_at":"2019-01-15T01:51:59.106Z","main_image":"https://thepracticaldev.s3.amazonaws.com/i/6b50n5whypwviczdw9z0.png","description":"Learning all the tools available as a developer is hard","published":true,"published_at":"2019-02-25T14:22:25.098Z","processed_html":"\u003cp\u003eAs developers, we use many different tools - code editors, version control, terminal emulators, and more. As a new developer, finding the right tools can be difficult and there are often many different opinions. In this 7 part series, I will be covering the tools we use and what impact our tools have on how we do our jobs.\u003c/p\u003e\n\n\u003cblockquote\u003e\n\u003cp\u003eNote: There are countless tools in the wild - the are as varied as the developers that use them. Nothing here should be taken as gospel truth or as more than one developer's opinion. My goal here is to provide an overview of the tool landscape and to give you an overview of evaluating tools and your workflow.\u003c/p\u003e\n\u003c/blockquote\u003e\n\n\u003cp\u003eFor this first section, let's go over a few of the more common tools developers use and what they are for.\u003c/p\u003e\n\n\n\u003chr\u003e\n\n\u003ch1\u003e\n  \u003ca name=\"the-operating-system-os\" href=\"#the-operating-system-os\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  The Operating System (OS)\n\u003c/h1\u003e\n\n\u003cp\u003eIn some ways, your operating system is the most important tool in your tool chest. In fact, it \u003cem\u003eis\u003c/em\u003e your tool chest. There are many different operating systems out there and many people will try to tell you why their operating system is the \u003cstrong\u003eOne True Operating System™️\u003c/strong\u003e. In reality, you should use the OS that fits best with your style and has the tools you need. I will list out the basic pros and cons of each OS below. Stay tuned for the Operating System article coming tomorrow for more!\u003c/p\u003e\n\n\u003ch2\u003e\n  \u003ca name=\"linux\" href=\"#linux\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  Linux\n\u003c/h2\u003e\n\n\u003cp\u003eMany people have a love/hate relationship with Linux. There are hundreds of different distro's out there, each with its own ideas about what a Linux operating system should do and how it should work. I won't cover any specific repo's here, but that will be in the next article!\u003c/p\u003e\n\n\u003ch3\u003e\n  \u003ca name=\"pros\" href=\"#pros\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  Pros\n\u003c/h3\u003e\n\n\u003col\u003e\n\u003cli\u003eVery customizable\u003c/li\u003e\n\u003cli\u003eGreat tool support\u003c/li\u003e\n\u003cli\u003eLightweight, can run on most hardware\u003c/li\u003e\n\u003c/ol\u003e\n\n\u003ch3\u003e\n  \u003ca name=\"cons\" href=\"#cons\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  Cons\n\u003c/h3\u003e\n\n\u003col\u003e\n\u003cli\u003eConfiguration can take for ever\u003c/li\u003e\n\u003cli\u003eYou can spend forever fixing small problems that you caused\u003c/li\u003e\n\u003cli\u003eYou are the support squad\u003c/li\u003e\n\u003c/ol\u003e\n\n\u003ch2\u003e\n  \u003ca name=\"macos\" href=\"#macos\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  MacOS\n\u003c/h2\u003e\n\n\u003cp\u003eMacOS is the operating system that runs on Apple computers. \u003c/p\u003e\n\n\u003ch3\u003e\n  \u003ca name=\"pros\" href=\"#pros\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  Pros\n\u003c/h3\u003e\n\n\u003col\u003e\n\u003cli\u003eSpecifically designed for the hardware it is running on.\u003c/li\u003e\n\u003cli\u003eGreat tool support / supports most Linux tools\u003c/li\u003e\n\u003cli\u003eGreat support from Apple\u003c/li\u003e\n\u003c/ol\u003e\n\n\u003ch3\u003e\n  \u003ca name=\"cons\" href=\"#cons\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  Cons\n\u003c/h3\u003e\n\n\u003col\u003e\n\u003cli\u003ePricey hardware! Planned obsolescence.\u003c/li\u003e\n\u003cli\u003eSome services built for Linux only \u003cem\u003ehalf\u003c/em\u003e run\u003c/li\u003e\n\u003cli\u003eIf you don't like the looks, there isn't much you can do\u003c/li\u003e\n\u003c/ol\u003e\n\n\u003ch2\u003e\n  \u003ca name=\"windows\" href=\"#windows\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  Windows\n\u003c/h2\u003e\n\n\u003cp\u003eWindows is a controversial choice for developer software, unless you are working on Windows servers running languages like C#. Lately, with the acquisition of Github and the introduction of the Windows Subsystem for Linux, the future looks bright for Windows.\u003c/p\u003e\n\n\u003ch3\u003e\n  \u003ca name=\"pros\" href=\"#pros\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  Pros\n\u003c/h3\u003e\n\n\u003col\u003e\n\u003cli\u003eRuns on \u003cem\u003etons\u003c/em\u003e of hardware\u003c/li\u003e\n\u003cli\u003eMicrosoft is doubling down on developers lately!\u003c/li\u003e\n\u003cli\u003eCan run a lot of software now with Windows Subsystem for Linux\u003c/li\u003e\n\u003c/ol\u003e\n\n\u003ch3\u003e\n  \u003ca name=\"cons\" href=\"#cons\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  Cons\n\u003c/h3\u003e\n\n\u003col\u003e\n\u003cli\u003eBuying a license can be costly\u003c/li\u003e\n\u003cli\u003eLegacy of having bad tool support\u003c/li\u003e\n\u003cli\u003eRequires special software to run basic tools\u003c/li\u003e\n\u003c/ol\u003e\n\n\n\u003chr\u003e\n\n\u003ch1\u003e\n  \u003ca name=\"the-code-editor\" href=\"#the-code-editor\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  The Code Editor\n\u003c/h1\u003e\n\n\u003cp\u003eThe Code Editor is possibly the single most-interacted-with tool a developer has. This is the interface by which you take the thoughts in your head and turn them into code. There are tons of options - Vim, VS Code, Sublime Text, Emacs, and on and on. The important thing is learning one you like and getting good with it. Keyboard shortcuts will save your life - and your fingers.\u003c/p\u003e\n\n\n\u003chr\u003e\n\n\u003ch1\u003e\n  \u003ca name=\"the-command-line-terminal-emulators\" href=\"#the-command-line-terminal-emulators\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  The Command Line / Terminal Emulators\n\u003c/h1\u003e\n\n\u003cp\u003eThe command line is your connection to low-level tools and a great way to speed up your development processes. Many developers get by with graphical tools, but having at least a bit of knowledge about the command line is a great addition to your tool chest. A few terms you will need to know:\u003c/p\u003e\n\n\u003cp\u003e\u003cstrong\u003eCommand Line:\u003c/strong\u003e The command line is the place where you type in commands\u003cbr\u003e\n\u003cstrong\u003eTerminal Emulator:\u003c/strong\u003e A terminal emulator is the program you use to access the command line\u003cbr\u003e\n\u003cstrong\u003eShell:\u003c/strong\u003e The shell is the program that handles the commands you enter into the command line\u003c/p\u003e\n\n\u003ch2\u003e\n  \u003ca name=\"bash\" href=\"#bash\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  Bash\n\u003c/h2\u003e\n\n\u003cp\u003eBash (Bourne Again SHell) is probably the most popular shell - its the default on most operating systems. \u003c/p\u003e\n\n\u003ch2\u003e\n  \u003ca name=\"zsh-fish-and-more\" href=\"#zsh-fish-and-more\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  zsh, fish, and more\n\u003c/h2\u003e\n\n\u003cp\u003eThere are many other shell programs out there that all do different things. Find the one you like the best and learn to use it! They each have different features and tools preinstalled.\u003c/p\u003e\n\n\u003ch2\u003e\n  \u003ca name=\"command-line-interface-cli\" href=\"#command-line-interface-cli\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  Command Line Interface (CLI)\n\u003c/h2\u003e\n\n\u003cp\u003eThe CLI is a catch-all for any tool that is interacted with through a command line. Many tools that you encounter may have a graphical component and a CLI. For instance, many text editors have a way to open files from a file explorer (like Finder on Mac) or through the command line, with a command like \u003ccode\u003ecode\u003c/code\u003e or \u003ccode\u003esubl\u003c/code\u003e (for VS Code and Sublime Text respectively).\u003c/p\u003e\n\n\n\u003chr\u003e\n\n\u003ch1\u003e\n  \u003ca name=\"version-control\" href=\"#version-control\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  Version Control\n\u003c/h1\u003e\n\n\u003cp\u003eVersion control is how developers avoid \u003ca href=\"https://dev.to/wuz/making-mistakes-my-first-big-programming-blunder-48m2\"\u003edestroying all the work they did by accident\u003c/a\u003e and to collaborate well with other developers. There have been many iterations and changes to version control over the years. Depending on what company or team you work on, you may not have a choice in version control. I have worked at companies that used SVN, CVS, and git. They all exist in the wild.\u003c/p\u003e\n\n\u003ch2\u003e\n  \u003ca name=\"git\" href=\"#git\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  git\n\u003c/h2\u003e\n\n\u003cp\u003e\u003ccode\u003egit\u003c/code\u003e is probably the most popular version control these days. It has many great features and fairly easy to understand syntax. It implements a few different concepts, but the big ones are repositories, pulls, clones, branches, and commits. We'll cover those in the version control article.\u003c/p\u003e\n\n\u003ch2\u003e\n  \u003ca name=\"svn-cvs-and-more\" href=\"#svn-cvs-and-more\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  svn, cvs, and more\n\u003c/h2\u003e\n\n\u003cp\u003eAs I mentioned there are tons of other tools out there for version control. They all have different concepts and verbiage that is used to interact with them, but for the most part they are all similar. Any tool you use will have some graphical tool and a command line interface. \u003c/p\u003e\n\n\u003ch2\u003e\n  \u003ca name=\"github-and-repository-hosts\" href=\"#github-and-repository-hosts\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  Github and repository hosts\n\u003c/h2\u003e\n\n\u003cp\u003eMany services exist to centralize your version control. The benefits of this are that you have a system for maintaining branches, receiving code from other people, and interacting with your repositories. Github is probably the most well known and operates through \u003ccode\u003egit\u003c/code\u003e.\u003c/p\u003e\n\n\n\u003chr\u003e\n\n\u003ch1\u003e\n  \u003ca name=\"debuggers\" href=\"#debuggers\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  Debuggers\n\u003c/h1\u003e\n\n\u003cp\u003eDebuggers are another major tool used in development. Many programming languages come bundled with a debugging platform. For server-side languages, tools like \u003ccode\u003egdb\u003c/code\u003e, \u003ccode\u003epry\u003c/code\u003e in Ruby and many more. The tool you need for debugging will depend on the language and environment you are debugging for. In the debugger article, we'll spend some time discussing debugging strategies and how to choose the right debugger for the job.\u003c/p\u003e\n\n\u003ch2\u003e\n  \u003ca name=\"chrome-devtools\" href=\"#chrome-devtools\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  Chrome DevTools\n\u003c/h2\u003e\n\n\u003cp\u003eOne of the most well-known debugging tools out there. It helps debug web sites - anything with HTML, Javascript, or CSS. There are breakpoints, watchers, and the ability to live change code on a site and see your changes.\u003c/p\u003e\n\n\u003ch2\u003e\n  \u003ca name=\"gdb-pry-and-more\" href=\"#gdb-pry-and-more\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  gdb, pry and more\n\u003c/h2\u003e\n\n\u003cp\u003eThese server side tools work well for debugging compiled languages and those run through the command line. \u003ccode\u003egdb\u003c/code\u003e and \u003ccode\u003evalgrind\u003c/code\u003e allow you to access the memory of a compiled program and see what could be going wrong.\u003c/p\u003e\n\n\n\u003chr\u003e\n\n\u003ch1\u003e\n  \u003ca name=\"the-integrated-development-environment-ide\" href=\"#the-integrated-development-environment-ide\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  The Integrated Development Environment (IDE)\n\u003c/h1\u003e\n\n\u003cp\u003eFinally, the last major tool I'd like to discuss is the IDE. An IDE is software that combines many of the previously discussed tools into a single suite of tools. This has its pros and cons, but the major point is: by bundling all your tools together, you have a great cohesion between your tools but it can be hard to replace any single tool you don't like. Think of an IDE like buying a prefilled toolbox from the store - it will have everything you need for a while, but eventually, you might need something that doesn't fit in the box and that could be a pain.\u003c/p\u003e\n\n\u003cp\u003eI hope this introduction was helpful! Check back tomorrow for the post on operating systems! Comment with questions and comments and \u003ca href=\"https://twitter.com/CallMeWuz\"\u003ecome discuss with me on Twitter\u003c/a\u003e!\u003c/p\u003e\n\n","social_image":null,"body_markdown":"---\r\ntitle: What tools does a developer use?\r\npublished: true\r\ndescription: Learning all the tools available as a developer is hard\r\ncover_image: https://thepracticaldev.s3.amazonaws.com/i/6b50n5whypwviczdw9z0.png\r\nseries: Learning Developer Tools\r\ntags: beginner, career, tools\r\n---\r\n\r\nAs developers, we use many different tools - code editors, version control, terminal emulators, and more. As a new developer, finding the right tools can be difficult and there are often many different opinions. In this 7 part series, I will be covering the tools we use and what impact our tools have on how we do our jobs.\r\n\r\n\u003e Note: There are countless tools in the wild - the are as varied as the developers that use them. Nothing here should be taken as gospel truth or as more than one developer's opinion. My goal here is to provide an overview of the tool landscape and to give you an overview of evaluating tools and your workflow.\r\n\r\nFor this first section, let's go over a few of the more common tools developers use and what they are for.\r\n\r\n---\r\n\r\n# The Operating System (OS)\r\n\r\nIn some ways, your operating system is the most important tool in your tool chest. In fact, it _is_ your tool chest. There are many different operating systems out there and many people will try to tell you why their operating system is the **One True Operating System™️**. In reality, you should use the OS that fits best with your style and has the tools you need. I will list out the basic pros and cons of each OS below. Stay tuned for the Operating System article coming tomorrow for more!\r\n\r\n## Linux\r\n\r\nMany people have a love/hate relationship with Linux. There are hundreds of different distro's out there, each with its own ideas about what a Linux operating system should do and how it should work. I won't cover any specific repo's here, but that will be in the next article!\r\n\r\n### Pros\r\n1. Very customizable\r\n2. Great tool support\r\n3. Lightweight, can run on most hardware\r\n\r\n### Cons\r\n1. Configuration can take for ever\r\n2. You can spend forever fixing small problems that you caused\r\n3. You are the support squad\r\n\r\n## MacOS\r\n\r\nMacOS is the operating system that runs on Apple computers. \r\n\r\n### Pros\r\n1. Specifically designed for the hardware it is running on.\r\n2. Great tool support / supports most Linux tools\r\n3. Great support from Apple\r\n\r\n### Cons\r\n1. Pricey hardware! Planned obsolescence.\r\n2. Some services built for Linux only _half_ run\r\n3. If you don't like the looks, there isn't much you can do\r\n\r\n## Windows\r\n\r\nWindows is a controversial choice for developer software, unless you are working on Windows servers running languages like C#. Lately, with the acquisition of Github and the introduction of the Windows Subsystem for Linux, the future looks bright for Windows.\r\n\r\n### Pros\r\n1. Runs on _tons_ of hardware\r\n2. Microsoft is doubling down on developers lately!\r\n3. Can run a lot of software now with Windows Subsystem for Linux\r\n\r\n### Cons\r\n1. Buying a license can be costly\r\n2. Legacy of having bad tool support\r\n3. Requires special software to run basic tools\r\n\r\n---\r\n\r\n# The Code Editor\r\n\r\nThe Code Editor is possibly the single most-interacted-with tool a developer has. This is the interface by which you take the thoughts in your head and turn them into code. There are tons of options - Vim, VS Code, Sublime Text, Emacs, and on and on. The important thing is learning one you like and getting good with it. Keyboard shortcuts will save your life - and your fingers.\r\n\r\n---\r\n\r\n# The Command Line / Terminal Emulators\r\n\r\nThe command line is your connection to low-level tools and a great way to speed up your development processes. Many developers get by with graphical tools, but having at least a bit of knowledge about the command line is a great addition to your tool chest. A few terms you will need to know:\r\n\r\n**Command Line:** The command line is the place where you type in commands\r\n**Terminal Emulator:** A terminal emulator is the program you use to access the command line\r\n**Shell:** The shell is the program that handles the commands you enter into the command line\r\n\r\n## Bash\r\n\r\nBash (Bourne Again SHell) is probably the most popular shell - its the default on most operating systems. \r\n\r\n## zsh, fish, and more\r\n\r\nThere are many other shell programs out there that all do different things. Find the one you like the best and learn to use it! They each have different features and tools preinstalled.\r\n\r\n## Command Line Interface (CLI)\r\n\r\nThe CLI is a catch-all for any tool that is interacted with through a command line. Many tools that you encounter may have a graphical component and a CLI. For instance, many text editors have a way to open files from a file explorer (like Finder on Mac) or through the command line, with a command like `code` or `subl` (for VS Code and Sublime Text respectively).\r\n\r\n---\r\n\r\n# Version Control\r\n\r\nVersion control is how developers avoid [destroying all the work they did by accident](https://dev.to/wuz/making-mistakes-my-first-big-programming-blunder-48m2) and to collaborate well with other developers. There have been many iterations and changes to version control over the years. Depending on what company or team you work on, you may not have a choice in version control. I have worked at companies that used SVN, CVS, and git. They all exist in the wild.\r\n\r\n## git\r\n\r\n`git` is probably the most popular version control these days. It has many great features and fairly easy to understand syntax. It implements a few different concepts, but the big ones are repositories, pulls, clones, branches, and commits. We'll cover those in the version control article.\r\n\r\n## svn, cvs, and more\r\n\r\nAs I mentioned there are tons of other tools out there for version control. They all have different concepts and verbiage that is used to interact with them, but for the most part they are all similar. Any tool you use will have some graphical tool and a command line interface. \r\n\r\n## Github and repository hosts\r\n\r\nMany services exist to centralize your version control. The benefits of this are that you have a system for maintaining branches, receiving code from other people, and interacting with your repositories. Github is probably the most well known and operates through `git`.\r\n\r\n---\r\n\r\n# Debuggers\r\n\r\nDebuggers are another major tool used in development. Many programming languages come bundled with a debugging platform. For server-side languages, tools like `gdb`, `pry` in Ruby and many more. The tool you need for debugging will depend on the language and environment you are debugging for. In the debugger article, we'll spend some time discussing debugging strategies and how to choose the right debugger for the job.\r\n\r\n## Chrome DevTools\r\n\r\nOne of the most well-known debugging tools out there. It helps debug web sites - anything with HTML, Javascript, or CSS. There are breakpoints, watchers, and the ability to live change code on a site and see your changes.\r\n\r\n## gdb, pry and more\r\n\r\nThese server side tools work well for debugging compiled languages and those run through the command line. `gdb` and `valgrind` allow you to access the memory of a compiled program and see what could be going wrong.\r\n\r\n---\r\n\r\n# The Integrated Development Environment (IDE)\r\n\r\nFinally, the last major tool I'd like to discuss is the IDE. An IDE is software that combines many of the previously discussed tools into a single suite of tools. This has its pros and cons, but the major point is: by bundling all your tools together, you have a great cohesion between your tools but it can be hard to replace any single tool you don't like. Think of an IDE like buying a prefilled toolbox from the store - it will have everything you need for a while, but eventually, you might need something that doesn't fit in the box and that could be a pain.\r\n\r\nI hope this introduction was helpful! Check back tomorrow for the post on operating systems! Comment with questions and comments and [come discuss with me on Twitter](https://twitter.com/CallMeWuz)!\r\n\r\n\r\n\r\n","canonical_url":null,"show_comments":true,"main_image_background_hex_color":"#dddddd","published_from_feed":false,"comments_count":3,"video":null,"video_code":null,"video_source_url":null,"video_thumbnail_url":null,"video_closed_caption_track_url":null,"feed_source_url":null,"edited_at":"2019-02-26T13:39:56.521Z","crossposted_at":null,"language":"en","cached_tag_list":"beginners, career, tools","path":"/wuz/what-tools-does-a-developer-use-3k28","cached_user_name":"Conlin Durbin","cached_user_username":"wuz","last_comment_at":"2019-02-25T18:08:07.516Z","public_reactions_count":18},{"title":"Developer Tools: The Operating System","slug":"developer-tools-the-operating-system-3n55","created_at":"2019-01-15T01:52:24.331Z","main_image":"https://thepracticaldev.s3.amazonaws.com/i/ufe31pdbd9wq2psethkt.png","description":"This is part of a 7 part series about developer tools. If you didn't haven't read the other parts, c...","published":true,"published_at":"2019-02-26T13:38:55.357Z","processed_html":"\u003cblockquote\u003e\n\u003cp\u003eThis is part of a 7 part series about developer tools. If you didn't haven't read the other parts, check them out above!\u003c/p\u003e\n\u003c/blockquote\u003e\n\n\u003cp\u003eOperating systems are a collection of software used to manage the hardware and software components of a computer. They provide common resources that the software running on that computer can use.\u003c/p\u003e\n\n\u003cp\u003eThere are many types of operating systems out there, but there are many common ones you might know. \u003c/p\u003e\n\n\u003ch1\u003e\n  \u003ca name=\"common-os-choices\" href=\"#common-os-choices\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  Common OS Choices\n\u003c/h1\u003e\n\n\u003cp\u003eQuick note from Rhymes on my last post:\u003c/p\u003e\n\n\n\u003cdiv class=\"liquid-comment\"\u003e\n  \u003cdiv class=\"details\"\u003e\n    \u003ca href=\"/rhymes\"\u003e\n      \u003cimg class=\"profile-pic\" src=\"https://res.cloudinary.com/practicaldev/image/fetch/s--NyD7nfZj--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://res.cloudinary.com/practicaldev/image/fetch/s--BcLqTpcC--/c_fill%2Cf_auto%2Cfl_progressive%2Ch_50%2Cq_auto%2Cw_50/https://dev-to-uploads.s3.amazonaws.com/uploads/user/profile_image/2693/bfd9a4a5-92b3-4ac3-a276-3ccb68d78203.jpg\" alt=\"rhymes profile image\" loading=\"lazy\"\u003e\n    \u003c/a\u003e\n    \u003ca href=\"/rhymes\"\u003e\n      \u003cspan class=\"comment-username\"\u003erhymes\u003c/span\u003e\n    \u003c/a\u003e\n      \u003ca href=\"https://twitter.com/rhymes_\"\u003e\n        \u003cimg src=\"/assets/twitter-logo.svg\" class=\"icon-img\" alt=\"twitter\" loading=\"lazy\"\u003e\n      \u003c/a\u003e\n      \u003ca href=\"https://github.com/rhymes\"\u003e\n        \u003cimg src=\"/assets/github-logo.svg\" class=\"icon-img\" alt=\"github\" loading=\"lazy\"\u003e\n      \u003c/a\u003e\n    \u003cdiv class=\"comment-date\"\u003e\n  \u003ca href=\"/rhymes/comment/9330\"\u003e\n    \u003ctime datetime=\"2019-02-25T15:13:14Z\"\u003e\n      Feb 25 '19\n    \u003c/time\u003e\n  \u003c/a\u003e\n\u003c/div\u003e\n\n  \u003c/div\u003e\n  \u003cdiv class=\"body\"\u003e\n    \n\n\u003cp\u003eHi Conlin!\u003c/p\u003e\n\n\u003cblockquote\u003e\n\u003cp\u003eSome services built for Linux only half run\u003c/p\u003e\n\u003c/blockquote\u003e\n\n\u003cp\u003eis this still true? I remember it was for some time but macOS seems very well supported all around \u003c/p\u003e\n\n\u003cblockquote\u003e\n\u003cp\u003eBuying a license can be costly\u003c/p\u003e\n\u003c/blockquote\u003e\n\n\u003cp\u003eKind of yes, Windows 10 Home and Pro licenses are around 100/150€ lately, which is not zero but not insane either (considering that Microsoft doesn't usually charge you for the hardware as the gatekeeper).\u003c/p\u003e\n\n\u003cp\u003eThanks for this new series!\u003c/p\u003e\n\n\n\n  \u003c/div\u003e\n\u003c/div\u003e\n\n\n\u003ch2\u003e\n  \u003ca name=\"linux\" href=\"#linux\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  Linux\n\u003c/h2\u003e\n\n\u003cp\u003eMany people have a love/hate relationship with Linux. There are hundreds of different distro's out there, each with its own ideas about what a Linux operating system should do and how it should work. I won't cover any specific repo's here, but that will be in the next article!\u003c/p\u003e\n\n\u003ch3\u003e\n  \u003ca name=\"pros\" href=\"#pros\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  Pros\n\u003c/h3\u003e\n\n\u003col\u003e\n\u003cli\u003eVery customizable\u003c/li\u003e\n\u003cli\u003eGreat tool support\u003c/li\u003e\n\u003cli\u003eLightweight, can run on most hardware\u003c/li\u003e\n\u003c/ol\u003e\n\n\u003ch3\u003e\n  \u003ca name=\"cons\" href=\"#cons\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  Cons\n\u003c/h3\u003e\n\n\u003col\u003e\n\u003cli\u003eConfiguration can take forever\u003c/li\u003e\n\u003cli\u003eYou can spend forever fixing small problems that you caused\u003c/li\u003e\n\u003cli\u003eYou are the support squad\u003c/li\u003e\n\u003c/ol\u003e\n\n\u003ch2\u003e\n  \u003ca name=\"macos\" href=\"#macos\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  MacOS\n\u003c/h2\u003e\n\n\u003cp\u003eMacOS is the operating system that runs on Apple computers. \u003c/p\u003e\n\n\u003ch3\u003e\n  \u003ca name=\"pros\" href=\"#pros\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  Pros\n\u003c/h3\u003e\n\n\u003col\u003e\n\u003cli\u003eSpecifically designed for the hardware it is running on.\u003c/li\u003e\n\u003cli\u003eGreat tool support / supports most Linux tools\u003c/li\u003e\n\u003cli\u003eGreat support from Apple\u003c/li\u003e\n\u003c/ol\u003e\n\n\u003ch3\u003e\n  \u003ca name=\"cons\" href=\"#cons\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  Cons\n\u003c/h3\u003e\n\n\u003col\u003e\n\u003cli\u003ePricey hardware! Planned obsolescence.\u003c/li\u003e\n\u003cli\u003eSome services built for Linux only \u003cem\u003ehalf\u003c/em\u003e run\u003c/li\u003e\n\u003cli\u003eIf you don't like the looks, there isn't much you can do\u003c/li\u003e\n\u003c/ol\u003e\n\n\u003ch2\u003e\n  \u003ca name=\"windows\" href=\"#windows\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  Windows\n\u003c/h2\u003e\n\n\u003cp\u003eWindows is a controversial choice for developer software unless you are working on Windows servers running languages like C#. Lately, with the acquisition of Github and the introduction of the Windows Subsystem for Linux, the future looks bright for Windows.\u003c/p\u003e\n\n\u003ch3\u003e\n  \u003ca name=\"pros\" href=\"#pros\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  Pros\n\u003c/h3\u003e\n\n\u003col\u003e\n\u003cli\u003eRuns on \u003cem\u003etons\u003c/em\u003e of hardware\u003c/li\u003e\n\u003cli\u003eMicrosoft is doubling down on developers lately!\u003c/li\u003e\n\u003cli\u003eCan run a lot of software now with Windows Subsystem for Linux\u003c/li\u003e\n\u003c/ol\u003e\n\n\u003ch3\u003e\n  \u003ca name=\"cons\" href=\"#cons\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  Cons\n\u003c/h3\u003e\n\n\u003col\u003e\n\u003cli\u003eBuying a license can be costly\u003c/li\u003e\n\u003cli\u003eLegacy of having bad tool support\u003c/li\u003e\n\u003cli\u003eRequires special software to run basic tools\u003c/li\u003e\n\u003c/ol\u003e\n\n\u003ch1\u003e\n  \u003ca name=\"how-do-i-choose\" href=\"#how-do-i-choose\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  How do I choose\n\u003c/h1\u003e\n\n\u003cp\u003eNow that we have covered some of the common operating systems, let's discuss somethings to think about when choosing which OS to use.\u003c/p\u003e\n\n\u003ch2\u003e\n  \u003ca name=\"extensibility\" href=\"#extensibility\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  Extensibility\n\u003c/h2\u003e\n\n\u003cp\u003eWhen considering a good OS, one thing you will want to look at is extensibility. Developers use so many tools over the course of their career and while cross-platform tools are becoming more and more common, you want to make sure you can set up your dev environment the way you want it to be set up. Some good baselines are the ability to use a package manager (which now exists on most OS's), access to a command line, and some basic, editable system level preferences.\u003c/p\u003e\n\n\u003ch2\u003e\n  \u003ca name=\"ease-of-use\" href=\"#ease-of-use\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  Ease Of Use\n\u003c/h2\u003e\n\n\u003cp\u003eAlongside extensibility, a good operating system should balance ease-of-use. It can be hard to reach a good middle ground between the two, but unless you really like fiddling with tool settings and installs, you probably want an OS that makes those things pretty easy. I personally love working on my Archlinux box - everything is exactly how I configured it and there isn't anything on it that I didn't add. However, when something goes wrong, it can take me a long time to fix it. If the shit hits the fan, you want to make sure your tools are there to back you up.\u003c/p\u003e\n\n\u003ch2\u003e\n  \u003ca name=\"hardware\" href=\"#hardware\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  Hardware\n\u003c/h2\u003e\n\n\u003cp\u003eFinally, hardware is a big concern when thinking about what OS to choose. Most Linux distros can probably be installed on most machines, but if you want to run MacOS on a non-Apple computer, you are gonna have a bad time. Windows will probably run most places, but the licenses can be expensive! Consider the form factor and use-cases you have for your dev machine too. A friend of mine carries a big gaming Windows Laptop to work every day - he runs multiple VM's and drives to work, so it makes sense for him. I, however, walked to work many days and work from coffee shops often, so I needed something easy to carry and use in many places. While these considerations aren't part of the operating system, the OS you use is most likely going to be dictated in some way by the hardware it is running on.\u003c/p\u003e\n\n\u003ch1\u003e\n  \u003ca name=\"whatever-you-choose-make-it-yours\" href=\"#whatever-you-choose-make-it-yours\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  Whatever you choose, make it yours\n\u003c/h1\u003e\n\n\u003cp\u003eAt the end of the day, your choice of dev environment is highly personal and comes down to a lot of different factors. Find something you are going to be happy working with day in and day out, and you will have made a good choice. Don't listen to people who espouse a \"one true OS\". Spend some time trying different OSs. \u003c/p\u003e\n\n\u003cp\u003eCheck back in tomorrow where we will dig into the code editor!\u003c/p\u003e\n\n\u003cp\u003eWhat OS do you use? What do you like about it? What don't you like?\u003c/p\u003e\n\n","social_image":null,"body_markdown":"---\r\ntitle: Developer Tools: The Operating System\r\npublished: true\r\ndescription: \r\ncover_image: https://thepracticaldev.s3.amazonaws.com/i/ufe31pdbd9wq2psethkt.png\r\nseries: Learning Developer Tools\r\ntags: beginner, career, tools\r\n---\r\n\r\n\u003e This is part of a 7 part series about developer tools. If you didn't haven't read the other parts, check them out above!\r\n\r\nOperating systems are a collection of software used to manage the hardware and software components of a computer. They provide common resources that the software running on that computer can use.\r\n\r\nThere are many types of operating systems out there, but there are many common ones you might know. \r\n\r\n# Common OS Choices\r\n\r\nQuick note from Rhymes on my last post:\r\n\r\n{% devcomment 9330 %}\r\n\r\n## Linux\r\n\r\nMany people have a love/hate relationship with Linux. There are hundreds of different distro's out there, each with its own ideas about what a Linux operating system should do and how it should work. I won't cover any specific repo's here, but that will be in the next article!\r\n\r\n### Pros\r\n1. Very customizable\r\n2. Great tool support\r\n3. Lightweight, can run on most hardware\r\n\r\n### Cons\r\n1. Configuration can take forever\r\n2. You can spend forever fixing small problems that you caused\r\n3. You are the support squad\r\n\r\n## MacOS\r\n\r\nMacOS is the operating system that runs on Apple computers. \r\n\r\n### Pros\r\n1. Specifically designed for the hardware it is running on.\r\n2. Great tool support / supports most Linux tools\r\n3. Great support from Apple\r\n\r\n### Cons\r\n1. Pricey hardware! Planned obsolescence.\r\n2. Some services built for Linux only _half_ run\r\n3. If you don't like the looks, there isn't much you can do\r\n\r\n## Windows\r\n\r\nWindows is a controversial choice for developer software unless you are working on Windows servers running languages like C#. Lately, with the acquisition of Github and the introduction of the Windows Subsystem for Linux, the future looks bright for Windows.\r\n\r\n### Pros\r\n1. Runs on _tons_ of hardware\r\n2. Microsoft is doubling down on developers lately!\r\n3. Can run a lot of software now with Windows Subsystem for Linux\r\n\r\n### Cons\r\n1. Buying a license can be costly\r\n2. Legacy of having bad tool support\r\n3. Requires special software to run basic tools\r\n\r\n# How do I choose\r\n\r\nNow that we have covered some of the common operating systems, let's discuss somethings to think about when choosing which OS to use.\r\n\r\n## Extensibility\r\n\r\nWhen considering a good OS, one thing you will want to look at is extensibility. Developers use so many tools over the course of their career and while cross-platform tools are becoming more and more common, you want to make sure you can set up your dev environment the way you want it to be set up. Some good baselines are the ability to use a package manager (which now exists on most OS's), access to a command line, and some basic, editable system level preferences.\r\n\r\n## Ease Of Use\r\n\r\nAlongside extensibility, a good operating system should balance ease-of-use. It can be hard to reach a good middle ground between the two, but unless you really like fiddling with tool settings and installs, you probably want an OS that makes those things pretty easy. I personally love working on my Archlinux box - everything is exactly how I configured it and there isn't anything on it that I didn't add. However, when something goes wrong, it can take me a long time to fix it. If the shit hits the fan, you want to make sure your tools are there to back you up.\r\n\r\n## Hardware\r\n\r\nFinally, hardware is a big concern when thinking about what OS to choose. Most Linux distros can probably be installed on most machines, but if you want to run MacOS on a non-Apple computer, you are gonna have a bad time. Windows will probably run most places, but the licenses can be expensive! Consider the form factor and use-cases you have for your dev machine too. A friend of mine carries a big gaming Windows Laptop to work every day - he runs multiple VM's and drives to work, so it makes sense for him. I, however, walked to work many days and work from coffee shops often, so I needed something easy to carry and use in many places. While these considerations aren't part of the operating system, the OS you use is most likely going to be dictated in some way by the hardware it is running on.\r\n\r\n# Whatever you choose, make it yours\r\n\r\nAt the end of the day, your choice of dev environment is highly personal and comes down to a lot of different factors. Find something you are going to be happy working with day in and day out, and you will have made a good choice. Don't listen to people who espouse a \"one true OS\". Spend some time trying different OSs. \r\n\r\nCheck back in tomorrow where we will dig into the code editor!\r\n\r\nWhat OS do you use? What do you like about it? What don't you like?","canonical_url":null,"show_comments":true,"main_image_background_hex_color":"#dddddd","published_from_feed":false,"comments_count":2,"video":null,"video_code":null,"video_source_url":null,"video_thumbnail_url":null,"video_closed_caption_track_url":null,"feed_source_url":null,"edited_at":null,"crossposted_at":null,"language":null,"cached_tag_list":"beginners, career, tools","path":"/wuz/developer-tools-the-operating-system-3n55","cached_user_name":"Conlin Durbin","cached_user_username":"wuz","last_comment_at":"2019-06-12T20:34:24.392Z","public_reactions_count":11},{"title":"Building a simple Alfred workflow to grab gifs from my website","slug":"building-a-simple-alfred-workflow-to-grab-gifs-from-my-website-8i0","created_at":"2019-01-15T03:50:01.094Z","main_image":"https://thepracticaldev.s3.amazonaws.com/i/d0gq1cwl3uvduvn1l6kr.png","description":"A fun workflow upgrade!","published":true,"published_at":"2019-01-15T03:50:00.991Z","processed_html":"\u003cp\u003eI save a lot of gifs. \u003c/p\u003e\n\n\u003cfigure\u003e\u003cp\u003e\u003ca href=\"https://res.cloudinary.com/practicaldev/image/fetch/s--7EqlKdwW--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/wyzsfhh30j2e9ujvh1cw.png\" class=\"article-body-image-wrapper\"\u003e\u003cimg src=\"https://res.cloudinary.com/practicaldev/image/fetch/s--7EqlKdwW--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/wyzsfhh30j2e9ujvh1cw.png\" alt=\"\" loading=\"lazy\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cfigcaption\u003eI've got 169 as of this article\u003c/figcaption\u003e\u003c/figure\u003e\n\n\n\n\u003cp\u003eI used to store them in Dropbox and share them with a link, but Dropbox has changed the way they handle Public folders and links, so it was a hassle to drop a gif in. Plus, I'm trying to migrate my stuff away from big services in 2019 (more coming this in a future post!) With this in mind, a week or two ago I setup a nice little \u003ca href=\"https://www.alfredapp.com\"\u003eAlfred workflow\u003c/a\u003e for to grab the links to my gifs and share them.  \u003c/p\u003e\n\n\u003cfigure\u003e\u003cp\u003e\u003ca href=\"https://res.cloudinary.com/practicaldev/image/fetch/s--LRKq78BW--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://wuz.fyi/gifs/typing.gif\" class=\"article-body-image-wrapper\"\u003e\u003cimg src=\"https://res.cloudinary.com/practicaldev/image/fetch/s--LRKq78BW--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://wuz.fyi/gifs/typing.gif\" alt=\"\" loading=\"lazy\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cfigcaption\u003eActual footage of me searching and sharing gifs (not actual footage)\u003c/figcaption\u003e\u003c/figure\u003e\n\n\n\n\u003cp\u003eFirst things first, I had to set up my gif hosting. I use \u003ca href=\"https://nearlyfreespeech.net\"\u003eNearlyFreeSpeech\u003c/a\u003e to host \u003ca href=\"https://wuz.fyi\"\u003emy personal site\u003c/a\u003e. I store the gifs in a folder in there and sync them back and forth using \u003ca href=\"https://www.samba.org/rsync/\"\u003ersync\u003c/a\u003e. Basically all you need for this step is a publicly hosted base url for your gifs - i.e. \u003ca href=\"https://wuz.fyi/gifs\"\u003ehttps://wuz.fyi/gifs\u003c/a\u003e for my site.\u003c/p\u003e\n\n\u003cp\u003e\u003ca href=\"https://res.cloudinary.com/practicaldev/image/fetch/s---YHV50c8--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://wuz.fyi/gifs/awesome.gif\" class=\"article-body-image-wrapper\"\u003e\u003cimg src=\"https://res.cloudinary.com/practicaldev/image/fetch/s---YHV50c8--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://wuz.fyi/gifs/awesome.gif\" alt=\"\" loading=\"lazy\"\u003e\u003c/a\u003e\u003c/p\u003e\n\n\u003cp\u003eNow that you have that, let's set up a new alfred workflow. Open up your Alfred preferences and head over to the \u003cstrong\u003eWorkflows\u003c/strong\u003e tab:\u003c/p\u003e\n\n\u003cp\u003e\u003ca href=\"https://res.cloudinary.com/practicaldev/image/fetch/s--X0kkyvcE--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/dpjblvxcvgyl5jqcoi4v.png\" class=\"article-body-image-wrapper\"\u003e\u003cimg src=\"https://res.cloudinary.com/practicaldev/image/fetch/s--X0kkyvcE--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/dpjblvxcvgyl5jqcoi4v.png\" alt=\"Alfred workflows tab\" loading=\"lazy\"\u003e\u003c/a\u003e\u003c/p\u003e\n\n\u003cp\u003eClick the little plus in the bottom of the sidebar and click \u003cstrong\u003eBlank Workflow\u003c/strong\u003e:\u003c/p\u003e\n\n\u003cp\u003e\u003ca href=\"https://res.cloudinary.com/practicaldev/image/fetch/s--2OH94s_w--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/9wwb6vr6hqnfx4t7fyan.png\" class=\"article-body-image-wrapper\"\u003e\u003cimg src=\"https://res.cloudinary.com/practicaldev/image/fetch/s--2OH94s_w--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/9wwb6vr6hqnfx4t7fyan.png\" alt=\"Little plus button\" loading=\"lazy\"\u003e\u003c/a\u003e\u003c/p\u003e\n\n\u003cp\u003eGive your workflow a name, description, and any other info you want to give it.\u003c/p\u003e\n\n\u003cp\u003e\u003ca href=\"https://res.cloudinary.com/practicaldev/image/fetch/s--x0UCwwU1--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/xbad4jjr5i4t1te7tnem.png\" class=\"article-body-image-wrapper\"\u003e\u003cimg src=\"https://res.cloudinary.com/practicaldev/image/fetch/s--x0UCwwU1--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/xbad4jjr5i4t1te7tnem.png\" alt=\"Adding the name and description\" loading=\"lazy\"\u003e\u003c/a\u003e\u003c/p\u003e\n\n\u003cp\u003eOnce that is done, right click in the black area to add a workflow object and select \u003cstrong\u003eInputs\u003c/strong\u003e \u0026gt; \u003cstrong\u003eFile Filter\u003c/strong\u003e. Give your filter a keyword, some placeholder text. Then drag and drop the types of files you want to search into the \u003cstrong\u003eFile Types\u003c/strong\u003e section. For me that is gifs, pngs, and jpegs:\u003c/p\u003e\n\n\u003cp\u003e\u003ca href=\"https://res.cloudinary.com/practicaldev/image/fetch/s--I3etLTD5--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/o0heinupqdcsf4jj5fkz.png\" class=\"article-body-image-wrapper\"\u003e\u003cimg src=\"https://res.cloudinary.com/practicaldev/image/fetch/s--I3etLTD5--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/o0heinupqdcsf4jj5fkz.png\" alt=\"\" loading=\"lazy\"\u003e\u003c/a\u003e\u003c/p\u003e\n\n\u003cp\u003eNow, click on over to the Search Scope tab and drag and drop your gif folder:\u003c/p\u003e\n\n\u003cp\u003e\u003ca href=\"https://res.cloudinary.com/practicaldev/image/fetch/s--4fKyI6hq--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/6ejkizjv9lkvyvvadp0z.png\" class=\"article-body-image-wrapper\"\u003e\u003cimg src=\"https://res.cloudinary.com/practicaldev/image/fetch/s--4fKyI6hq--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/6ejkizjv9lkvyvvadp0z.png\" alt=\"\" loading=\"lazy\"\u003e\u003c/a\u003e\u003c/p\u003e\n\n\u003cp\u003eSave that and let's move on! Right click again and select \u003cstrong\u003eActions\u003c/strong\u003e \u0026gt; \u003cstrong\u003eRun Script\u003c/strong\u003e. Once that opens, change \"with input as argv\" to \"with input as {query}\" and paste this code:\u003cbr\u003e\n\u003c/p\u003e\n\n\u003cdiv class=\"highlight\"\u003e\u003cpre class=\"highlight shell\"\u003e\u003ccode\u003eurlencode\u003cspan class=\"o\"\u003e()\u003c/span\u003e \u003cspan class=\"o\"\u003e{\u003c/span\u003e\n    \u003cspan class=\"c\"\u003e# urlencode \u0026lt;string\u0026gt;\u003c/span\u003e\n    \u003cspan class=\"nv\"\u003eold_lc_collate\u003c/span\u003e\u003cspan class=\"o\"\u003e=\u003c/span\u003e\u003cspan class=\"nv\"\u003e$LC_COLLATE\u003c/span\u003e\n    \u003cspan class=\"nv\"\u003eLC_COLLATE\u003c/span\u003e\u003cspan class=\"o\"\u003e=\u003c/span\u003eC\n\n    \u003cspan class=\"nb\"\u003elocal \u003c/span\u003e\u003cspan class=\"nv\"\u003elength\u003c/span\u003e\u003cspan class=\"o\"\u003e=\u003c/span\u003e\u003cspan class=\"s2\"\u003e\"\u003c/span\u003e\u003cspan class=\"k\"\u003e${#\u003c/span\u003e\u003cspan class=\"nv\"\u003e1\u003c/span\u003e\u003cspan class=\"k\"\u003e}\u003c/span\u003e\u003cspan class=\"s2\"\u003e\"\u003c/span\u003e\n    \u003cspan class=\"k\"\u003efor\u003c/span\u003e \u003cspan class=\"o\"\u003e((\u003c/span\u003e i \u003cspan class=\"o\"\u003e=\u003c/span\u003e 0\u003cspan class=\"p\"\u003e;\u003c/span\u003e i \u0026lt; length\u003cspan class=\"p\"\u003e;\u003c/span\u003e i++ \u003cspan class=\"o\"\u003e))\u003c/span\u003e\u003cspan class=\"p\"\u003e;\u003c/span\u003e \u003cspan class=\"k\"\u003edo\n        \u003c/span\u003e\u003cspan class=\"nb\"\u003elocal \u003c/span\u003e\u003cspan class=\"nv\"\u003ec\u003c/span\u003e\u003cspan class=\"o\"\u003e=\u003c/span\u003e\u003cspan class=\"s2\"\u003e\"\u003c/span\u003e\u003cspan class=\"k\"\u003e${\u003c/span\u003e\u003cspan class=\"nv\"\u003e1\u003c/span\u003e:i:1\u003cspan class=\"k\"\u003e}\u003c/span\u003e\u003cspan class=\"s2\"\u003e\"\u003c/span\u003e\n        \u003cspan class=\"k\"\u003ecase\u003c/span\u003e \u003cspan class=\"nv\"\u003e$c\u003c/span\u003e \u003cspan class=\"k\"\u003ein\u003c/span\u003e\n            \u003cspan class=\"o\"\u003e[\u003c/span\u003ea-zA-Z0-9.~_-]\u003cspan class=\"p\"\u003e)\u003c/span\u003e \u003cspan class=\"nb\"\u003eprintf\u003c/span\u003e \u003cspan class=\"s2\"\u003e\"\u003c/span\u003e\u003cspan class=\"nv\"\u003e$c\u003c/span\u003e\u003cspan class=\"s2\"\u003e\"\u003c/span\u003e \u003cspan class=\"p\"\u003e;;\u003c/span\u003e\n            \u003cspan class=\"k\"\u003e*\u003c/span\u003e\u003cspan class=\"p\"\u003e)\u003c/span\u003e \u003cspan class=\"nb\"\u003eprintf\u003c/span\u003e \u003cspan class=\"s1\"\u003e'%%%02X'\u003c/span\u003e \u003cspan class=\"s2\"\u003e\"'\u003c/span\u003e\u003cspan class=\"nv\"\u003e$c\u003c/span\u003e\u003cspan class=\"s2\"\u003e\"\u003c/span\u003e \u003cspan class=\"p\"\u003e;;\u003c/span\u003e\n        \u003cspan class=\"k\"\u003eesac\u003c/span\u003e\n    \u003cspan class=\"k\"\u003edone\n\n    \u003c/span\u003e\u003cspan class=\"nv\"\u003eLC_COLLATE\u003c/span\u003e\u003cspan class=\"o\"\u003e=\u003c/span\u003e\u003cspan class=\"nv\"\u003e$old_lc_collate\u003c/span\u003e\n\u003cspan class=\"o\"\u003e}\u003c/span\u003e\n\u003cspan class=\"nv\"\u003eURL\u003c/span\u003e\u003cspan class=\"o\"\u003e=\u003c/span\u003e\u003cspan class=\"s2\"\u003e\"https://wuz.fyi/gifs/\"\u003c/span\u003e\n\n\u003cspan class=\"nb\"\u003eecho\u003c/span\u003e \u003cspan class=\"nt\"\u003e-ne\u003c/span\u003e \u003cspan class=\"s2\"\u003e\"\u003c/span\u003e\u003cspan class=\"k\"\u003e${\u003c/span\u003e\u003cspan class=\"nv\"\u003eURL\u003c/span\u003e\u003cspan class=\"k\"\u003e}\u003c/span\u003e\u003cspan class=\"si\"\u003e$(\u003c/span\u003eurlencode \u003cspan class=\"s2\"\u003e\"\u003c/span\u003e\u003cspan class=\"si\"\u003e$(\u003c/span\u003e\u003cspan class=\"nb\"\u003ebasename\u003c/span\u003e \u003cspan class=\"o\"\u003e{\u003c/span\u003equery\u003cspan class=\"o\"\u003e}\u003c/span\u003e\u003cspan class=\"si\"\u003e)\u003c/span\u003e\u003cspan class=\"s2\"\u003e\"\u003c/span\u003e\u003cspan class=\"si\"\u003e)\u003c/span\u003e\u003cspan class=\"s2\"\u003e\"\u003c/span\u003e | pbcopy\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\n\n\n\n\u003cp\u003eBe sure to check every checkbox at the bottom, besides \"Backslashes\". You'll also want to set \u003ccode\u003eURL\u003c/code\u003e to wherever you are hosting your gifs.\u003c/p\u003e\n\n\u003cp\u003e\u003ca href=\"https://res.cloudinary.com/practicaldev/image/fetch/s--4s4K2iVx--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/6lchmjp2uggf79umgbrp.png\" class=\"article-body-image-wrapper\"\u003e\u003cimg src=\"https://res.cloudinary.com/practicaldev/image/fetch/s--4s4K2iVx--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/6lchmjp2uggf79umgbrp.png\" alt=\"\" loading=\"lazy\"\u003e\u003c/a\u003e\u003c/p\u003e\n\n\u003cp\u003eIf this is all right, you should be able to open up Alfred, type your keyword followed by a gif title (i.e. \u003ccode\u003egifit awesome.gif\u003c/code\u003e) and hit enter. Your clipboard should have the gif you want! Try pasting and make sure it all works!\u003c/p\u003e\n\n\u003cp\u003e\u003ca href=\"https://res.cloudinary.com/practicaldev/image/fetch/s--2RjBml8N--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://wuz.fyi/gifs/infinite%2520high%2520five.gif\" class=\"article-body-image-wrapper\"\u003e\u003cimg src=\"https://res.cloudinary.com/practicaldev/image/fetch/s--2RjBml8N--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://wuz.fyi/gifs/infinite%2520high%2520five.gif\" alt=\"high fives\" loading=\"lazy\"\u003e\u003c/a\u003e\u003c/p\u003e\n\n\u003cp\u003eWay to go! I hope you get as much enjoyment and usage out of this as I have!\u003c/p\u003e\n\n\u003cp\u003e\u003ca href=\"https://res.cloudinary.com/practicaldev/image/fetch/s--UiXiTAQx--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://wuz.fyi/gifs/thats-our-show.gif\" class=\"article-body-image-wrapper\"\u003e\u003cimg src=\"https://res.cloudinary.com/practicaldev/image/fetch/s--UiXiTAQx--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://wuz.fyi/gifs/thats-our-show.gif\" alt=\"\" loading=\"lazy\"\u003e\u003c/a\u003e\u003c/p\u003e\n\n\u003cp\u003eHelp me spend too much money on hosting! What is your favorite gif? Share below!\u003c/p\u003e\n\n","social_image":"","body_markdown":"---\r\ntitle: Building a simple Alfred workflow to grab gifs from my website\r\npublished: true\r\ndescription: A fun workflow upgrade!\r\ntags: tools, alfred, gifs, productivity\r\ncover_image: https://thepracticaldev.s3.amazonaws.com/i/d0gq1cwl3uvduvn1l6kr.png\r\n---\r\n\r\n\r\nI save a lot of gifs. \r\n\r\n![](https://thepracticaldev.s3.amazonaws.com/i/wyzsfhh30j2e9ujvh1cw.png)\r\n\u003cfigcaption\u003eI've got 169 as of this article\u003c/figcaption\u003e\r\n\r\nI used to store them in Dropbox and share them with a link, but Dropbox has changed the way they handle Public folders and links, so it was a hassle to drop a gif in. Plus, I'm trying to migrate my stuff away from big services in 2019 (more coming this in a future post!) With this in mind, a week or two ago I setup a nice little [Alfred workflow](https://www.alfredapp.com) for to grab the links to my gifs and share them.  \r\n\r\n![](https://wuz.fyi/gifs/typing.gif)\r\n\u003cfigcaption\u003eActual footage of me searching and sharing gifs (not actual footage)\u003c/figcaption\u003e\r\n\r\nFirst things first, I had to set up my gif hosting. I use [NearlyFreeSpeech](https://nearlyfreespeech.net) to host [my personal site](https://wuz.fyi). I store the gifs in a folder in there and sync them back and forth using [rsync](https://www.samba.org/rsync/). Basically all you need for this step is a publicly hosted base url for your gifs - i.e. https://wuz.fyi/gifs for my site.\r\n\r\n![](https://wuz.fyi/gifs/awesome.gif)\r\n\r\nNow that you have that, let's set up a new alfred workflow. Open up your Alfred preferences and head over to the **Workflows** tab:\r\n\r\n![Alfred workflows tab](https://thepracticaldev.s3.amazonaws.com/i/dpjblvxcvgyl5jqcoi4v.png)\r\n\r\nClick the little plus in the bottom of the sidebar and click **Blank Workflow**:\r\n\r\n![Little plus button](https://thepracticaldev.s3.amazonaws.com/i/9wwb6vr6hqnfx4t7fyan.png)\r\n\r\nGive your workflow a name, description, and any other info you want to give it.\r\n\r\n![Adding the name and description](https://thepracticaldev.s3.amazonaws.com/i/xbad4jjr5i4t1te7tnem.png)\r\n\r\nOnce that is done, right click in the black area to add a workflow object and select **Inputs** \u003e **File Filter**. Give your filter a keyword, some placeholder text. Then drag and drop the types of files you want to search into the **File Types** section. For me that is gifs, pngs, and jpegs:\r\n\r\n![](https://thepracticaldev.s3.amazonaws.com/i/o0heinupqdcsf4jj5fkz.png)\r\n\r\nNow, click on over to the Search Scope tab and drag and drop your gif folder:\r\n\r\n![](https://thepracticaldev.s3.amazonaws.com/i/6ejkizjv9lkvyvvadp0z.png)\r\n\r\nSave that and let's move on! Right click again and select **Actions** \u003e **Run Script**. Once that opens, change \"with input as argv\" to \"with input as {query}\" and paste this code:\r\n\r\n```bash\r\nurlencode() {\r\n    # urlencode \u003cstring\u003e\r\n    old_lc_collate=$LC_COLLATE\r\n    LC_COLLATE=C\r\n    \r\n    local length=\"${#1}\"\r\n    for (( i = 0; i \u003c length; i++ )); do\r\n        local c=\"${1:i:1}\"\r\n        case $c in\r\n            [a-zA-Z0-9.~_-]) printf \"$c\" ;;\r\n            *) printf '%%%02X' \"'$c\" ;;\r\n        esac\r\n    done\r\n    \r\n    LC_COLLATE=$old_lc_collate\r\n}\r\nURL=\"https://wuz.fyi/gifs/\"\r\n\r\necho -ne \"${URL}$(urlencode \"$(basename {query})\")\" | pbcopy\r\n```\r\n\r\nBe sure to check every checkbox at the bottom, besides \"Backslashes\". You'll also want to set `URL` to wherever you are hosting your gifs.\r\n\r\n![](https://thepracticaldev.s3.amazonaws.com/i/6lchmjp2uggf79umgbrp.png)\r\n\r\nIf this is all right, you should be able to open up Alfred, type your keyword followed by a gif title (i.e. `gifit awesome.gif`) and hit enter. Your clipboard should have the gif you want! Try pasting and make sure it all works!\r\n\r\n![high fives](https://wuz.fyi/gifs/infinite%20high%20five.gif)\r\n\r\nWay to go! I hope you get as much enjoyment and usage out of this as I have!\r\n\r\n![](https://wuz.fyi/gifs/thats-our-show.gif)\r\n\r\nHelp me spend too much money on hosting! What is your favorite gif? Share below!\r\n","canonical_url":null,"show_comments":true,"main_image_background_hex_color":"#dddddd","published_from_feed":false,"comments_count":0,"video":null,"video_code":null,"video_source_url":null,"video_thumbnail_url":null,"video_closed_caption_track_url":null,"feed_source_url":null,"edited_at":"2019-01-15T03:52:42.354Z","crossposted_at":null,"language":"en","cached_tag_list":"tools, alfred, gifs, productivity","path":"/wuz/building-a-simple-alfred-workflow-to-grab-gifs-from-my-website-8i0","cached_user_name":"Conlin Durbin","cached_user_username":"wuz","last_comment_at":"2019-01-15T03:50:00.991Z","public_reactions_count":34},{"title":"Engineer, mechanic, craftsperson","slug":"engineer-mechanic-craftsperson-13gb","created_at":"2019-01-18T03:26:11.675Z","main_image":"https://thepracticaldev.s3.amazonaws.com/i/ybgxby8dhwi5q6vskxng.jpg","description":"What is our role as developers? How do they change?","published":true,"published_at":"2019-01-22T23:01:53.984Z","processed_html":"\u003cp\u003eI just finished replacing the battery in a car and it got me thinking about the different roles we play as developers. We go through so many different stages and roles that narrowing down any \u003cem\u003eone\u003c/em\u003e can be difficult. \u003c/p\u003e\n\n\u003cp\u003eAs I was thinking about the car and the things I feel comfortable fixing on it, I started to realize some of the roles I play at any given time. On any given day, at any given time, I may be working as an engineer, a mechanic, a craftsperson or some combination of the three. \u003c/p\u003e\n\n\u003cp\u003eLet me explain.\u003c/p\u003e\n\n\u003ch2\u003e\n  \u003ca name=\"the-engineer\" href=\"#the-engineer\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  The Engineer\n\u003c/h2\u003e\n\n\u003cp\u003eTraditionally, engineers are the people who design and architect a solution to a problem. A mechanical engineer creates solutions for mechanical products, aerospace engineers create solutions for flight. As a developer (which is often referred to as a software engineer), my job often involves designing solutions for a business requirement - which in today's world is almost always a piece of software. \u003c/p\u003e\n\n\u003cp\u003eWhen filling this role, a developer acts as an architect and planner. They decide what tools to use, what integrations to implement, and what the end product should ultimately look and feel like. They might make compromises on various parts while working with designers, project managers, or clients, but at the end of the day, they are deciding which parts to put into the software and where they are going to go.\u003c/p\u003e\n\n\u003cp\u003eThe \"developer acting as engineer\" inputs business concerns, project requirements, and code limitations and outputs a piece of (hopefully) working software.\u003c/p\u003e\n\n\u003ch2\u003e\n  \u003ca name=\"the-mechanic\" href=\"#the-mechanic\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  The Mechanic\n\u003c/h2\u003e\n\n\u003cp\u003eThe second role the developer takes on is that of mechanic. A mechanic maintains a car, appliance, or other system after it has left the planning stages. No longer can large changes be made, except perhaps in the case of a recall. A mechanic's job is to fix the problems missed by the engineer or those that are introduced due to wear and tear.\u003c/p\u003e\n\n\u003cp\u003eWith this role, the developer acts as to keep the software running. When the engineered software starts to break down - perhaps due to changing standards, outdated dependancies, or a client wants their software to do something else - the developer now acts as a mechanic. Just as a mechanic maintains and improves a car, the developer often acts to maintain and improve a piece of software. Whether they are upgrading Wordpress, fixing bugs that pop up or adding additional features, this role is all about small changes. Quite often a developer might rapidly switch between the engineer and the mechanic role, building something new then maintaining and improving it once it is in front of users.\u003c/p\u003e\n\n\u003cp\u003eThe \"developer acting as mechanic\" inputs a piece of software and outputs a similar piece of software, fine-tuned and fixed to specification.\u003c/p\u003e\n\n\u003ch2\u003e\n  \u003ca name=\"the-craftsperson\" href=\"#the-craftsperson\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  The Craftsperson\n\u003c/h2\u003e\n\n\u003cp\u003eFinally, a developer often takes on the role of a craftsperson. The craftsperson develops their skills in a particular field - perhaps woodworking or electronics. Their craft could be a hobby or a full-time job, but often they are working to improve their ability to perform that craft. They spend time thinking about how tools could be used in different ways or what might happen if they tweaked some part of their process.\u003c/p\u003e\n\n\u003cp\u003eWith this role, the developer works to improve themselves, their personal craft, and the craft of other developers. Just as a craftsperson might try a new technique or build a new tool, a developer often works to learn a new language or designs a new tool to use in their development. The developer in this role might learn how Webpack works, pick up a new programming language or work on their personal website. Again, a developer might switch between the role of engineer or mechanic and craftsperson often. Often, a newer developer might spend more time in this role, learning to hone their craft - however, a skilled developer will continue to grow as a craftsperson as well.\u003c/p\u003e\n\n\u003cp\u003eThe \"developer acting as craftsperson\" inputs their current skills and outputs some new understanding, either for themselves or for the ecosystem as a whole.\u003c/p\u003e\n\n\u003ch2\u003e\n  \u003ca name=\"the-continuous-developer\" href=\"#the-continuous-developer\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  The Continuous Developer\n\u003c/h2\u003e\n\n\u003cp\u003eThese roles are not static, which separates a developer from many other versions of these positions and roles. A developer is constantly shifting from one role to another, depending on their seniority, team composition, current interests, and much more. The \"Continuous Developer\" learns when each role is needed and works to fill the skillset require as best they can.\u003c/p\u003e\n\n\u003cp\u003eHopefully, this helps as you think about your careers. What do you think? How have you observed these or other roles throughout your career?\u003c/p\u003e\n\n","social_image":"","body_markdown":"---\r\ntitle: Engineer, mechanic, craftsperson\r\npublished: true\r\ndescription: What is our role as developers? How do they change?\r\ntags: career, beginner\r\ncover_image: https://thepracticaldev.s3.amazonaws.com/i/ybgxby8dhwi5q6vskxng.jpg\r\n---\r\n\r\nI just finished replacing the battery in a car and it got me thinking about the different roles we play as developers. We go through so many different stages and roles that narrowing down any _one_ can be difficult. \r\n\r\nAs I was thinking about the car and the things I feel comfortable fixing on it, I started to realize some of the roles I play at any given time. On any given day, at any given time, I may be working as an engineer, a mechanic, a craftsperson or some combination of the three. \r\n\r\nLet me explain.\r\n\r\n\r\n## The Engineer\r\n\r\nTraditionally, engineers are the people who design and architect a solution to a problem. A mechanical engineer creates solutions for mechanical products, aerospace engineers create solutions for flight. As a developer (which is often referred to as a software engineer), my job often involves designing solutions for a business requirement - which in today's world is almost always a piece of software. \r\n\r\nWhen filling this role, a developer acts as an architect and planner. They decide what tools to use, what integrations to implement, and what the end product should ultimately look and feel like. They might make compromises on various parts while working with designers, project managers, or clients, but at the end of the day, they are deciding which parts to put into the software and where they are going to go.\r\n\r\nThe \"developer acting as engineer\" inputs business concerns, project requirements, and code limitations and outputs a piece of (hopefully) working software.\r\n\r\n## The Mechanic\r\n\r\nThe second role the developer takes on is that of mechanic. A mechanic maintains a car, appliance, or other system after it has left the planning stages. No longer can large changes be made, except perhaps in the case of a recall. A mechanic's job is to fix the problems missed by the engineer or those that are introduced due to wear and tear.\r\n\r\nWith this role, the developer acts as to keep the software running. When the engineered software starts to break down - perhaps due to changing standards, outdated dependancies, or a client wants their software to do something else - the developer now acts as a mechanic. Just as a mechanic maintains and improves a car, the developer often acts to maintain and improve a piece of software. Whether they are upgrading Wordpress, fixing bugs that pop up or adding additional features, this role is all about small changes. Quite often a developer might rapidly switch between the engineer and the mechanic role, building something new then maintaining and improving it once it is in front of users.\r\n\r\nThe \"developer acting as mechanic\" inputs a piece of software and outputs a similar piece of software, fine-tuned and fixed to specification.\r\n\r\n## The Craftsperson\r\n\r\nFinally, a developer often takes on the role of a craftsperson. The craftsperson develops their skills in a particular field - perhaps woodworking or electronics. Their craft could be a hobby or a full-time job, but often they are working to improve their ability to perform that craft. They spend time thinking about how tools could be used in different ways or what might happen if they tweaked some part of their process.\r\n\r\nWith this role, the developer works to improve themselves, their personal craft, and the craft of other developers. Just as a craftsperson might try a new technique or build a new tool, a developer often works to learn a new language or designs a new tool to use in their development. The developer in this role might learn how Webpack works, pick up a new programming language or work on their personal website. Again, a developer might switch between the role of engineer or mechanic and craftsperson often. Often, a newer developer might spend more time in this role, learning to hone their craft - however, a skilled developer will continue to grow as a craftsperson as well.\r\n\r\nThe \"developer acting as craftsperson\" inputs their current skills and outputs some new understanding, either for themselves or for the ecosystem as a whole.\r\n\r\n## The Continuous Developer\r\n\r\nThese roles are not static, which separates a developer from many other versions of these positions and roles. A developer is constantly shifting from one role to another, depending on their seniority, team composition, current interests, and much more. The \"Continuous Developer\" learns when each role is needed and works to fill the skillset require as best they can.\r\n\r\nHopefully, this helps as you think about your careers. What do you think? How have you observed these or other roles throughout your career?\r\n","canonical_url":null,"show_comments":true,"main_image_background_hex_color":"#dddddd","published_from_feed":false,"comments_count":0,"video":null,"video_code":null,"video_source_url":null,"video_thumbnail_url":null,"video_closed_caption_track_url":null,"feed_source_url":null,"edited_at":null,"crossposted_at":null,"language":"en","cached_tag_list":"career, beginners","path":"/wuz/engineer-mechanic-craftsperson-13gb","cached_user_name":"Conlin Durbin","cached_user_username":"wuz","last_comment_at":"2019-01-22T23:01:53.984Z","public_reactions_count":36},{"title":"A lighter dev.to theme","slug":"a-lighter-devto-theme-3hh5","created_at":"2019-01-18T21:30:55.735Z","main_image":null,"description":"Adding a bit of simple CSS to make articles a bit easier to read","published":true,"published_at":"2019-01-18T21:30:55.721Z","processed_html":"\u003cp\u003eI recently saw this issue brought up on the dev.to repo review:\u003c/p\u003e\n\n\n\u003cdiv class=\"ltag_github-liquid-tag\"\u003e\n  \u003ch1\u003e\n    \u003ca href=\"https://github.com/thepracticaldev/dev.to/issues/1470\"\u003e\n      \u003cimg class=\"github-logo\" alt=\"GitHub logo\" src=\"https://res.cloudinary.com/practicaldev/image/fetch/s--vJ70wriM--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://practicaldev-herokuapp-com.freetls.fastly.net/assets/github-logo-ba8488d21cd8ee1fee097b8410db9deaa41d0ca30b004c0c63de0a479114156f.svg\" loading=\"lazy\"\u003e\n      \u003cspan class=\"issue-title\"\u003e\n        UI contrast and drawing attention to the right places\n      \u003c/span\u003e\n      \u003cspan class=\"issue-number\"\u003e#1470\u003c/span\u003e\n    \u003c/a\u003e\n  \u003c/h1\u003e\n  \u003cdiv class=\"github-thread\"\u003e\n    \u003cdiv class=\"timeline-comment-header\"\u003e\n      \u003ca href=\"https://github.com/vladinator1000\"\u003e\n        \u003cimg class=\"github-liquid-tag-img\" src=\"https://res.cloudinary.com/practicaldev/image/fetch/s--Z_028hu3--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://avatars1.githubusercontent.com/u/1226564%3Fv%3D4\" alt=\"vladinator1000 avatar\" loading=\"lazy\"\u003e\n      \u003c/a\u003e\n      \u003cspan class=\"arrow-left-outer\"\u003e\u003c/span\u003e\n      \u003cspan class=\"arrow-left-inner\"\u003e\u003c/span\u003e\n      \u003cdiv class=\"timeline-comment-header-text\"\u003e\n        \u003cstrong\u003e\n          \u003ca href=\"https://github.com/vladinator1000\"\u003evladinator1000\u003c/a\u003e\n        \u003c/strong\u003e posted on \u003ca href=\"https://github.com/thepracticaldev/dev.to/issues/1470\"\u003e\u003ctime datetime=\"2019-01-06T16:11:29Z\"\u003eJan 06, 2019\u003c/time\u003e\u003c/a\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"ltag-github-body\"\u003e\n      \u003cp\u003e\u003cstrong\u003eIs your feature request related to a problem? Please describe.\u003c/strong\u003e\nThe article view is hard to read because the UI makes you look to the right instead of at the article:\n\u003ca href=\"https://user-images.githubusercontent.com/1226564/50738262-cef87980-11c9-11e9-812c-c111ec1c0ed2.jpg\" target=\"_blank\" rel=\"nofollow\"\u003e\u003cimg src=\"https://res.cloudinary.com/practicaldev/image/fetch/s--imgmfjB_--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://user-images.githubusercontent.com/1226564/50738262-cef87980-11c9-11e9-812c-c111ec1c0ed2.jpg\" alt=\"example of box-shadow being too distracting\" style=\"max-width:100%;\" loading=\"lazy\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cp\u003eBecause dev.to is about reading articles, the article should attract the most attention. The box-shadows are very flavouful, but when there's a lot of text to read it quickly gets tiring to read.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eDescribe the solution you'd like\u003c/strong\u003e\nWe can make it easy on the eyes by enforcing a visual hierarchy by tweaking color values, so that the user doesn't have to try hard to look away from the right (like I did). Basically the area of most importance (the article) would have the most contrast, the second area in importance would have less contrast (black would turn to gray), and so on...\u003c/p\u003e\n\u003cp\u003eHere's what I came up with in the browser inspector, I accidentally made the article text gray though, it should be black:\n\u003ca href=\"https://user-images.githubusercontent.com/1226564/50738528-eab14f00-11cc-11e9-85b7-7126e8f5683a.png\" target=\"_blank\" rel=\"nofollow\"\u003e\u003cimg src=\"https://res.cloudinary.com/practicaldev/image/fetch/s--H6c0_8n6--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://user-images.githubusercontent.com/1226564/50738528-eab14f00-11cc-11e9-85b7-7126e8f5683a.png\" alt=\"reduced contrast of less important elements\" style=\"max-width:100%;\" loading=\"lazy\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eDescribe alternatives you've considered\u003c/strong\u003e\nCould also reduce the color value of every less important element, like text, not just the box-shadows, so that the article font is blacker and hence have more contrast than the less important stuff.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eAdditional context\u003c/strong\u003e\nThis reasoning is rooted in visual design principles, see section 3, titled Value, of this \u003ca href=\"https://nexus.leagueoflegends.com/wp-content/uploads/2017/10/VFX_Styleguide_final_public_hidpjqwx7lqyx0pjj3ss.pdf\" rel=\"nofollow\"\u003estyle guide\u003c/a\u003e.\u003c/p\u003e\n\u003cp\u003eHaving a hierarchy of value ranges for specific elements can improve readability and accessibility. When I first saw dev.to I quite liked the bold box shadow, I think it adds personality. But with time I just naturally resort to the Firefox reader view because the article view is too straining for my eyes.\u003c/p\u003e\n\u003cp\u003eThere is an issue related to this like #1273, but I think it doesn't make sense in the big picture. The overall experience should be non-straneous so that users can read more articles, only after this is accomplished should people think about how to get a better lighthouse score.\u003c/p\u003e\n\n    \u003c/div\u003e\n    \u003cdiv class=\"gh-btn-container\"\u003e\u003ca class=\"gh-btn\" href=\"https://github.com/thepracticaldev/dev.to/issues/1470\"\u003eView on GitHub\u003c/a\u003e\u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n\n\n\u003cp\u003eI thought I'd take a swing at simplifying the article theme a bit, using the \u003ca href=\"https://github.com/openstyles/stylus\"\u003eStylus\u003c/a\u003e extension. Here's where I ended up:\u003c/p\u003e\n\n\u003cp\u003e\u003ca href=\"https://res.cloudinary.com/practicaldev/image/fetch/s--9pIB75R5--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/v2rebirvofsr62yz9hjo.png\" class=\"article-body-image-wrapper\"\u003e\u003cimg src=\"https://res.cloudinary.com/practicaldev/image/fetch/s--9pIB75R5--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/v2rebirvofsr62yz9hjo.png\" alt=\"screenshot\" loading=\"lazy\"\u003e\u003c/a\u003e\u003c/p\u003e\n\n\u003cp\u003eIf you like this and want to install it, you can \u003ca href=\"https://userstyles.org/styles/167958/dev-to-simple-style\"\u003efind it here\u003c/a\u003e!\u003c/p\u003e\n\n\u003cp\u003eWhat do you think? What would you change?\u003c/p\u003e\n\n","social_image":"","body_markdown":"---\r\ntitle: A lighter dev.to theme\r\npublished: true\r\ndescription: Adding a bit of simple CSS to make articles a bit easier to read\r\ntags: meta, discuss\r\n---\r\n\r\nI recently saw this issue brought up on the dev.to repo review:\r\n\r\n{% github https://github.com/thepracticaldev/dev.to/issues/1470 %}\r\n\r\nI thought I'd take a swing at simplifying the article theme a bit, using the [Stylus](https://github.com/openstyles/stylus) extension. Here's where I ended up:\r\n\r\n![screenshot](https://thepracticaldev.s3.amazonaws.com/i/v2rebirvofsr62yz9hjo.png)\r\n\r\nIf you like this and want to install it, you can [find it here](https://userstyles.org/styles/167958/dev-to-simple-style)!\r\n\r\nWhat do you think? What would you change?\r\n\r\n\r\n\r\n","canonical_url":null,"show_comments":true,"main_image_background_hex_color":"#dddddd","published_from_feed":false,"comments_count":2,"video":null,"video_code":null,"video_source_url":null,"video_thumbnail_url":null,"video_closed_caption_track_url":null,"feed_source_url":null,"edited_at":null,"crossposted_at":null,"language":"en","cached_tag_list":"meta, discuss","path":"/wuz/a-lighter-devto-theme-3hh5","cached_user_name":"Conlin Durbin","cached_user_username":"wuz","last_comment_at":"2019-01-20T16:26:34.915Z","public_reactions_count":14},{"title":"Introducing Dank Neon, a new open source code theme!","slug":"introducing-dank-neon-a-new-open-source-code-theme-2mh","created_at":"2019-01-19T18:35:15.513Z","main_image":"https://dankneon.com/vscode/assets/vscode.png","description":"a danker, more neon theme for everywhere you write code","published":true,"published_at":"2019-01-19T18:35:15.498Z","processed_html":"\u003cp\u003eHello friends! I have an exciting new project to share with you! For the past few months, \u003ca href=\"https://twitter.com/__jacobi\"\u003ea friend\u003c/a\u003e and I have been tweaking and refining \u003ca href=\"https://dankneon.com\"\u003eDank Neon\u003c/a\u003e, a new editor theme for lovers of neon! \u003c/p\u003e\n\n\u003cp\u003eWe are working hard to get the community built out and would love any input and contributions that you have! The whole project is open source and you can find it \u003ca href=\"https://github.com/DankNeon\"\u003ehere on Github\u003c/a\u003e. I'll be spending some time soon to set up some good first issues and making a list of next steps! Here are some screenshots of Dank Neon in action:\u003c/p\u003e\n\n\u003cfigure\u003e\u003cp\u003e\u003ca href=\"https://res.cloudinary.com/practicaldev/image/fetch/s--kLIHWD1r--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dankneon.com/vscode/assets/vscode.png\" class=\"article-body-image-wrapper\"\u003e\u003cimg src=\"https://res.cloudinary.com/practicaldev/image/fetch/s--kLIHWD1r--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dankneon.com/vscode/assets/vscode.png\" alt=\"dank neon for vs code\" loading=\"lazy\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cfigcaption\u003eDank Neon for VS Code\u003c/figcaption\u003e\u003c/figure\u003e\n\n\n\n\u003cfigure\u003e\u003cp\u003e\u003ca href=\"https://res.cloudinary.com/practicaldev/image/fetch/s--PFtOmqmL--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dankneon.com/iterm/assets/iterm.png\" class=\"article-body-image-wrapper\"\u003e\u003cimg src=\"https://res.cloudinary.com/practicaldev/image/fetch/s--PFtOmqmL--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dankneon.com/iterm/assets/iterm.png\" alt=\"dank neon for iterm\" loading=\"lazy\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cfigcaption\u003eDank Neon for iTerm\u003c/figcaption\u003e\u003c/figure\u003e\n\n\n\n\u003cfigure\u003e\u003cp\u003e\u003ca href=\"https://res.cloudinary.com/practicaldev/image/fetch/s--FiCAfuis--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dankneon.com/sublime/assets/sublime.png\" class=\"article-body-image-wrapper\"\u003e\u003cimg src=\"https://res.cloudinary.com/practicaldev/image/fetch/s--FiCAfuis--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dankneon.com/sublime/assets/sublime.png\" alt=\"dank neon for sublime\" loading=\"lazy\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cfigcaption\u003eDank Neon for Sublime Text\u003c/figcaption\u003e\u003c/figure\u003e\n\n\n\n\u003cp\u003eWhat do you think about the theme? What do you like? What do you hate? What tools should we look at adding the theme to?\u003c/p\u003e\n\n","social_image":"","body_markdown":"---\r\ntitle: Introducing Dank Neon, a new open source code theme!\r\npublished: true\r\ncover_image: https://dankneon.com/vscode/assets/vscode.png\r\ndescription: a danker, more neon theme for everywhere you write code\r\ntags: code, opensource, contributorswanted\r\n---\r\n\r\nHello friends! I have an exciting new project to share with you! For the past few months, [a friend](https://twitter.com/__jacobi) and I have been tweaking and refining [Dank Neon](https://dankneon.com), a new editor theme for lovers of neon! \r\n\r\nWe are working hard to get the community built out and would love any input and contributions that you have! The whole project is open source and you can find it [here on Github](https://github.com/DankNeon). I'll be spending some time soon to set up some good first issues and making a list of next steps! Here are some screenshots of Dank Neon in action:\r\n\r\n![dank neon for vs code](https://dankneon.com/vscode/assets/vscode.png)\r\n\u003cfigcaption\u003eDank Neon for VS Code\u003c/figcaption\u003e\r\n\r\n\r\n![dank neon for iterm](https://dankneon.com/iterm/assets/iterm.png)\r\n\u003cfigcaption\u003eDank Neon for iTerm\u003c/figcaption\u003e\r\n\r\n\r\n![dank neon for sublime](https://dankneon.com/sublime/assets/sublime.png)\r\n\u003cfigcaption\u003eDank Neon for Sublime Text\u003c/figcaption\u003e\r\n\r\nWhat do you think about the theme? What do you like? What do you hate? What tools should we look at adding the theme to?","canonical_url":null,"show_comments":true,"main_image_background_hex_color":"#dddddd","published_from_feed":false,"comments_count":73,"video":null,"video_code":null,"video_source_url":null,"video_thumbnail_url":null,"video_closed_caption_track_url":null,"feed_source_url":null,"edited_at":null,"crossposted_at":null,"language":"en","cached_tag_list":"code, opensource, contributorswanted","path":"/wuz/introducing-dank-neon-a-new-open-source-code-theme-2mh","cached_user_name":"Conlin Durbin","cached_user_username":"wuz","last_comment_at":"2020-02-09T05:58:20.269Z","public_reactions_count":157},{"title":"Developer Tools: The Integrated Development Environment","slug":"developer-tools-the-integrated-development-environment-5am4-temp-slug-7863074","created_at":"2019-01-26T18:05:55.117Z","main_image":"https://thepracticaldev.s3.amazonaws.com/i/oacggfoe1db3ywj58s3j.png","description":"Test2","published":false,"published_at":null,"processed_html":"\u003cp\u003eTest2\u003c/p\u003e\n\n","social_image":null,"body_markdown":"---\r\ntitle: Developer Tools: The Integrated Development Environment\r\npublished: false\r\ndescription: \r\ncover_image: https://thepracticaldev.s3.amazonaws.com/i/oacggfoe1db3ywj58s3j.png\r\nseries: Learning Developer Tools\r\ntags: beginner, career, tools\r\n---\r\n\r\nTest2","canonical_url":null,"show_comments":true,"main_image_background_hex_color":"#dddddd","published_from_feed":false,"comments_count":0,"video":null,"video_code":null,"video_source_url":null,"video_thumbnail_url":null,"video_closed_caption_track_url":null,"feed_source_url":null,"edited_at":null,"crossposted_at":null,"language":null,"cached_tag_list":"beginners, career, tools","path":"/wuz/developer-tools-the-integrated-development-environment-5am4-temp-slug-7863074","cached_user_name":"Conlin Durbin","cached_user_username":"wuz","last_comment_at":"2017-01-01T05:00:00.000Z","public_reactions_count":0},{"title":"Developer Tools: Debuggers","slug":"developer-tools-debuggers-4772","created_at":"2019-01-26T18:05:56.495Z","main_image":"https://thepracticaldev.s3.amazonaws.com/i/l7awk7sn4yply3n7inuh.png","description":"Eek! Bugs!","published":true,"published_at":"2019-03-04T04:22:35.418Z","processed_html":"\u003cp\u003eSorry, this post is coming a day late! Had some family stuff come up and didn't get a chance to finish it yesterday. \u003c/p\u003e\n\n\u003cp\u003eHello again, friends! Let's talk about debuggers. \u003c/p\u003e\n\n\u003ch1\u003e\n  \u003ca name=\"squishing-bugs-and-taking-names\" href=\"#squishing-bugs-and-taking-names\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  Squishing bugs and taking names\n\u003c/h1\u003e\n\n\u003cp\u003eWhat is a debugger? Well, usually when we talk about bugs in a computer system we are discussing a few different things. First, there is code that is written incorrectly. We all do this - programming is a constant battle between time and quality. Secondly, there are unintended consequences - maybe an API changes or a vendor removes some code you are relying on. Finally, there are what my company calls immaculate defections - bugs that just appear, seemingly out of nowhere.\u003c/p\u003e\n\n\u003cp\u003eA debugger is a program that helps you research and resolve bugs. They can differ, depending on use case - some work to debug compiled programs, some allow access to currently running code, and others debug web systems. Many programming languages include debuggers, which make it easy to start and stop your code at certain points. Logging is an often used method of debugging as well. \u003c/p\u003e\n\n\u003ch1\u003e\n  \u003ca name=\"what-do-we-debug\" href=\"#what-do-we-debug\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  What do we debug?\n\u003c/h1\u003e\n\n\u003cp\u003eDepending on the language there are a couple of things we might need to debug.\u003c/p\u003e\n\n\u003ch2\u003e\n  \u003ca name=\"the-stack\" href=\"#the-stack\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  The Stack\n\u003c/h2\u003e\n\n\u003cp\u003eThis is where many developers spend time with debuggers. The stack is the layers of functions that make up a program. For instance, we might have a function called \u003ccode\u003eReadFile\u003c/code\u003e, which is being called by another function called \u003ccode\u003eOpenLog\u003c/code\u003e, which was called by a \u003ccode\u003emain\u003c/code\u003e function. In this case, the stack would look like this:\u003cbr\u003e\n\u003c/p\u003e\n\n\u003cdiv class=\"highlight\"\u003e\u003cpre class=\"highlight plaintext\"\u003e\u003ccode\u003e------------\n| ReadFile | \u0026lt;- This is the top \"frame\" of the stack, the function we are currently in\n------------\n| OpenLog  | \u0026lt;- This is the next frame, which is what called the first frame\n------------\n|   main   | \u0026lt;- This is the bottom-most frame, which is started all the other calls\n------------\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\n\n\n\n\u003cp\u003eUsing a \u003ca href=\"https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Statements/debugger\"\u003e\u003ccode\u003edebugger;\u003c/code\u003e\u003c/a\u003e statement in Javascript will pause the execution of the stack, allowing you to look at a program in a certain state. This can also be down using breakpoints in a debugging program. Similarly, \u003ccode\u003ebinding.pry\u003c/code\u003e will allow you to do the same thing in Ruby. \u003c/p\u003e\n\n\u003cp\u003ePausing stack execution is the bread and butter of debugging. It allows you to see what is happening inside a function at any given time. This is incredibly useful when trying to track down what could be causing a bug and to check any assumptions you might be making about how a function works.\u003c/p\u003e\n\n\u003cp\u003eA \u003cstrong\u003estack trace\u003c/strong\u003e is a textual representation of a stack, after an error has happened.\u003c/p\u003e\n\n\u003cp\u003eThis is a good demonstration of a Javascript Stack Trace.\u003c/p\u003e\n\n\u003cp\u003e\u003ca href=\"https://medium.freecodecamp.org/understanding-the-javascript-call-stack-861e41ae61d4\"\u003e\u003cimg src=\"https://res.cloudinary.com/practicaldev/image/fetch/s--2woefS2R--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images-1.medium.com/max/1600/1%2ALIuELJ2RTtwWExRWGdu_Hw.png\" alt=\"a javascript stack trace\" loading=\"lazy\"\u003e\u003c/a\u003e\u003c/p\u003e\n\n\u003ch2\u003e\n  \u003ca name=\"memory\" href=\"#memory\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  Memory\n\u003c/h2\u003e\n\n\u003cp\u003eIn some languages like C, a developer might need to manage memory. Memory debuggers help you debug things like a memory overflow or improper garbage collection. Most modern lanugages handle this, making memory debugging less useful today.\u003c/p\u003e\n\n\u003ch2\u003e\n  \u003ca name=\"the-compiled-code\" href=\"#the-compiled-code\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  The Compiled Code\n\u003c/h2\u003e\n\n\u003cp\u003eA debugger like \u003ca href=\"https://www.gnu.org/software/gdb/\"\u003e\u003ccode\u003egdb\u003c/code\u003e\u003c/a\u003e allows you to take a peek inside some compiled code. Many modern debuggers inherit ideas from \u003ccode\u003egdb\u003c/code\u003e, allowing you to set breakpoints in code (even if you don't own it) and walk through the code using \u003ccode\u003enext\u003c/code\u003e and \u003ccode\u003econtinue\u003c/code\u003e statements.\u003c/p\u003e\n\n\u003ch2\u003e\n  \u003ca name=\"output\" href=\"#output\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  Output\n\u003c/h2\u003e\n\n\u003cp\u003eDebugging output is a great way to see what assumptions you might be making about a function or a program. This is most often done by dropping in console log statements and printing out variable values as you run a function. I would say this is 98% of the debugging I do on a daily basis. I really only step into the bigger debugging tools when I am working on a really difficult problem.\u003c/p\u003e\n\n\u003ch2\u003e\n  \u003ca name=\"metadata\" href=\"#metadata\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  Metadata\n\u003c/h2\u003e\n\n\u003cp\u003eFinally, sometimes you need to test the \"metadata\" around a function - things like what it is saving, what it is logging, and what third-party API's it might be accessing. This is a big one in Javascript, as often times you are interacting with browser APIs like \u003ccode\u003elocalstorage\u003c/code\u003e or service workers. Luckily the browser DevTools help a lot with this. Here is the example of dev.to's localstorage, as viewed through the Firefox Dev Tools:\u003c/p\u003e\n\n\u003cp\u003e\u003ca href=\"https://res.cloudinary.com/practicaldev/image/fetch/s--46yCW7mG--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/vixxggu0vxv5ibjzyqw8.png\" class=\"article-body-image-wrapper\"\u003e\u003cimg src=\"https://res.cloudinary.com/practicaldev/image/fetch/s--46yCW7mG--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/vixxggu0vxv5ibjzyqw8.png\" alt=\"\" loading=\"lazy\"\u003e\u003c/a\u003e\u003c/p\u003e\n\n\u003cblockquote\u003e\n\u003cp\u003eFun fact - the first instance of an actual computer bug was by Grace Hopper in 1947. \u003ca href=\"https://www.computerhistory.org/tdih/september/9/\"\u003eA moth had gotten caught between the relays\u003c/a\u003e.\u003c/p\u003e\n\u003c/blockquote\u003e\n\n\u003ch1\u003e\n  \u003ca name=\"debugging-scenarios\" href=\"#debugging-scenarios\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  Debugging Scenarios\n\u003c/h1\u003e\n\n\u003cp\u003eI don't have a lot more to add to this post, but I want to walk through some common scenarios that I find myself debugging.\u003c/p\u003e\n\n\u003ch2\u003e\n  \u003ca name=\"peeking-into-a-functions-flow\" href=\"#peeking-into-a-functions-flow\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  Peeking into a functions flow\n\u003c/h2\u003e\n\n\u003cp\u003eDebugging programs is all about validating or invalidating the assumptions you are making about said program. Sometimes, those assumptions are about what happens inside a function. Dropping a debugger statement or adding a breakpoint is a great way to stop the execution of a function and walk through it step by step. Pair this with some \u003ca href=\"https://en.wikipedia.org/wiki/Rubber_duck_debugging\"\u003erubber duck debugging\u003c/a\u003e and you'll be well on your way to finding the problem.\u003c/p\u003e\n\n\u003ch2\u003e\n  \u003ca name=\"evaluating-the-process-of-a-thirdparty-library\" href=\"#evaluating-the-process-of-a-thirdparty-library\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  Evaluating the process of a third-party library\n\u003c/h2\u003e\n\n\u003cp\u003eWhen you are using a library or a framework, it can help to see how they are using/manipulating the data that you are sending to them. As an example, in React it can be really helpful to debug how often a component is re-rendered.\u003c/p\u003e\n\n\u003ch2\u003e\n  \u003ca name=\"tightening-the-scope\" href=\"#tightening-the-scope\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  Tightening the scope\n\u003c/h2\u003e\n\n\u003cp\u003eAnother really common scenario is using a debugger to find where a problem is \u003cem\u003enot\u003c/em\u003e. Often times you may only have 20-30 minutes to spend researching a bug, before you have to do other work. In these scenarios, you can often narrow down the problem set a lot using a debugger. Step through all the code that touches the buggy code and you'll start to get a fuller picture of exactly what is happening. Just make sure you write it down! Never research twice what you could have written down once!\u003c/p\u003e\n\n\u003cp\u003eThere are so many debuggers out there and a good number have great documentation. In the future, I hope to do a more in-depth post about how to debug (especially in Javascript), but for now hopefully this will help! \u003c/p\u003e\n\n\u003cp\u003eWhat is your experience with debuggers? What kind of questions do you have about deubgging code?\u003c/p\u003e\n\n\n\u003chr\u003e\n\n\u003cp\u003eWant to read more like this? I \u003ca href=\"https://twitter.com/CallMeWuz\"\u003etweet\u003c/a\u003e all my posts!\u003c/p\u003e\n\n","social_image":null,"body_markdown":"---\r\ntitle: Developer Tools: Debuggers\r\npublished: true\r\ndescription: Eek! Bugs!\r\ncover_image: https://thepracticaldev.s3.amazonaws.com/i/l7awk7sn4yply3n7inuh.png\r\nseries: Learning Developer Tools\r\ntags: beginner, career, tools\r\n---\r\n\r\nSorry, this post is coming a day late! Had some family stuff come up and didn't get a chance to finish it yesterday. \r\n\r\nHello again, friends! Let's talk about debuggers. \r\n\r\n# Squishing bugs and taking names\r\n\r\nWhat is a debugger? Well, usually when we talk about bugs in a computer system we are discussing a few different things. First, there is code that is written incorrectly. We all do this - programming is a constant battle between time and quality. Secondly, there are unintended consequences - maybe an API changes or a vendor removes some code you are relying on. Finally, there are what my company calls immaculate defections - bugs that just appear, seemingly out of nowhere.\r\n\r\nA debugger is a program that helps you research and resolve bugs. They can differ, depending on use case - some work to debug compiled programs, some allow access to currently running code, and others debug web systems. Many programming languages include debuggers, which make it easy to start and stop your code at certain points. Logging is an often used method of debugging as well. \r\n\r\n# What do we debug?\r\n\r\nDepending on the language there are a couple of things we might need to debug.\r\n\r\n## The Stack\r\n\r\nThis is where many developers spend time with debuggers. The stack is the layers of functions that make up a program. For instance, we might have a function called `ReadFile`, which is being called by another function called `OpenLog`, which was called by a `main` function. In this case, the stack would look like this:\r\n\r\n```\r\n------------\r\n| ReadFile | \u003c- This is the top \"frame\" of the stack, the function we are currently in\r\n------------\r\n| OpenLog  | \u003c- This is the next frame, which is what called the first frame\r\n------------\r\n|   main   | \u003c- This is the bottom-most frame, which is started all the other calls\r\n------------\r\n```\r\n\r\nUsing a [`debugger;`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Statements/debugger) statement in Javascript will pause the execution of the stack, allowing you to look at a program in a certain state. This can also be down using breakpoints in a debugging program. Similarly, `binding.pry` will allow you to do the same thing in Ruby. \r\n\r\nPausing stack execution is the bread and butter of debugging. It allows you to see what is happening inside a function at any given time. This is incredibly useful when trying to track down what could be causing a bug and to check any assumptions you might be making about how a function works.\r\n\r\nA **stack trace** is a textual representation of a stack, after an error has happened.\r\n\r\nThis is a good demonstration of a Javascript Stack Trace.\r\n\r\n[![a javascript stack trace](https://cdn-images-1.medium.com/max/1600/1*LIuELJ2RTtwWExRWGdu_Hw.png)](https://medium.freecodecamp.org/understanding-the-javascript-call-stack-861e41ae61d4)\r\n\r\n## Memory\r\n\r\nIn some languages like C, a developer might need to manage memory. Memory debuggers help you debug things like a memory overflow or improper garbage collection. Most modern lanugages handle this, making memory debugging less useful today.\r\n\r\n## The Compiled Code\r\n\r\nA debugger like [`gdb`](https://www.gnu.org/software/gdb/) allows you to take a peek inside some compiled code. Many modern debuggers inherit ideas from `gdb`, allowing you to set breakpoints in code (even if you don't own it) and walk through the code using `next` and `continue` statements.\r\n\r\n## Output\r\n\r\nDebugging output is a great way to see what assumptions you might be making about a function or a program. This is most often done by dropping in console log statements and printing out variable values as you run a function. I would say this is 98% of the debugging I do on a daily basis. I really only step into the bigger debugging tools when I am working on a really difficult problem.\r\n\r\n## Metadata\r\n\r\nFinally, sometimes you need to test the \"metadata\" around a function - things like what it is saving, what it is logging, and what third-party API's it might be accessing. This is a big one in Javascript, as often times you are interacting with browser APIs like `localstorage` or service workers. Luckily the browser DevTools help a lot with this. Here is the example of dev.to's localstorage, as viewed through the Firefox Dev Tools:\r\n\r\n![](https://thepracticaldev.s3.amazonaws.com/i/vixxggu0vxv5ibjzyqw8.png)\r\n\r\n\u003e Fun fact - the first instance of an actual computer bug was by Grace Hopper in 1947. [A moth had gotten caught between the relays](https://www.computerhistory.org/tdih/september/9/).\r\n\r\n# Debugging Scenarios\r\n\r\nI don't have a lot more to add to this post, but I want to walk through some common scenarios that I find myself debugging.\r\n\r\n## Peeking into a functions flow\r\n\r\nDebugging programs is all about validating or invalidating the assumptions you are making about said program. Sometimes, those assumptions are about what happens inside a function. Dropping a debugger statement or adding a breakpoint is a great way to stop the execution of a function and walk through it step by step. Pair this with some [rubber duck debugging](https://en.wikipedia.org/wiki/Rubber_duck_debugging) and you'll be well on your way to finding the problem.\r\n\r\n## Evaluating the process of a third-party library\r\n\r\nWhen you are using a library or a framework, it can help to see how they are using/manipulating the data that you are sending to them. As an example, in React it can be really helpful to debug how often a component is re-rendered.\r\n\r\n## Tightening the scope\r\n\r\nAnother really common scenario is using a debugger to find where a problem is _not_. Often times you may only have 20-30 minutes to spend researching a bug, before you have to do other work. In these scenarios, you can often narrow down the problem set a lot using a debugger. Step through all the code that touches the buggy code and you'll start to get a fuller picture of exactly what is happening. Just make sure you write it down! Never research twice what you could have written down once!\r\n\r\nThere are so many debuggers out there and a good number have great documentation. In the future, I hope to do a more in-depth post about how to debug (especially in Javascript), but for now hopefully this will help! \r\n\r\nWhat is your experience with debuggers? What kind of questions do you have about deubgging code?\r\n\r\n---\r\n\r\nWant to read more like this? I [tweet](https://twitter.com/CallMeWuz) all my posts!","canonical_url":null,"show_comments":true,"main_image_background_hex_color":"#dddddd","published_from_feed":false,"comments_count":0,"video":null,"video_code":null,"video_source_url":null,"video_thumbnail_url":null,"video_closed_caption_track_url":null,"feed_source_url":null,"edited_at":null,"crossposted_at":null,"language":null,"cached_tag_list":"beginners, career, tools","path":"/wuz/developer-tools-debuggers-4772","cached_user_name":"Conlin Durbin","cached_user_username":"wuz","last_comment_at":"2019-03-04T04:22:35.418Z","public_reactions_count":10},{"title":"Developer Tools: Version Control","slug":"developer-tools-version-control-2mkk","created_at":"2019-01-26T18:06:00.197Z","main_image":"https://thepracticaldev.s3.amazonaws.com/i/vxot2vy2lxhmh2o8z0ve.png","description":"Let's learn about Version Control","published":true,"published_at":"2019-03-01T22:04:53.096Z","processed_html":"\u003cp\u003eAlright folks. Welcome back!\u003c/p\u003e\n\n\u003cp\u003eLet's talk version control.\u003c/p\u003e\n\n\u003ch1\u003e\n  \u003ca name=\"what-is-version-control\" href=\"#what-is-version-control\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  What is version control?\n\u003c/h1\u003e\n\n\u003cp\u003eHave you ever been working on a site/app/piece of code and made changes, only to realize you need to go back to an earlier version? Or maybe you have had the altogether nightmarish experience of working with another developer, while not using version control. The one where you have to send a message that says \"hey, I am working on user/login.php, don't edit it for a while.\" If you have, you know why version control exists. In it's most basic form, version control software helps you track the changes to a set of files and directories. You pass it some special commands and it works it's magic to store the difference between the last time you ran those commands and this time.\u003c/p\u003e\n\n\u003cp\u003eThere are a few options when it comes to version control, and every software shop is a little different. The most common is probably \u003ccode\u003egit\u003c/code\u003e, but there is also \u003ccode\u003esvn\u003c/code\u003e, \u003ccode\u003ecsv\u003c/code\u003e, and \u003ccode\u003ehg\u003c/code\u003e. I'm sure there are others too. Add on top of this the centralized version control software hosts like Github and Bitbucket and you start to get a wide landscape of possible setups. This article is going to focus on \u003ccode\u003egit\u003c/code\u003e and Github, because that is probably what \u003cem\u003emost\u003c/em\u003e people reading will be using. There are other tutorials for other version control systems.\u003c/p\u003e\n\n\u003ch1\u003e\n  \u003ca name=\"getting-started-with-raw-git-endraw-\" href=\"#getting-started-with-raw-git-endraw-\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  Getting started with \u003ccode\u003egit\u003c/code\u003e\n\u003c/h1\u003e\n\n\u003cp\u003eLet's just jump right in. There are a few major concepts in \u003ccode\u003egit\u003c/code\u003e that we will want to cover.\u003c/p\u003e\n\n\u003ch2\u003e\n  \u003ca name=\"repositories-repo\" href=\"#repositories-repo\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  Repositories (repo)\n\u003c/h2\u003e\n\n\u003cp\u003eRepositories are the base unit in a \u003ccode\u003egit\u003c/code\u003e system. They hold all the code, changes, branches, commits, and everything else. When you create a git repo, you are telling git that the folder you are in is one that you want to track the changes for. Most repos will use a \u003ccode\u003emaster\u003c/code\u003e branch, which contains the \"canonical\" code - meaning the most-up-to-date working version of the code. Typically you don't want to commit broken code to master. That is what other branches are for.\u003c/p\u003e\n\n\u003cp\u003eYou can create a git repo locally by running \u003ccode\u003egit init\u003c/code\u003e in a directory on your computer.\u003c/p\u003e\n\n\u003ch2\u003e\n  \u003ca name=\"branches\" href=\"#branches\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  Branches\n\u003c/h2\u003e\n\n\u003cp\u003eA branch one section of a forking tree of changes tracked by \u003ccode\u003egit\u003c/code\u003e. They are used to prevent major conflicts when multiple developers are using adding code. There are lots of strategies for naming branches. At my work, we tend to use a structure that looks like this: \u003ccode\u003eusername/branch-function\u003c/code\u003e. So if I were going to add a new loading screen to the codebase, I might name my branch \u003ccode\u003ewuz/new-loader\u003c/code\u003e. Once I have that branch, I would start committing new code to it.\u003c/p\u003e\n\n\u003cp\u003eTo create a new branch, you can run \u003ccode\u003egit checkout -b \u0026lt;branch_name\u0026gt;\u003c/code\u003e, where \u003ccode\u003e\u0026lt;branch_name\u0026gt;\u003c/code\u003e is the name of the branch you want to create. Once you have a branch made, you can switch between branches using \u003ccode\u003egit checkout \u0026lt;branch_name\u0026gt;\u003c/code\u003e (No \u003ccode\u003e-b\u003c/code\u003e this time). So I could get back to master by using \u003ccode\u003egit checkout master\u003c/code\u003e.\u003c/p\u003e\n\n\u003ch2\u003e\n  \u003ca name=\"commits\" href=\"#commits\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  Commits\n\u003c/h2\u003e\n\n\u003cp\u003eCommits are units of work in the \u003ccode\u003egit\u003c/code\u003e world. They track the individual differences between two changes in the code. The first files you add will be your first commit - every thing after that will be a change on top of that first commit. If I want to add a new loader, I might add a new file called \u003ccode\u003eLoader.js\u003c/code\u003e, add some code, and commit it to my branch. I can then decided to keep adding new code (with more commits). Once I have it working and looking right, I might merge it into master.\u003c/p\u003e\n\n\u003cp\u003eAdding a new commit involves adding the files you want to commit and then telling git to commit those files. For example, I could run \u003ccode\u003egit add Loader.js\u003c/code\u003e to add just the \u003ccode\u003eLoader.js\u003c/code\u003e file changes or \u003ccode\u003egit add -A\u003c/code\u003e to add all new changes on a branch. From there, I would call \u003ccode\u003egit commit\u003c/code\u003e. This will pop up a window for adding a commit message. This is a good place to leave some notes about what these changes do, which you can then view in the log by running \u003ccode\u003egit log\u003c/code\u003e. This is a great way to see what changes have happened, especially when you are working with multiple developers.\u003c/p\u003e\n\n\u003ch2\u003e\n  \u003ca name=\"merging\" href=\"#merging\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  Merging\n\u003c/h2\u003e\n\n\u003cp\u003eNow that we have some changes we can merge back into master! Once I commit my changes onto my \u003ccode\u003ewuz/new-loader\u003c/code\u003e branch, I can merge that branch into master. Merges tell git that you want to take all the changes from one branch and merge them into another. \u003c/p\u003e\n\n\u003cp\u003eMerging a branch is pretty simple - just switch to the branch you want to merge from and run \u003ccode\u003egit merge \u0026lt;other_branch\u0026gt;\u003c/code\u003e, where \u003ccode\u003e\u0026lt;other_branch\u0026gt;\u003c/code\u003e is the branch that your changes live on. In this case, I might want to merge \u003ccode\u003ewuz/new-loader\u003c/code\u003e into \u003ccode\u003emaster\u003c/code\u003e. That means I would switch to master - \u003ccode\u003egit checkout master\u003c/code\u003e - then merge - \u003ccode\u003egit merge wuz/new-loader\u003c/code\u003e. That will take all of my changes and add them as a new commit on master. This new commit is called a merge commit.\u003c/p\u003e\n\n\u003cp\u003eWhat if we don't want to merge everything into master in one commit - maybe so we can keep our log looking nice or so that we can pick out commits later to rework? That is where a rebase comes in.\u003c/p\u003e\n\n\u003ch2\u003e\n  \u003ca name=\"rebasing\" href=\"#rebasing\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  Rebasing\n\u003c/h2\u003e\n\n\u003cp\u003eRebasing is like splicing some film into another section of film (if you don't know what film is, I don't know how to help you 😛). When you rebase a branch onto another branch, you are rewinding the replaying your changes on the other branch. Rebasing is a bit more complicated, so this is a good time to call out to a great git resource - \u003ca href=\"https://git-scm.com\"\u003egit-scm\u003c/a\u003e. You can read more about how rebasing works \u003ca href=\"https://git-scm.com/book/en/v2/Git-Branching-Rebasing\"\u003ehere\u003c/a\u003e. If you need to do other things in git, that is a great place to look them up!\u003c/p\u003e\n\n\u003ch2\u003e\n  \u003ca name=\"hosted-repositories\" href=\"#hosted-repositories\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  Hosted Repositories\n\u003c/h2\u003e\n\n\u003cp\u003eNow, we don't want to store all of this code and changes on our local machine. First of all, it would make it hard for a lot of developers to work on it. They would have to send their changes to your machine. Instead we can host our repository on a website. In this case, we are going to talk about Github. There are lots of other options, but Github is probably the most popular.\u003c/p\u003e\n\n\u003ch2\u003e\n  \u003ca name=\"pushing\" href=\"#pushing\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  Pushing\n\u003c/h2\u003e\n\n\u003cp\u003eWith a hosted repository, there are some cool ways to work with branches and merges. Instead of merging master on your local machine, you can use their tools to do it! So lets say I have just finished the \u003ccode\u003ewuz/new-loader\u003c/code\u003e branch. I can now push it up to the hosted repo, also called the remote. To do this, I can just run \u003ccode\u003egit push wuz/new-loader\u003c/code\u003e. This might fail, because we haven't told the remote that it should have this branch. Instead we need to say \u003ccode\u003egit push -u origin wuz/new-loader\u003c/code\u003e. That will create a new remote branch (the specific remote in the case is named origin, which is just git standard) and push our code to it. You can also push master changes, but there is a better way to get your changes into the remote master. Pull Requests.\u003c/p\u003e\n\n\u003ch2\u003e\n  \u003ca name=\"pull-requests\" href=\"#pull-requests\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  Pull Requests\n\u003c/h2\u003e\n\n\u003cp\u003eA pull request is a request to add code to a specific branch in a hosted repository. Once I have the \u003ccode\u003ewuz/new-loader\u003c/code\u003e branch pushed to the remote, I can go online, in this case to Github, and create a new pull request. Once I do that, I get a comparison of the changes I made to the branch I am asking to merge into. If all the changes look good, I can approve the pull request and merge the branch. That will cause Github to run a merge from the changes into master. Now you can go back to your machine, switch to the master branch and do a \u003ccode\u003egit pull\u003c/code\u003e, which will get any changes from the remote.\u003c/p\u003e\n\n\u003ch1\u003e\n  \u003ca name=\"gotta-go-fast\" href=\"#gotta-go-fast\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  Gotta go fast\n\u003c/h1\u003e\n\n\u003cp\u003eJust like with shell commands, git provides a way to add aliases, which make interacting with it a lot better! You can take things like \u003ccode\u003egit checkout \u0026lt;branch\u0026gt;\u003c/code\u003e and shorten them to \u003ccode\u003egit co \u0026lt;branch\u0026gt;\u003c/code\u003e or add robust, good-looking logging to your branch. You add these to your \u003ccode\u003e~/.gitconfig\u003c/code\u003e file. If you followed the last two articles and have VS code set up and some aliases you can run \u003ccode\u003ec ~/.gitconfig\u003c/code\u003e to edit this file! Here are some of my favorite aliases:\u003cbr\u003e\n\u003c/p\u003e\n\n\u003cdiv class=\"highlight\"\u003e\u003cpre class=\"highlight plaintext\"\u003e\u003ccode\u003e[alias]\n  A = add -A # Easily add all file changes | git A\n  cam = commit -am # add all files and commit with the message | git cam 'Adding all files'\n  ca = commit -a # Add all files and open the commit message window | git ca\n  cm = commit -m # Commit all added files with the message | git cm 'Adding files'\n  ci = commit # Shorter `git commit`\n  co = checkout # checkout a branch\n  st = status # get the status of current file changes\n  br = branch -v # list all branches\n  g = log --graph --pretty=format:'%Cred%h%Creset -%C(yellow)%d%Creset %s %Cgreen(%cr) %C(bold blue)\u0026lt;%an\u0026gt;%Creset' --abbrev-commit --date=relative # pretty oneline log\n  sl = stash list --pretty=format:'%Cred%h%Creset -%C(yellow)%d%Creset %s %Cgreen(%cr) %C(bold blue)\u0026lt;%an\u0026gt;%Creset' --abbrev-commit --date=relative # pretty oneline stash list\n  h = !git --no-pager log origin/master..HEAD --abbrev-commit --pretty=oneline #pretty oneline graph of what is different from origin/master\n  who = shortlog -n -s --no-merges # who has committed to this project\n  new = checkout -b\n\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\n\n\n\n\u003cp\u003eThanks for reading! Let me know your favorite \u003ccode\u003egit\u003c/code\u003e aliases in the comments! Want more like this? I \u003ca href=\"https://twitter.com/CallMeWuz\"\u003etweet\u003c/a\u003e all my posts!\u003c/p\u003e\n\n","social_image":"","body_markdown":"---\r\ntitle: Developer Tools: Version Control\r\npublished: true\r\ndescription: Let's learn about Version Control\r\ncover_image: https://thepracticaldev.s3.amazonaws.com/i/vxot2vy2lxhmh2o8z0ve.png\r\nseries: Learning Developer Tools\r\ntags: beginner, career, tools\r\n---\r\n\r\nAlright folks. Welcome back!\r\n\r\nLet's talk version control.\r\n\r\n# What is version control?\r\n\r\nHave you ever been working on a site/app/piece of code and made changes, only to realize you need to go back to an earlier version? Or maybe you have had the altogether nightmarish experience of working with another developer, while not using version control. The one where you have to send a message that says \"hey, I am working on user/login.php, don't edit it for a while.\" If you have, you know why version control exists. In it's most basic form, version control software helps you track the changes to a set of files and directories. You pass it some special commands and it works it's magic to store the difference between the last time you ran those commands and this time.\r\n\r\nThere are a few options when it comes to version control, and every software shop is a little different. The most common is probably `git`, but there is also `svn`, `csv`, and `hg`. I'm sure there are others too. Add on top of this the centralized version control software hosts like Github and Bitbucket and you start to get a wide landscape of possible setups. This article is going to focus on `git` and Github, because that is probably what _most_ people reading will be using. There are other tutorials for other version control systems.\r\n\r\n# Getting started with `git`\r\n\r\nLet's just jump right in. There are a few major concepts in `git` that we will want to cover.\r\n\r\n## Repositories (repo)\r\n\r\nRepositories are the base unit in a `git` system. They hold all the code, changes, branches, commits, and everything else. When you create a git repo, you are telling git that the folder you are in is one that you want to track the changes for. Most repos will use a `master` branch, which contains the \"canonical\" code - meaning the most-up-to-date working version of the code. Typically you don't want to commit broken code to master. That is what other branches are for.\r\n\r\nYou can create a git repo locally by running `git init` in a directory on your computer.\r\n\r\n## Branches\r\n\r\nA branch one section of a forking tree of changes tracked by `git`. They are used to prevent major conflicts when multiple developers are using adding code. There are lots of strategies for naming branches. At my work, we tend to use a structure that looks like this: `username/branch-function`. So if I were going to add a new loading screen to the codebase, I might name my branch `wuz/new-loader`. Once I have that branch, I would start committing new code to it.\r\n\r\nTo create a new branch, you can run `git checkout -b \u003cbranch_name\u003e`, where `\u003cbranch_name\u003e` is the name of the branch you want to create. Once you have a branch made, you can switch between branches using `git checkout \u003cbranch_name\u003e` (No `-b` this time). So I could get back to master by using `git checkout master`.\r\n\r\n## Commits\r\n\r\nCommits are units of work in the `git` world. They track the individual differences between two changes in the code. The first files you add will be your first commit - every thing after that will be a change on top of that first commit. If I want to add a new loader, I might add a new file called `Loader.js`, add some code, and commit it to my branch. I can then decided to keep adding new code (with more commits). Once I have it working and looking right, I might merge it into master.\r\n\r\nAdding a new commit involves adding the files you want to commit and then telling git to commit those files. For example, I could run `git add Loader.js` to add just the `Loader.js` file changes or `git add -A` to add all new changes on a branch. From there, I would call `git commit`. This will pop up a window for adding a commit message. This is a good place to leave some notes about what these changes do, which you can then view in the log by running `git log`. This is a great way to see what changes have happened, especially when you are working with multiple developers.\r\n\r\n## Merging\r\n\r\nNow that we have some changes we can merge back into master! Once I commit my changes onto my `wuz/new-loader` branch, I can merge that branch into master. Merges tell git that you want to take all the changes from one branch and merge them into another. \r\n\r\nMerging a branch is pretty simple - just switch to the branch you want to merge from and run `git merge \u003cother_branch\u003e`, where `\u003cother_branch\u003e` is the branch that your changes live on. In this case, I might want to merge `wuz/new-loader` into `master`. That means I would switch to master - `git checkout master` - then merge - `git merge wuz/new-loader`. That will take all of my changes and add them as a new commit on master. This new commit is called a merge commit.\r\n\r\nWhat if we don't want to merge everything into master in one commit - maybe so we can keep our log looking nice or so that we can pick out commits later to rework? That is where a rebase comes in.\r\n\r\n## Rebasing\r\n\r\nRebasing is like splicing some film into another section of film (if you don't know what film is, I don't know how to help you 😛). When you rebase a branch onto another branch, you are rewinding the replaying your changes on the other branch. Rebasing is a bit more complicated, so this is a good time to call out to a great git resource - [git-scm](https://git-scm.com). You can read more about how rebasing works [here](https://git-scm.com/book/en/v2/Git-Branching-Rebasing). If you need to do other things in git, that is a great place to look them up!\r\n\r\n## Hosted Repositories\r\n\r\nNow, we don't want to store all of this code and changes on our local machine. First of all, it would make it hard for a lot of developers to work on it. They would have to send their changes to your machine. Instead we can host our repository on a website. In this case, we are going to talk about Github. There are lots of other options, but Github is probably the most popular.\r\n\r\n## Pushing\r\n\r\nWith a hosted repository, there are some cool ways to work with branches and merges. Instead of merging master on your local machine, you can use their tools to do it! So lets say I have just finished the `wuz/new-loader` branch. I can now push it up to the hosted repo, also called the remote. To do this, I can just run `git push wuz/new-loader`. This might fail, because we haven't told the remote that it should have this branch. Instead we need to say `git push -u origin wuz/new-loader`. That will create a new remote branch (the specific remote in the case is named origin, which is just git standard) and push our code to it. You can also push master changes, but there is a better way to get your changes into the remote master. Pull Requests.\r\n\r\n## Pull Requests\r\n\r\nA pull request is a request to add code to a specific branch in a hosted repository. Once I have the `wuz/new-loader` branch pushed to the remote, I can go online, in this case to Github, and create a new pull request. Once I do that, I get a comparison of the changes I made to the branch I am asking to merge into. If all the changes look good, I can approve the pull request and merge the branch. That will cause Github to run a merge from the changes into master. Now you can go back to your machine, switch to the master branch and do a `git pull`, which will get any changes from the remote.\r\n\r\n# Gotta go fast\r\n\r\nJust like with shell commands, git provides a way to add aliases, which make interacting with it a lot better! You can take things like `git checkout \u003cbranch\u003e` and shorten them to `git co \u003cbranch\u003e` or add robust, good-looking logging to your branch. You add these to your `~/.gitconfig` file. If you followed the last two articles and have VS code set up and some aliases you can run `c ~/.gitconfig` to edit this file! Here are some of my favorite aliases:\r\n\r\n```git\r\n[alias]\r\n  A = add -A # Easily add all file changes | git A\r\n  cam = commit -am # add all files and commit with the message | git cam 'Adding all files'\r\n  ca = commit -a # Add all files and open the commit message window | git ca\r\n  cm = commit -m # Commit all added files with the message | git cm 'Adding files'\r\n  ci = commit # Shorter `git commit`\r\n  co = checkout # checkout a branch\r\n  st = status # get the status of current file changes\r\n  br = branch -v # list all branches\r\n  g = log --graph --pretty=format:'%Cred%h%Creset -%C(yellow)%d%Creset %s %Cgreen(%cr) %C(bold blue)\u003c%an\u003e%Creset' --abbrev-commit --date=relative # pretty oneline log\r\n  sl = stash list --pretty=format:'%Cred%h%Creset -%C(yellow)%d%Creset %s %Cgreen(%cr) %C(bold blue)\u003c%an\u003e%Creset' --abbrev-commit --date=relative # pretty oneline stash list\r\n  h = !git --no-pager log origin/master..HEAD --abbrev-commit --pretty=oneline #pretty oneline graph of what is different from origin/master\r\n  who = shortlog -n -s --no-merges # who has committed to this project\r\n  new = checkout -b\r\n\r\n```\r\n\r\n\r\nThanks for reading! Let me know your favorite `git` aliases in the comments! Want more like this? I [tweet](https://twitter.com/CallMeWuz) all my posts!","canonical_url":null,"show_comments":true,"main_image_background_hex_color":"#dddddd","published_from_feed":false,"comments_count":4,"video":null,"video_code":null,"video_source_url":null,"video_thumbnail_url":null,"video_closed_caption_track_url":null,"feed_source_url":null,"edited_at":null,"crossposted_at":null,"language":null,"cached_tag_list":"beginners, career, tools","path":"/wuz/developer-tools-version-control-2mkk","cached_user_name":"Conlin Durbin","cached_user_username":"wuz","last_comment_at":"2019-03-22T16:34:49.474Z","public_reactions_count":72},{"title":"Developer Tools: The Command Line","slug":"developer-tools-the-command-line-3f66","created_at":"2019-01-26T18:06:01.428Z","main_image":"https://thepracticaldev.s3.amazonaws.com/i/u5akcyhn5v1cp0mbh3nv.png","description":"Getting a great command prompt","published":true,"published_at":"2019-02-28T22:17:08.943Z","processed_html":"\u003cp\u003eHello again!\u003c/p\u003e\n\n\u003cp\u003eWelcome to the next post in this series! Today we're gonna be going over some the command line and terminal emulators. Again, this is a topic that changes quite a lot between operating systems, so check out \u003ca href=\"https://dev.to/wuz/developer-tools-the-operating-system-3n55\"\u003ethe second post in the series\u003c/a\u003e for some good options! Let's jump right in!\u003c/p\u003e\n\n\u003ch1\u003e\n  \u003ca name=\"terminal-emulators\" href=\"#terminal-emulators\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  Terminal Emulators\n\u003c/h1\u003e\n\n\u003cp\u003eLet's take a trip down memory lane. Back in the early days of computing, not everyone had their own computer. Instead, an institution might have a computer that it allowed its staff to use. To access this computer, you might have had a basic monitor and a keyboard setup, like the \u003ca href=\"https://en.wikipedia.org/wiki/VT100\"\u003eVT100\u003c/a\u003e. This setup was called a terminal and it allowed you to enter commands that were processed by the main computer. Jump forward to today and you might be using something like Terminal.app, iTerm, kitty, or Gnome Terminal. These are called terminal emulators - they are software designed to act like the old school terminals and allow you to input and output from a computer. The only difference is that the computer you are working with is right in front of you, not in a different building on campus. \u003c/p\u003e\n\n\u003cp\u003eYou might be wondering why we use something that imitates an old concept - don't we have GUI's and tools for this now? In some ways, you are right - many of the old tools have been replaced by more graphical alternatives. But as it turns out, text is still a great way to interact with a computer. Until we have great voice commands built into all software, text is the fastest way to do many things. \u003c/p\u003e\n\n\u003ch1\u003e\n  \u003ca name=\"the-shell\" href=\"#the-shell\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  The shell\n\u003c/h1\u003e\n\n\u003cp\u003eNow we know what kind of programs we can use to interact with the computer using text. The shell is the program that reads that text and decides what to do. It takes a string like \u003ccode\u003egit commit -m 'Add the things!'\u003c/code\u003e and decides that it should route to \u003ccode\u003egit\u003c/code\u003e and needs to pass the parameters \u003ccode\u003ecommit -m 'Add the things!'\u003c/code\u003e. They take a program and wrap around the execution of it, like a shell. 😉 \u003c/p\u003e\n\n\u003cp\u003eThere are lots of different shell programs, all with their own features. Many add widgets and simplifications to make you more productive, which often hides the actual functionality of a shell program. Some have fancy ways to interact with your previous commands and others integrate programming languages like Python directly into the shell. It's also worth noting that in addition to being programs that you can run, each of these shells is a programming language that allows you to write command line functions and programs.\u003c/p\u003e\n\n\u003ch2\u003e\n  \u003ca name=\"bash\" href=\"#bash\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  Bash\n\u003c/h2\u003e\n\n\u003cp\u003e\u003ca href=\"https://www.gnu.org/software/bash/\"\u003eBash\u003c/a\u003e (Bourne Again SHell) is the default shell on most Unix operating systems. It has a lot of great features, like Tab completion and aliases. This is the shell I use - I like it because there are lots of great resources out there and it doesn't do too much. It's kind of the baseline for the good shells and many others are based in part on the ideas set forward by Bash. Bash is also integrated on Windows now, which makes switch computers/OS's much easier.\u003c/p\u003e\n\n\u003ch2\u003e\n  \u003ca name=\"zsh\" href=\"#zsh\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  zsh\n\u003c/h2\u003e\n\n\u003cp\u003e\u003ca href=\"http://zsh.sourceforge.net/\"\u003ezsh\u003c/a\u003e (z-shell) is basically a more interactive version of Bash. In addition to Tab completion, it features type ahead search and autocomplete. Most people who use zsh install \u003ca href=\"https://ohmyz.sh/\"\u003eohmyzsh\u003c/a\u003e, which gives you some really good defaults for your shell. This is often a good choice for newer devs as it has lots of user-friendly features and a good community around it. \u003c/p\u003e\n\n\u003ch2\u003e\n  \u003ca name=\"fish\" href=\"#fish\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  fish\n\u003c/h2\u003e\n\n\u003cp\u003e\u003ca href=\"https://fishshell.com/\"\u003efish\u003c/a\u003e is pretty similar to zsh. It's got a lot of great user-friendly features. Fish has good syntax highlighting, which can be nice! Julia Evans has a great article on the benefits of \u003ca href=\"https://jvns.ca/blog/2017/04/23/the-fish-shell-is-awesome/\"\u003efish\u003c/a\u003e. I am thinking about switching to this in the future to play around with it.\u003c/p\u003e\n\n\u003cp\u003eTodd likes fish and shared in the comments:\u003c/p\u003e\n\n\n\u003cdiv class=\"liquid-comment\"\u003e\n  \u003cdiv class=\"details\"\u003e\n    \u003ca href=\"/eidsonator\"\u003e\n      \u003cimg class=\"profile-pic\" src=\"https://res.cloudinary.com/practicaldev/image/fetch/s--ZG0thquY--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://res.cloudinary.com/practicaldev/image/fetch/s--73crc2uA--/c_fill%2Cf_auto%2Cfl_progressive%2Ch_50%2Cq_auto%2Cw_50/https://dev-to-uploads.s3.amazonaws.com/uploads/user/profile_image/48157/1ea6fa03-5479-4e5f-9e70-0eca60fb6df4.jpeg\" alt=\"eidsonator profile image\" loading=\"lazy\"\u003e\n    \u003c/a\u003e\n    \u003ca href=\"/eidsonator\"\u003e\n      \u003cspan class=\"comment-username\"\u003eTodd Eidson\u003c/span\u003e\n    \u003c/a\u003e\n      \u003ca href=\"https://twitter.com/ToddEidson\"\u003e\n        \u003cimg src=\"/assets/twitter-logo.svg\" class=\"icon-img\" alt=\"twitter\" loading=\"lazy\"\u003e\n      \u003c/a\u003e\n      \u003ca href=\"https://github.com/eidsonator\"\u003e\n        \u003cimg src=\"/assets/github-logo.svg\" class=\"icon-img\" alt=\"github\" loading=\"lazy\"\u003e\n      \u003c/a\u003e\n    \u003cdiv class=\"comment-date\"\u003e\n  \u003ca href=\"/eidsonator/comment/95k8\"\u003e\n    \u003ctime datetime=\"2019-03-01T19:10:13Z\"\u003e\n      Mar  1 '19\n    \u003c/time\u003e\n  \u003c/a\u003e\n\u003c/div\u003e\n\n  \u003c/div\u003e\n  \u003cdiv class=\"body\"\u003e\n    \n\n\u003cp\u003e+1 for fish.  I've been using it for almost 2 years now.  I'm a big big fan.  There is also \u003ca href=\"https://github.com/oh-my-fish/oh-my-fish\"\u003eoh my fish\u003c/a\u003e for package management and modification.\u003c/p\u003e\n\n\n\n  \u003c/div\u003e\n\u003c/div\u003e\n\n\n\u003ch2\u003e\n  \u003ca name=\"xonsh\" href=\"#xonsh\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  xonsh\n\u003c/h2\u003e\n\n\u003cp\u003e\u003ca href=\"https://xon.sh/index.html\"\u003exonsh\u003c/a\u003e is cross-platform and deeply integrations Python into the shell experience. If you like Python and don't like writing shell scripts, this might be a good option! \u003c/p\u003e\n\n\u003ch2\u003e\n  \u003ca name=\"the-others\" href=\"#the-others\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  The others\n\u003c/h2\u003e\n\n\u003cp\u003eThere are a \u003cem\u003elot\u003c/em\u003e of shell programs. People have lots of opinions on these things. Experiment a bit and see what programs you like the most. Searching for \"alternatives to bash\" is a good place to find some starting places.\u003c/p\u003e\n\n\u003ch1\u003e\n  \u003ca name=\"the-command-prompt\" href=\"#the-command-prompt\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  The Command Prompt\n\u003c/h1\u003e\n\n\u003cp\u003eNow that we know what a terminal emulator is and how a shell works, let's talk about the command prompt. The command prompt is where you are going to type your commands - it's prompting you for input, which will be passed to the shell, which will decide how to respond. You'll most likely get some sort of output back, perhaps another string or a graphical program opening. Just like the shell, there are lots of possibilities when working with your command prompt. How they are displayed is usually handled by the shell, but the basic way to do it is to set an environment variable named PS1. Environment variables are global variables that tell your shell how to behave - they describe the environment that it is operating in.\u003c/p\u003e\n\n\n\u003chr\u003e\n\n\u003cp\u003eIf you are interested in reading a bit more about all this terminology, \u003ca href=\"https://stackoverflow.com/a/21016640/1466592\"\u003ethis StackOverflow answer\u003c/a\u003e is really good.\u003c/p\u003e\n\n\u003ch1\u003e\n  \u003ca name=\"some-basic-commands\" href=\"#some-basic-commands\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  Some basic commands\n\u003c/h1\u003e\n\n\u003cul\u003e\n\u003cli\u003e\n\u003ccode\u003ecd \u0026lt;directory\u0026gt;\u003c/code\u003e - change to \u003ccode\u003e\u0026lt;directory\u0026gt;\u003c/code\u003e - Example: \u003ccode\u003ecd ~/Projects\u003c/code\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003ccode\u003els \u0026lt;directory\u0026gt;\u003c/code\u003e - list the files in \u003ccode\u003e\u0026lt;directory\u0026gt;\u003c/code\u003e - Example: \u003ccode\u003els ~/Projects\u003c/code\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003ccode\u003ecp \u0026lt;file\u0026gt; \u0026lt;location\u0026gt;\u003c/code\u003e - copy the \u003ccode\u003e\u0026lt;file\u0026gt;\u003c/code\u003e to \u003ccode\u003e\u0026lt;location\u0026gt;\u003c/code\u003e - Example: \u003ccode\u003ecp ~/Projects/test.txt ~/textfile.txt\u003c/code\u003e\n\u003c/li\u003e\n\u003c/ul\u003e\n\n\u003cp\u003eIf you want to learn more, I'd recommend checking \u003ca href=\"https://swcarpentry.github.io/shell-novice/\"\u003ethis tutorial\u003c/a\u003e out.\u003c/p\u003e\n\n\u003ch1\u003e\n  \u003ca name=\"giving-your-shell-superpowers\" href=\"#giving-your-shell-superpowers\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  Giving your shell superpowers\n\u003c/h1\u003e\n\n\u003cp\u003eOnce you have a shell, you'll want to upgrade it to fit your workflow! \u003c/p\u003e\n\n\u003ch2\u003e\n  \u003ca name=\"looking-good\" href=\"#looking-good\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  Looking good!\n\u003c/h2\u003e\n\n\u003cp\u003eFirst, let start by making a good-looking prompt. In most shells, this is done by changing the PS1 enviroment variable. To start make a file in your home folder (you can get there by opening a terminal and typeing \u003ccode\u003ecd ~\u003c/code\u003e). Let's create a file called \u003ccode\u003e.bash_prompt\u003c/code\u003e. If you have VS Code installed, just run \u003ccode\u003ecode .bash_prompt\u003c/code\u003e.\u003c/p\u003e\n\n\u003cp\u003eOnce that file opens up, put this at the top:\u003cbr\u003e\n\u003c/p\u003e\n\n\u003cdiv class=\"highlight\"\u003e\u003cpre class=\"highlight shell\"\u003e\u003ccode\u003e\u003cspan class=\"c\"\u003e#!/usr/bin/env bash\u003c/span\u003e\n\n\u003cspan class=\"c\"\u003e# Shell prompt\u003c/span\u003e\n\u003cspan class=\"c\"\u003e## Based on wuz/.files (github.com/wuz/.files)\u003c/span\u003e\n\n\u003cspan class=\"nv\"\u003ebold\u003c/span\u003e\u003cspan class=\"o\"\u003e=\u003c/span\u003e\u003cspan class=\"s2\"\u003e\"\u003c/span\u003e\u003cspan class=\"se\"\u003e\\[\\e\u003c/span\u003e\u003cspan class=\"s2\"\u003e[1m\u003c/span\u003e\u003cspan class=\"se\"\u003e\\]\u003c/span\u003e\u003cspan class=\"s2\"\u003e\"\u003c/span\u003e\n\u003cspan class=\"nv\"\u003ereset\u003c/span\u003e\u003cspan class=\"o\"\u003e=\u003c/span\u003e\u003cspan class=\"s2\"\u003e\"\u003c/span\u003e\u003cspan class=\"se\"\u003e\\[\\e\u003c/span\u003e\u003cspan class=\"s2\"\u003e[0m\u003c/span\u003e\u003cspan class=\"se\"\u003e\\]\u003c/span\u003e\u003cspan class=\"s2\"\u003e\"\u003c/span\u003e\n\u003cspan class=\"nv\"\u003eblack\u003c/span\u003e\u003cspan class=\"o\"\u003e=\u003c/span\u003e\u003cspan class=\"s2\"\u003e\"\u003c/span\u003e\u003cspan class=\"se\"\u003e\\[\\e\u003c/span\u003e\u003cspan class=\"s2\"\u003e[30m\u003c/span\u003e\u003cspan class=\"se\"\u003e\\]\u003c/span\u003e\u003cspan class=\"s2\"\u003e\"\u003c/span\u003e\n\u003cspan class=\"nv\"\u003eblue\u003c/span\u003e\u003cspan class=\"o\"\u003e=\u003c/span\u003e\u003cspan class=\"s2\"\u003e\"\u003c/span\u003e\u003cspan class=\"se\"\u003e\\[\\e\u003c/span\u003e\u003cspan class=\"s2\"\u003e[34m\u003c/span\u003e\u003cspan class=\"se\"\u003e\\]\u003c/span\u003e\u003cspan class=\"s2\"\u003e\"\u003c/span\u003e\n\u003cspan class=\"nv\"\u003egreen\u003c/span\u003e\u003cspan class=\"o\"\u003e=\u003c/span\u003e\u003cspan class=\"s2\"\u003e\"\u003c/span\u003e\u003cspan class=\"se\"\u003e\\[\\e\u003c/span\u003e\u003cspan class=\"s2\"\u003e[32m\u003c/span\u003e\u003cspan class=\"se\"\u003e\\]\u003c/span\u003e\u003cspan class=\"s2\"\u003e\"\u003c/span\u003e\n\u003cspan class=\"nv\"\u003ecyan\u003c/span\u003e\u003cspan class=\"o\"\u003e=\u003c/span\u003e\u003cspan class=\"s2\"\u003e\"\u003c/span\u003e\u003cspan class=\"se\"\u003e\\[\\e\u003c/span\u003e\u003cspan class=\"s2\"\u003e[36m\u003c/span\u003e\u003cspan class=\"se\"\u003e\\]\u003c/span\u003e\u003cspan class=\"s2\"\u003e\"\u003c/span\u003e\n\u003cspan class=\"nv\"\u003ered\u003c/span\u003e\u003cspan class=\"o\"\u003e=\u003c/span\u003e\u003cspan class=\"s2\"\u003e\"\u003c/span\u003e\u003cspan class=\"se\"\u003e\\[\\e\u003c/span\u003e\u003cspan class=\"s2\"\u003e[31m\u003c/span\u003e\u003cspan class=\"se\"\u003e\\]\u003c/span\u003e\u003cspan class=\"s2\"\u003e\"\u003c/span\u003e\n\u003cspan class=\"nv\"\u003eyellow\u003c/span\u003e\u003cspan class=\"o\"\u003e=\u003c/span\u003e\u003cspan class=\"s2\"\u003e\"\u003c/span\u003e\u003cspan class=\"se\"\u003e\\[\\e\u003c/span\u003e\u003cspan class=\"s2\"\u003e[33m\u003c/span\u003e\u003cspan class=\"se\"\u003e\\]\u003c/span\u003e\u003cspan class=\"s2\"\u003e\"\u003c/span\u003e\n\u003cspan class=\"nv\"\u003epurple\u003c/span\u003e\u003cspan class=\"o\"\u003e=\u003c/span\u003e\u003cspan class=\"s2\"\u003e\"\u003c/span\u003e\u003cspan class=\"se\"\u003e\\[\\e\u003c/span\u003e\u003cspan class=\"s2\"\u003e[35m\u003c/span\u003e\u003cspan class=\"se\"\u003e\\]\u003c/span\u003e\u003cspan class=\"s2\"\u003e\"\u003c/span\u003e\n\u003cspan class=\"nv\"\u003ebrown\u003c/span\u003e\u003cspan class=\"o\"\u003e=\u003c/span\u003e\u003cspan class=\"s2\"\u003e\"\u003c/span\u003e\u003cspan class=\"se\"\u003e\\[\\e\u003c/span\u003e\u003cspan class=\"s2\"\u003e[33m\u003c/span\u003e\u003cspan class=\"se\"\u003e\\]\u003c/span\u003e\u003cspan class=\"s2\"\u003e\"\u003c/span\u003e\n\u003cspan class=\"nv\"\u003egray\u003c/span\u003e\u003cspan class=\"o\"\u003e=\u003c/span\u003e\u003cspan class=\"s2\"\u003e\"\u003c/span\u003e\u003cspan class=\"se\"\u003e\\[\\e\u003c/span\u003e\u003cspan class=\"s2\"\u003e[37m\u003c/span\u003e\u003cspan class=\"se\"\u003e\\]\u003c/span\u003e\u003cspan class=\"s2\"\u003e\"\u003c/span\u003e\n\u003cspan class=\"nv\"\u003edark_gray\u003c/span\u003e\u003cspan class=\"o\"\u003e=\u003c/span\u003e\u003cspan class=\"s2\"\u003e\"\u003c/span\u003e\u003cspan class=\"se\"\u003e\\[\\e\u003c/span\u003e\u003cspan class=\"s2\"\u003e[90m\u003c/span\u003e\u003cspan class=\"se\"\u003e\\]\u003c/span\u003e\u003cspan class=\"s2\"\u003e\"\u003c/span\u003e\n\u003cspan class=\"nv\"\u003elight_blue\u003c/span\u003e\u003cspan class=\"o\"\u003e=\u003c/span\u003e\u003cspan class=\"s2\"\u003e\"\u003c/span\u003e\u003cspan class=\"se\"\u003e\\[\\e\u003c/span\u003e\u003cspan class=\"s2\"\u003e[94m\u003c/span\u003e\u003cspan class=\"se\"\u003e\\]\u003c/span\u003e\u003cspan class=\"s2\"\u003e\"\u003c/span\u003e\n\u003cspan class=\"nv\"\u003elight_green\u003c/span\u003e\u003cspan class=\"o\"\u003e=\u003c/span\u003e\u003cspan class=\"s2\"\u003e\"\u003c/span\u003e\u003cspan class=\"se\"\u003e\\[\\e\u003c/span\u003e\u003cspan class=\"s2\"\u003e[92m\u003c/span\u003e\u003cspan class=\"se\"\u003e\\]\u003c/span\u003e\u003cspan class=\"s2\"\u003e\"\u003c/span\u003e\n\u003cspan class=\"nv\"\u003elight_cyan\u003c/span\u003e\u003cspan class=\"o\"\u003e=\u003c/span\u003e\u003cspan class=\"s2\"\u003e\"\u003c/span\u003e\u003cspan class=\"se\"\u003e\\[\\e\u003c/span\u003e\u003cspan class=\"s2\"\u003e[96m\u003c/span\u003e\u003cspan class=\"se\"\u003e\\]\u003c/span\u003e\u003cspan class=\"s2\"\u003e\"\u003c/span\u003e\n\u003cspan class=\"nv\"\u003elight_red\u003c/span\u003e\u003cspan class=\"o\"\u003e=\u003c/span\u003e\u003cspan class=\"s2\"\u003e\"\u003c/span\u003e\u003cspan class=\"se\"\u003e\\[\\e\u003c/span\u003e\u003cspan class=\"s2\"\u003e[91m\u003c/span\u003e\u003cspan class=\"se\"\u003e\\]\u003c/span\u003e\u003cspan class=\"s2\"\u003e\"\u003c/span\u003e\n\u003cspan class=\"nv\"\u003elight_purple\u003c/span\u003e\u003cspan class=\"o\"\u003e=\u003c/span\u003e\u003cspan class=\"s2\"\u003e\"\u003c/span\u003e\u003cspan class=\"se\"\u003e\\[\\e\u003c/span\u003e\u003cspan class=\"s2\"\u003e[95m\u003c/span\u003e\u003cspan class=\"se\"\u003e\\]\u003c/span\u003e\u003cspan class=\"s2\"\u003e\"\u003c/span\u003e\n\u003cspan class=\"nv\"\u003elight_yellow\u003c/span\u003e\u003cspan class=\"o\"\u003e=\u003c/span\u003e\u003cspan class=\"s2\"\u003e\"\u003c/span\u003e\u003cspan class=\"se\"\u003e\\[\\e\u003c/span\u003e\u003cspan class=\"s2\"\u003e[93m\u003c/span\u003e\u003cspan class=\"se\"\u003e\\]\u003c/span\u003e\u003cspan class=\"s2\"\u003e\"\u003c/span\u003e\n\u003cspan class=\"nv\"\u003ewhite\u003c/span\u003e\u003cspan class=\"o\"\u003e=\u003c/span\u003e\u003cspan class=\"s2\"\u003e\"\u003c/span\u003e\u003cspan class=\"se\"\u003e\\[\\e\u003c/span\u003e\u003cspan class=\"s2\"\u003e[97m\u003c/span\u003e\u003cspan class=\"se\"\u003e\\]\u003c/span\u003e\u003cspan class=\"s2\"\u003e\"\u003c/span\u003e\n\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\n\n\n\n\u003cp\u003eThis gives us a bunch of colors to work with. Just for the record, those colors are described in \u003ca href=\"https://en.wikipedia.org/wiki/ANSI_escape_code\"\u003eANSI escape codes\u003c/a\u003e.\u003c/p\u003e\n\n\u003cp\u003eNow that we have some colors set up, let's make a new prompt. Add this directly below what you have set up there.\u003cbr\u003e\n\u003c/p\u003e\n\n\u003cdiv class=\"highlight\"\u003e\u003cpre class=\"highlight shell\"\u003e\u003ccode\u003e\n\u003cspan class=\"c\"\u003e# ^ rest of file ^\u003c/span\u003e\n\ndir_chomp\u003cspan class=\"o\"\u003e()\u003c/span\u003e \u003cspan class=\"o\"\u003e{\u003c/span\u003e\n  \u003cspan class=\"k\"\u003eif\u003c/span\u003e \u003cspan class=\"o\"\u003e[\u003c/span\u003e \u003cspan class=\"nv\"\u003e$PWD\u003c/span\u003e \u003cspan class=\"o\"\u003e==\u003c/span\u003e \u003cspan class=\"nv\"\u003e$HOME\u003c/span\u003e \u003cspan class=\"o\"\u003e]\u003c/span\u003e\u003cspan class=\"p\"\u003e;\u003c/span\u003e \u003cspan class=\"k\"\u003ethen\n    \u003c/span\u003e\u003cspan class=\"nb\"\u003eecho\u003c/span\u003e \u003cspan class=\"s2\"\u003e\"~\"\u003c/span\u003e\u003cspan class=\"p\"\u003e;\u003c/span\u003e\n  \u003cspan class=\"k\"\u003eelse\n    \u003c/span\u003e\u003cspan class=\"nb\"\u003elocal \u003c/span\u003e\u003cspan class=\"nv\"\u003ens\u003c/span\u003e\u003cspan class=\"o\"\u003e=\u003c/span\u003e\u003cspan class=\"s2\"\u003e\"\u003c/span\u003e\u003cspan class=\"k\"\u003e${\u003c/span\u003e\u003cspan class=\"nv\"\u003ePWD\u003c/span\u003e\u003cspan class=\"p\"\u003e//_/ \u003c/span\u003e\u003cspan class=\"k\"\u003e}\u003c/span\u003e\u003cspan class=\"s2\"\u003e\"\u003c/span\u003e\n    \u003cspan class=\"nb\"\u003elocal \u003c/span\u003e\u003cspan class=\"nv\"\u003enh\u003c/span\u003e\u003cspan class=\"o\"\u003e=\u003c/span\u003e\u003cspan class=\"s2\"\u003e\"\u003c/span\u003e\u003cspan class=\"k\"\u003e${\u003c/span\u003e\u003cspan class=\"nv\"\u003ens\u003c/span\u003e\u003cspan class=\"p\"\u003e/#\u003c/span\u003e\u003cspan class=\"nv\"\u003e$HOME\u003c/span\u003e\u003cspan class=\"p\"\u003e/\\~\u003c/span\u003e\u003cspan class=\"k\"\u003e}\u003c/span\u003e\u003cspan class=\"s2\"\u003e\"\u003c/span\u003e\u003cspan class=\"p\"\u003e;\u003c/span\u003e\n    \u003cspan class=\"nb\"\u003elocal \u003c/span\u003e\u003cspan class=\"nv\"\u003ewd\u003c/span\u003e\u003cspan class=\"o\"\u003e=\u003c/span\u003e\u003cspan class=\"s2\"\u003e\"\u003c/span\u003e\u003cspan class=\"k\"\u003e${\u003c/span\u003e\u003cspan class=\"nv\"\u003enh\u003c/span\u003e\u003cspan class=\"p\"\u003e%/*\u003c/span\u003e\u003cspan class=\"k\"\u003e}\u003c/span\u003e\u003cspan class=\"s2\"\u003e\"\u003c/span\u003e\u003cspan class=\"p\"\u003e;\u003c/span\u003e\n    \u003cspan class=\"nb\"\u003elocal \u003c/span\u003e\u003cspan class=\"nv\"\u003ewdnhrd\u003c/span\u003e\u003cspan class=\"o\"\u003e=\u003c/span\u003e\u003cspan class=\"sb\"\u003e`\u003c/span\u003e\u003cspan class=\"nb\"\u003eecho\u003c/span\u003e \u003cspan class=\"nv\"\u003e$wd\u003c/span\u003e | \u003cspan class=\"nb\"\u003esed\u003c/span\u003e \u003cspan class=\"nt\"\u003e-e\u003c/span\u003e \u003cspan class=\"s2\"\u003e\"s;\u003c/span\u003e\u003cspan class=\"se\"\u003e\\(\u003c/span\u003e\u003cspan class=\"s2\"\u003e/.\u003c/span\u003e\u003cspan class=\"se\"\u003e\\)\u003c/span\u003e\u003cspan class=\"s2\"\u003e[^/]*;\u003c/span\u003e\u003cspan class=\"se\"\u003e\\1\u003c/span\u003e\u003cspan class=\"s2\"\u003e;g\"\u003c/span\u003e\u003cspan class=\"sb\"\u003e`\u003c/span\u003e\n    \u003cspan class=\"nb\"\u003eecho\u003c/span\u003e \u003cspan class=\"s2\"\u003e\"\u003c/span\u003e\u003cspan class=\"nv\"\u003e$wdnhrd\u003c/span\u003e\u003cspan class=\"s2\"\u003e/\u003c/span\u003e\u003cspan class=\"k\"\u003e${\u003c/span\u003e\u003cspan class=\"nv\"\u003ens\u003c/span\u003e\u003cspan class=\"p\"\u003e##*/\u003c/span\u003e\u003cspan class=\"k\"\u003e}\u003c/span\u003e\u003cspan class=\"s2\"\u003e\"\u003c/span\u003e\u003cspan class=\"p\"\u003e;\u003c/span\u003e\n  \u003cspan class=\"k\"\u003efi\u003c/span\u003e\n\u003cspan class=\"o\"\u003e}\u003c/span\u003e\n\n\u003cspan class=\"c\"\u003e# Set the terminal title and prompt.\u003c/span\u003e\n\u003cspan class=\"nv\"\u003ePS1\u003c/span\u003e\u003cspan class=\"o\"\u003e=\u003c/span\u003e\u003cspan class=\"s2\"\u003e\"\u003c/span\u003e\u003cspan class=\"k\"\u003e${\u003c/span\u003e\u003cspan class=\"nv\"\u003ebold\u003c/span\u003e\u003cspan class=\"k\"\u003e}${\u003c/span\u003e\u003cspan class=\"nv\"\u003elight_green\u003c/span\u003e\u003cspan class=\"k\"\u003e}\u003c/span\u003e\u003cspan class=\"se\"\u003e\\$\u003c/span\u003e\u003cspan class=\"s2\"\u003e(dir_chomp)\u003c/span\u003e\u003cspan class=\"k\"\u003e${\u003c/span\u003e\u003cspan class=\"nv\"\u003ewhite\u003c/span\u003e\u003cspan class=\"k\"\u003e}\u003c/span\u003e\u003cspan class=\"s2\"\u003e\"\u003c/span\u003e\u003cspan class=\"p\"\u003e;\u003c/span\u003e\nPS1+\u003cspan class=\"o\"\u003e=\u003c/span\u003e\u003cspan class=\"s2\"\u003e\"\u003c/span\u003e\u003cspan class=\"k\"\u003e${\u003c/span\u003e\u003cspan class=\"nv\"\u003eblue\u003c/span\u003e\u003cspan class=\"k\"\u003e}${\u003c/span\u003e\u003cspan class=\"nv\"\u003ebold\u003c/span\u003e\u003cspan class=\"k\"\u003e}\u003c/span\u003e\u003cspan class=\"se\"\u003e\\n\u003c/span\u003e\u003cspan class=\"s2\"\u003e→ \u003c/span\u003e\u003cspan class=\"k\"\u003e${\u003c/span\u003e\u003cspan class=\"nv\"\u003ereset\u003c/span\u003e\u003cspan class=\"k\"\u003e}\u003c/span\u003e\u003cspan class=\"s2\"\u003e\"\u003c/span\u003e\n\u003cspan class=\"nb\"\u003eexport \u003c/span\u003ePS1\u003cspan class=\"p\"\u003e;\u003c/span\u003e\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\n\n\n\n\u003cp\u003eHere we are creating a function called dir_chomp, which takes a directory like \u003ccode\u003e~/Projects/Work/app\u003c/code\u003e and converts it into \u003ccode\u003e~/P/W/app\u003c/code\u003e. If you don't like that, replace this line: \u003ccode\u003ePS1=\"${bold}${light_green}$(dir_chomp)${white}\";\u003c/code\u003e with \u003ccode\u003ePS1=\"${bold}${light_green}\\w${white}\";\u003c/code\u003e. That will show the full directory path. We are also setting some colors, using the variables we defined above. With those variables, they will make all characters after them that color until they reach a \u003ccode\u003e${reset}\u003c/code\u003e or another color variable.\u003c/p\u003e\n\n\u003cp\u003eNow that we have that in there, you can type \u003ccode\u003esource ~/.bash_prompt\u003c/code\u003e and you should be able to see your new prompt! Try navigating around with \u003ccode\u003ecd\u003c/code\u003e and see the directory change above the \u003ccode\u003e→\u003c/code\u003e character. If you like it, run \u003ccode\u003ecode .bashrc\u003c/code\u003e and add this to the end of the file:\u003cbr\u003e\n\u003c/p\u003e\n\n\u003cdiv class=\"highlight\"\u003e\u003cpre class=\"highlight shell\"\u003e\u003ccode\u003e\u003cspan class=\"c\"\u003e# end of ~/.bashrc\u003c/span\u003e\n\n\u003cspan class=\"nb\"\u003esource\u003c/span\u003e ~/.bash_prompt\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\n\n\n\n\u003cp\u003eNow it should stick to your editor.\u003c/p\u003e\n\n\u003ch2\u003e\n  \u003ca name=\"aliases\" href=\"#aliases\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  Aliases\n\u003c/h2\u003e\n\n\u003cp\u003eIf you use the command line a lot, you end up running the same couple commands over and over again. Sometimes it can help to shorten those commands and this is where aliases come in. You can add these directly to your \u003ccode\u003e~/.bashrc\u003c/code\u003e file. They look like this:\u003cbr\u003e\n\u003c/p\u003e\n\n\u003cdiv class=\"highlight\"\u003e\u003cpre class=\"highlight shell\"\u003e\u003ccode\u003e\u003cspan class=\"nb\"\u003ealias \u003c/span\u003e\u003cspan class=\"nv\"\u003eshort\u003c/span\u003e\u003cspan class=\"o\"\u003e=\u003c/span\u003e\u003cspan class=\"s1\"\u003e'longer command --here'\u003c/span\u003e\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\n\n\n\n\u003cp\u003eHere are some examples from my aliases (feel free to steal them!):\u003cbr\u003e\n\u003c/p\u003e\n\n\u003cdiv class=\"highlight\"\u003e\u003cpre class=\"highlight shell\"\u003e\u003ccode\u003e\u003cspan class=\"nb\"\u003ealias \u003c/span\u003e\u003cspan class=\"nv\"\u003ed\u003c/span\u003e\u003cspan class=\"o\"\u003e=\u003c/span\u003e\u003cspan class=\"s1\"\u003e'docker'\u003c/span\u003e\n\u003cspan class=\"nb\"\u003ealias \u003c/span\u003e\u003cspan class=\"nv\"\u003edi\u003c/span\u003e\u003cspan class=\"o\"\u003e=\u003c/span\u003e\u003cspan class=\"s1\"\u003e'docker images'\u003c/span\u003e\n\u003cspan class=\"nb\"\u003ealias \u003c/span\u003e\u003cspan class=\"nv\"\u003eda\u003c/span\u003e\u003cspan class=\"o\"\u003e=\u003c/span\u003e\u003cspan class=\"s1\"\u003e'docker ps -a'\u003c/span\u003e\n\u003cspan class=\"nb\"\u003ealias \u003c/span\u003e\u003cspan class=\"nv\"\u003edrma\u003c/span\u003e\u003cspan class=\"o\"\u003e=\u003c/span\u003e\u003cspan class=\"s1\"\u003e'docker rm -f $(docker ps -q)'\u003c/span\u003e\n\n\u003cspan class=\"nb\"\u003ealias \u003c/span\u003e\u003cspan class=\"nv\"\u003eip\u003c/span\u003e\u003cspan class=\"o\"\u003e=\u003c/span\u003e\u003cspan class=\"s2\"\u003e\"dig +short myip.opendns.com @resolver1.opendns.com\"\u003c/span\u003e\n\u003cspan class=\"nb\"\u003ealias \u003c/span\u003e\u003cspan class=\"nv\"\u003eipl\u003c/span\u003e\u003cspan class=\"o\"\u003e=\u003c/span\u003e\u003cspan class=\"s2\"\u003e\"hostname -I | cut -d' ' -f1\"\u003c/span\u003e\n\u003cspan class=\"nb\"\u003ealias \u003c/span\u003e\u003cspan class=\"nv\"\u003eips\u003c/span\u003e\u003cspan class=\"o\"\u003e=\u003c/span\u003e\u003cspan class=\"s2\"\u003e\"ifconfig -a | grep -o 'inet6\u003c/span\u003e\u003cspan class=\"se\"\u003e\\?\u003c/span\u003e\u003cspan class=\"s2\"\u003e \u003c/span\u003e\u003cspan class=\"se\"\u003e\\(\u003c/span\u003e\u003cspan class=\"s2\"\u003eaddr:\u003c/span\u003e\u003cspan class=\"se\"\u003e\\)\\?\\s\\?\\(\\(\\(\u003c/span\u003e\u003cspan class=\"s2\"\u003e[0-9]\u003c/span\u003e\u003cspan class=\"se\"\u003e\\+\\.\\)\\{\u003c/span\u003e\u003cspan class=\"s2\"\u003e3\u003c/span\u003e\u003cspan class=\"se\"\u003e\\}\u003c/span\u003e\u003cspan class=\"s2\"\u003e[0-9]\u003c/span\u003e\u003cspan class=\"se\"\u003e\\+\\)\\|\u003c/span\u003e\u003cspan class=\"s2\"\u003e[a-fA-F0-9:]\u003c/span\u003e\u003cspan class=\"se\"\u003e\\+\\)\u003c/span\u003e\u003cspan class=\"s2\"\u003e' | awk '{ sub(/inet6? (addr:)? ?/, \u003c/span\u003e\u003cspan class=\"se\"\u003e\\\"\\\"\u003c/span\u003e\u003cspan class=\"s2\"\u003e); print }'\"\u003c/span\u003e\n\n\u003cspan class=\"nb\"\u003ealias \u003c/span\u003e\u003cspan class=\"nv\"\u003ec\u003c/span\u003e\u003cspan class=\"o\"\u003e=\u003c/span\u003e\u003cspan class=\"s2\"\u003e\"code .\"\u003c/span\u003e\n\n\u003cspan class=\"nb\"\u003ealias \u003c/span\u003e\u003cspan class=\"nv\"\u003ebe\u003c/span\u003e\u003cspan class=\"o\"\u003e=\u003c/span\u003e\u003cspan class=\"s2\"\u003e\"bundle exec\"\u003c/span\u003e\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\n\n\n\n\u003cp\u003eNow you're looking good and your more productive to boot! There are lots of customizations you can do to customize your command prompt! I have some git status tools in mine. For more information, check out the \u003ca href=\"https://github.com/awesome-lists/awesome-bash\"\u003eAwesome Bash\u003c/a\u003e list or try googling \"awesome zsh\" or \"awesome fish shell\" for the other lists for other shells! \u003c/p\u003e\n\n\u003cp\u003eHappy hacking!\u003c/p\u003e\n\n","social_image":"","body_markdown":"---\r\ntitle: Developer Tools: The Command Line\r\npublished: true\r\ndescription: Getting a great command prompt\r\ncover_image: https://thepracticaldev.s3.amazonaws.com/i/u5akcyhn5v1cp0mbh3nv.png\r\nseries: Learning Developer Tools\r\ntags: beginner, career, tools\r\n---\r\n\r\nHello again!\r\n\r\nWelcome to the next post in this series! Today we're gonna be going over some the command line and terminal emulators. Again, this is a topic that changes quite a lot between operating systems, so check out [the second post in the series](https://dev.to/wuz/developer-tools-the-operating-system-3n55) for some good options! Let's jump right in!\r\n\r\n# Terminal Emulators\r\n\r\nLet's take a trip down memory lane. Back in the early days of computing, not everyone had their own computer. Instead, an institution might have a computer that it allowed its staff to use. To access this computer, you might have had a basic monitor and a keyboard setup, like the [VT100](https://en.wikipedia.org/wiki/VT100). This setup was called a terminal and it allowed you to enter commands that were processed by the main computer. Jump forward to today and you might be using something like Terminal.app, iTerm, kitty, or Gnome Terminal. These are called terminal emulators - they are software designed to act like the old school terminals and allow you to input and output from a computer. The only difference is that the computer you are working with is right in front of you, not in a different building on campus. \r\n\r\nYou might be wondering why we use something that imitates an old concept - don't we have GUI's and tools for this now? In some ways, you are right - many of the old tools have been replaced by more graphical alternatives. But as it turns out, text is still a great way to interact with a computer. Until we have great voice commands built into all software, text is the fastest way to do many things. \r\n\r\n# The shell\r\n\r\nNow we know what kind of programs we can use to interact with the computer using text. The shell is the program that reads that text and decides what to do. It takes a string like `git commit -m 'Add the things!'` and decides that it should route to `git` and needs to pass the parameters `commit -m 'Add the things!'`. They take a program and wrap around the execution of it, like a shell. 😉 \r\n\r\nThere are lots of different shell programs, all with their own features. Many add widgets and simplifications to make you more productive, which often hides the actual functionality of a shell program. Some have fancy ways to interact with your previous commands and others integrate programming languages like Python directly into the shell. It's also worth noting that in addition to being programs that you can run, each of these shells is a programming language that allows you to write command line functions and programs.\r\n\r\n## Bash\r\n\r\n[Bash](https://www.gnu.org/software/bash/) (Bourne Again SHell) is the default shell on most Unix operating systems. It has a lot of great features, like Tab completion and aliases. This is the shell I use - I like it because there are lots of great resources out there and it doesn't do too much. It's kind of the baseline for the good shells and many others are based in part on the ideas set forward by Bash. Bash is also integrated on Windows now, which makes switch computers/OS's much easier.\r\n\r\n## zsh\r\n\r\n[zsh](http://zsh.sourceforge.net/) (z-shell) is basically a more interactive version of Bash. In addition to Tab completion, it features type ahead search and autocomplete. Most people who use zsh install [ohmyzsh](https://ohmyz.sh/), which gives you some really good defaults for your shell. This is often a good choice for newer devs as it has lots of user-friendly features and a good community around it. \r\n\r\n## fish\r\n\r\n[fish](https://fishshell.com/) is pretty similar to zsh. It's got a lot of great user-friendly features. Fish has good syntax highlighting, which can be nice! Julia Evans has a great article on the benefits of [fish](https://jvns.ca/blog/2017/04/23/the-fish-shell-is-awesome/). I am thinking about switching to this in the future to play around with it.\r\n\r\nTodd likes fish and shared in the comments:\r\n\r\n{% devcomment 95k8 %}\r\n\r\n## xonsh\r\n\r\n[xonsh](https://xon.sh/index.html) is cross-platform and deeply integrations Python into the shell experience. If you like Python and don't like writing shell scripts, this might be a good option! \r\n\r\n## The others\r\n\r\nThere are a _lot_ of shell programs. People have lots of opinions on these things. Experiment a bit and see what programs you like the most. Searching for \"alternatives to bash\" is a good place to find some starting places.\r\n\r\n# The Command Prompt\r\n\r\nNow that we know what a terminal emulator is and how a shell works, let's talk about the command prompt. The command prompt is where you are going to type your commands - it's prompting you for input, which will be passed to the shell, which will decide how to respond. You'll most likely get some sort of output back, perhaps another string or a graphical program opening. Just like the shell, there are lots of possibilities when working with your command prompt. How they are displayed is usually handled by the shell, but the basic way to do it is to set an environment variable named PS1. Environment variables are global variables that tell your shell how to behave - they describe the environment that it is operating in.\r\n\r\n---\r\n \r\nIf you are interested in reading a bit more about all this terminology, [this StackOverflow answer](https://stackoverflow.com/a/21016640/1466592) is really good.\r\n\r\n# Some basic commands \r\n\r\n- `cd \u003cdirectory\u003e` - change to `\u003cdirectory\u003e` - Example: `cd ~/Projects`\r\n- `ls \u003cdirectory\u003e` - list the files in `\u003cdirectory\u003e` - Example: `ls ~/Projects`\r\n- `cp \u003cfile\u003e \u003clocation\u003e` - copy the `\u003cfile\u003e` to `\u003clocation\u003e` - Example: `cp ~/Projects/test.txt ~/textfile.txt`\r\n\r\nIf you want to learn more, I'd recommend checking [this tutorial](https://swcarpentry.github.io/shell-novice/) out.\r\n\r\n# Giving your shell superpowers\r\n\r\nOnce you have a shell, you'll want to upgrade it to fit your workflow! \r\n\r\n## Looking good!\r\n\r\nFirst, let start by making a good-looking prompt. In most shells, this is done by changing the PS1 enviroment variable. To start make a file in your home folder (you can get there by opening a terminal and typeing `cd ~`). Let's create a file called `.bash_prompt`. If you have VS Code installed, just run `code .bash_prompt`.\r\n\r\nOnce that file opens up, put this at the top:\r\n\r\n```sh\r\n#!/usr/bin/env bash\r\n\r\n# Shell prompt\r\n## Based on wuz/.files (github.com/wuz/.files)\r\n\r\nbold=\"\\[\\e[1m\\]\"\r\nreset=\"\\[\\e[0m\\]\"\r\nblack=\"\\[\\e[30m\\]\"\r\nblue=\"\\[\\e[34m\\]\"\r\ngreen=\"\\[\\e[32m\\]\"\r\ncyan=\"\\[\\e[36m\\]\"\r\nred=\"\\[\\e[31m\\]\"\r\nyellow=\"\\[\\e[33m\\]\"\r\npurple=\"\\[\\e[35m\\]\"\r\nbrown=\"\\[\\e[33m\\]\"\r\ngray=\"\\[\\e[37m\\]\"\r\ndark_gray=\"\\[\\e[90m\\]\"\r\nlight_blue=\"\\[\\e[94m\\]\"\r\nlight_green=\"\\[\\e[92m\\]\"\r\nlight_cyan=\"\\[\\e[96m\\]\"\r\nlight_red=\"\\[\\e[91m\\]\"\r\nlight_purple=\"\\[\\e[95m\\]\"\r\nlight_yellow=\"\\[\\e[93m\\]\"\r\nwhite=\"\\[\\e[97m\\]\"\r\n\r\n```\r\n\r\nThis gives us a bunch of colors to work with. Just for the record, those colors are described in [ANSI escape codes](https://en.wikipedia.org/wiki/ANSI_escape_code).\r\n\r\nNow that we have some colors set up, let's make a new prompt. Add this directly below what you have set up there.\r\n\r\n```sh\r\n\r\n# ^ rest of file ^\r\n\r\ndir_chomp() {\r\n  if [ $PWD == $HOME ]; then\r\n    echo \"~\";\r\n  else\r\n    local ns=\"${PWD//_/ }\"\r\n    local nh=\"${ns/#$HOME/\\~}\";\r\n    local wd=\"${nh%/*}\";\r\n    local wdnhrd=`echo $wd | sed -e \"s;\\(/.\\)[^/]*;\\1;g\"`\r\n    echo \"$wdnhrd/${ns##*/}\";\r\n  fi\r\n}\r\n\r\n# Set the terminal title and prompt.\r\nPS1=\"${bold}${light_green}\\$(dir_chomp)${white}\";\r\nPS1+=\"${blue}${bold}\\n→ ${reset}\"\r\nexport PS1;\r\n```\r\n\r\nHere we are creating a function called dir_chomp, which takes a directory like `~/Projects/Work/app` and converts it into `~/P/W/app`. If you don't like that, replace this line: `PS1=\"${bold}${light_green}$(dir_chomp)${white}\";` with `PS1=\"${bold}${light_green}\\w${white}\";`. That will show the full directory path. We are also setting some colors, using the variables we defined above. With those variables, they will make all characters after them that color until they reach a `${reset}` or another color variable.\r\n\r\nNow that we have that in there, you can type `source ~/.bash_prompt` and you should be able to see your new prompt! Try navigating around with `cd` and see the directory change above the `→` character. If you like it, run `code .bashrc` and add this to the end of the file:\r\n\r\n```sh\r\n# end of ~/.bashrc\r\n\r\nsource ~/.bash_prompt\r\n```\r\n\r\nNow it should stick to your editor.\r\n\r\n## Aliases\r\n\r\nIf you use the command line a lot, you end up running the same couple commands over and over again. Sometimes it can help to shorten those commands and this is where aliases come in. You can add these directly to your `~/.bashrc` file. They look like this:\r\n\r\n```sh\r\nalias short='longer command --here'\r\n```\r\n\r\nHere are some examples from my aliases (feel free to steal them!):\r\n\r\n```sh\r\nalias d='docker'\r\nalias di='docker images'\r\nalias da='docker ps -a'\r\nalias drma='docker rm -f $(docker ps -q)'\r\n\r\nalias ip=\"dig +short myip.opendns.com @resolver1.opendns.com\"\r\nalias ipl=\"hostname -I | cut -d' ' -f1\"\r\nalias ips=\"ifconfig -a | grep -o 'inet6\\? \\(addr:\\)\\?\\s\\?\\(\\(\\([0-9]\\+\\.\\)\\{3\\}[0-9]\\+\\)\\|[a-fA-F0-9:]\\+\\)' | awk '{ sub(/inet6? (addr:)? ?/, \\\"\\\"); print }'\"\r\n\r\nalias c=\"code .\"\r\n\r\nalias be=\"bundle exec\"\r\n```\r\n\r\nNow you're looking good and your more productive to boot! There are lots of customizations you can do to customize your command prompt! I have some git status tools in mine. For more information, check out the [Awesome Bash](https://github.com/awesome-lists/awesome-bash) list or try googling \"awesome zsh\" or \"awesome fish shell\" for the other lists for other shells! \r\n\r\nHappy hacking!","canonical_url":null,"show_comments":true,"main_image_background_hex_color":"#dddddd","published_from_feed":false,"comments_count":4,"video":null,"video_code":null,"video_source_url":null,"video_thumbnail_url":null,"video_closed_caption_track_url":null,"feed_source_url":null,"edited_at":"2019-03-01T19:57:55.507Z","crossposted_at":null,"language":null,"cached_tag_list":"beginners, career, tools","path":"/wuz/developer-tools-the-command-line-3f66","cached_user_name":"Conlin Durbin","cached_user_username":"wuz","last_comment_at":"2019-03-01T19:57:27.740Z","public_reactions_count":54},{"title":"Developer Tools: The Code Editor","slug":"developer-tools-the-code-editor-11b5","created_at":"2019-01-26T18:06:02.548Z","main_image":"https://thepracticaldev.s3.amazonaws.com/i/silz8vz45z3yllzp5jdt.png","description":"Code Editors","published":true,"published_at":"2019-02-27T14:06:26.916Z","processed_html":"\u003cp\u003eWelcome back, friends!\u003c/p\u003e\n\n\u003cp\u003eToday, we are going to be looking at the code editor. This is a Software Engineer's bread and butter. It's how you take the ideas in your head and get them into a computer. \u003c/p\u003e\n\n\u003cp\u003eThere are tons of options and everyone has an opinion on which is the best. The Emacs vs Vim debate will rage until the end of time. At the end of the day, however, you have to make a decision about whatever works the best for you. For me, it is a mix between Vim and VSCode.\u003c/p\u003e\n\n\u003cp\u003eThat being said, there are a few things that all good text editors will have. (I know there are some people out there that will disagree, but whatever :P)\u003c/p\u003e\n\n\u003cblockquote\u003e\n\u003cp\u003e\u003cem\u003eNote:\u003c/em\u003e Not every editor is on every OS, so definitely check out the previous article in this series!\u003c/p\u003e\n\u003c/blockquote\u003e\n\n\u003ch2\u003e\n  \u003ca name=\"themes-amp-syntax-highlighting\" href=\"#themes-amp-syntax-highlighting\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  Themes \u0026amp; Syntax Highlighting\n\u003c/h2\u003e\n\n\u003cp\u003e\u003ca href=\"https://res.cloudinary.com/practicaldev/image/fetch/s--kLIHWD1r--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dankneon.com/vscode/assets/vscode.png\" class=\"article-body-image-wrapper\"\u003e\u003cimg src=\"https://res.cloudinary.com/practicaldev/image/fetch/s--kLIHWD1r--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dankneon.com/vscode/assets/vscode.png\" alt=\"\" loading=\"lazy\"\u003e\u003c/a\u003e\u003c/p\u003e\n\n\u003cp\u003eMost modern editors (and many older ones) have the ability to change the colors of the things you are looking at. Many have UI and syntax themes, which change the colors of the editor itself and the color of the code, respectively. The colors you use are definitely a personal preference. There are light themes and dark themes, natural colors and neon. When choosing a theme, remember that this is something you have to be looking at for multiple hours a day - you want something easy to read and that makes it easy to work in the language that you primarily write.\u003c/p\u003e\n\n\u003cp\u003e(\u003cem\u003eSide note:\u003c/em\u003e if you are looking for a new theme, check out \u003ca href=\"https://dankneon.com/\"\u003eDank Neon\u003c/a\u003e. We are working hard on it and its open source!)\u003c/p\u003e\n\n\u003ch2\u003e\n  \u003ca name=\"extensibility\" href=\"#extensibility\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  Extensibility\n\u003c/h2\u003e\n\n\u003cp\u003eOdds are, not everything in your editor is going to be exactly what you want it to be - a good editor will have options for letting you change default settings. Many have extensible preferences, plugin architectures, and some, like Vim, even have their own programming language.\u003c/p\u003e\n\n\u003ch2\u003e\n  \u003ca name=\"a-healthy-community\" href=\"#a-healthy-community\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  A healthy community\n\u003c/h2\u003e\n\n\u003cp\u003eSome people may enjoy working with an editor that they built themselves or that is very obscure, but for most of us, that time is better spent learning and developing new skills. Having a good community makes troubleshooting any problems you have much easier. It also is a great way to get involved in the community and give back - once you know an answer, you can help someone the next time that comes up!\u003c/p\u003e\n\n\u003ch1\u003e\n  \u003ca name=\"an-editor-of-your-very-own\" href=\"#an-editor-of-your-very-own\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  An editor of your very own\n\u003c/h1\u003e\n\n\u003cp\u003eNow that we have covered some of the basic features of editors, let's talk about getting started with your editor. First things first, find one you like. I'll be putting a list of editors and plugins at the end of this post. If you don't already have an editor you like, scroll on down and compare some of the options! For the sake of explanation, I am going to use VS Code to walk through the rest of these steps. Almost every editor will have a way of doing the things outlined. If you aren't using VS Code, you should be able to just Google the topic in the header plus the editor name (i.e \"installing shell commands atom\"). Let's go!\u003c/p\u003e\n\n\u003ch2\u003e\n  \u003ca name=\"installing-shell-commands\" href=\"#installing-shell-commands\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  Installing Shell Commands\n\u003c/h2\u003e\n\n\u003cp\u003eOnce you have VS code installed, run it! Right off the bat, you should have a good amount of tools and services available to you, but we want to make this editor our own! The first thing to do will be to install the shell commands - this lets you run \u003ccode\u003ecode ~/SomeFolder/SomeFile.js\u003c/code\u003e to open the file in VS code. To do this, switch to the VS code window and hit \u003ccode\u003e(cmd/ctrl)+shift+P\u003c/code\u003e. This will bring up the command palette, a place that lets you run various commands and editor related functions. Type \u003ccode\u003eshell\u003c/code\u003e and select \u003cem\u003e\"Install 'code' command in Path\"\u003c/em\u003e. Now close out of VS Code and switch to a folder that has a file you can edit. Type \u003ccode\u003ecode \u0026lt;file_name\u0026gt;\u003c/code\u003e, where \u003ccode\u003e\u0026lt;file_name\u0026gt;\u003c/code\u003e is the name of the file you want to edit. If VS Code popped up with that file, you did it!\u003c/p\u003e\n\n\u003ch2\u003e\n  \u003ca name=\"installing-a-theme\" href=\"#installing-a-theme\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  Installing a theme\n\u003c/h2\u003e\n\n\u003cp\u003eNow that we have the shell commands set up, let's install a theme. Head on over to \u003ca href=\"https://vscodethemes.com/\"\u003eVSCodeThemes\u003c/a\u003e and browse for a bit. I am going to install \u003ca href=\"https://dankneon.com/vscode\"\u003eDank Neon\u003c/a\u003e (it has support for a bunch of different editors!). Back in VS Code, hit \u003ccode\u003e(cmd/ctrl)+shift+X\u003c/code\u003e to open up the extensions sidebar panel. Once that is open, search for the package you want to install.\u003c/p\u003e\n\n\n\u003ccenter\u003e\u003cimg src=\"https://res.cloudinary.com/practicaldev/image/fetch/s--xEnuxtk---/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/xtqtpx2d9lj5dspj5j9y.png\" alt=\"install button\" loading=\"lazy\"\u003e\u003c/center\u003e\n\n\u003cp\u003eOnce you find the theme, click the green install button. The theme should automatically change to your new one! If it doesn't, bring up the Command Palette and type \u003ccode\u003eColor Scheme\u003c/code\u003e and select \u003cem\u003e\"Preferences: Color Theme\"\u003c/em\u003e, then select the theme you want to use. \u003c/p\u003e\n\u003ch2\u003e\n  \u003ca name=\"install-languagetool-packages\" href=\"#install-languagetool-packages\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  Install language/tool packages\n\u003c/h2\u003e\n\n\u003cp\u003eMost editors come with basic support for most languages, but often you will want some more packages for your language. Bring up the extensions sidebar panel again and search for the language you use the most, like \u003ccode\u003eruby\u003c/code\u003e, \u003ccode\u003ejavascript\u003c/code\u003e, and more. For tools, you can find things like \u003ccode\u003eeslint\u003c/code\u003e and \u003ccode\u003erubocop\u003c/code\u003e pretty easily. Look through some of the packages and find ones that look good to you! Typically you are looking for things that have the functionality you want and have a good number of installations. Check the list below for some lists of good packages. You can also Google stuff like \"set up vscode for javascript\" to find good packages and tutorials.\u003c/p\u003e\n\u003ch1\u003e\n  \u003ca name=\"advanced-studies\" href=\"#advanced-studies\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  Advanced studies\n\u003c/h1\u003e\n\n\u003cp\u003eOnce you have started getting comfortable with your editor, I'd highly recommend building a package. A theme is a great place to start, but building plugins is a great way to share your workflows and improve your understanding of the inner workings of your editor.\u003c/p\u003e\n\u003ch1\u003e\n  \u003ca name=\"links-and-more\" href=\"#links-and-more\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  Links and More\n\u003c/h1\u003e\n\u003ch2\u003e\n  \u003ca name=\"editors\" href=\"#editors\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  Editors\n\u003c/h2\u003e\n\n\u003cp\u003e\u003ca href=\"https://code.visualstudio.com/\"\u003eVS Code\u003c/a\u003e\u003c/p\u003e\n\n\u003cp\u003e\u003ca href=\"https://atom.io/\"\u003eAtom\u003c/a\u003e\u003c/p\u003e\n\n\u003cp\u003e\u003ca href=\"https://notepad-plus-plus.org\"\u003eNotepad++\u003c/a\u003e\u003c/p\u003e\n\n\u003cp\u003e\u003ca href=\"https://www.sublimetext.com/\"\u003eSublime Text\u003c/a\u003e\u003c/p\u003e\n\n\u003cp\u003e\u003ca href=\"http://brackets.io/\"\u003eBrackets\u003c/a\u003e\u003c/p\u003e\n\u003ch2\u003e\n  \u003ca name=\"extensions-and-more\" href=\"#extensions-and-more\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  Extensions and more\n\u003c/h2\u003e\n\n\u003cp\u003eNote: Awesome lists are a great place to find resources for all sorts of things! When in doubt, Google \"awesome list \u0026lt; thing \u0026gt;\".\u003c/p\u003e\n\n\u003cp\u003e\u003ca href=\"https://github.com/viatsko/awesome-vscode\"\u003eAwesome VS Code\u003c/a\u003e\u003c/p\u003e\n\n\u003cp\u003e\u003ca href=\"https://github.com/mehcode/awesome-atom\"\u003eAwesome Atom\u003c/a\u003e\u003c/p\u003e\n\n\u003cp\u003e\u003ca href=\"https://www.guidingtech.com/31357/notepad-plus-plugins/\"\u003eNotepad++ Plugins\u003c/a\u003e\u003c/p\u003e\n\n\u003cp\u003e\u003ca href=\"https://github.com/viatsko/awesome-brackets\"\u003eAwesome Brackets\u003c/a\u003e\u003c/p\u003e\n\n\u003cp\u003e\u003cstrong\u003eEdit: More links from the community!\u003c/strong\u003e\u003c/p\u003e\n\n\n\u003cdiv class=\"liquid-comment\"\u003e\n  \u003cdiv class=\"details\"\u003e\n    \u003ca href=\"/glennmen\"\u003e\n      \u003cimg class=\"profile-pic\" src=\"https://res.cloudinary.com/practicaldev/image/fetch/s--hH65py3E--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://res.cloudinary.com/practicaldev/image/fetch/s--pKppfFx0--/c_fill%2Cf_auto%2Cfl_progressive%2Ch_50%2Cq_auto%2Cw_50/https://dev-to-uploads.s3.amazonaws.com/uploads/user/profile_image/106426/07fc4c72-1236-47ae-ad4c-dc0451d5f7b3.jpg\" alt=\"glennmen profile image\" loading=\"lazy\"\u003e\n    \u003c/a\u003e\n    \u003ca href=\"/glennmen\"\u003e\n      \u003cspan class=\"comment-username\"\u003eGlenn Carremans\u003c/span\u003e\n    \u003c/a\u003e\n      \u003ca href=\"https://twitter.com/GlennCarremans\"\u003e\n        \u003cimg src=\"/assets/twitter-logo.svg\" class=\"icon-img\" alt=\"twitter\" loading=\"lazy\"\u003e\n      \u003c/a\u003e\n      \u003ca href=\"https://github.com/Glennmen\"\u003e\n        \u003cimg src=\"/assets/github-logo.svg\" class=\"icon-img\" alt=\"github\" loading=\"lazy\"\u003e\n      \u003c/a\u003e\n    \u003cdiv class=\"comment-date\"\u003e\n  \u003ca href=\"/glennmen/comment/94ge\"\u003e\n    \u003ctime datetime=\"2019-02-27T18:37:30Z\"\u003e\n      Feb 27 '19\n    \u003c/time\u003e\n  \u003c/a\u003e\n\u003c/div\u003e\n\n  \u003c/div\u003e\n  \u003cdiv class=\"body\"\u003e\n    \n\n\u003cp\u003eCurrently my theme of choice that I use for almost everything (iTerm, Android Studio, PHPStorm, ...) is Dracula.\u003cbr\u003e\nIt is open-source and supports a lot of different tools.\u003c/p\u003e\n\n\u003cp\u003eLink: \u003ca href=\"https://draculatheme.com/\"\u003edraculatheme.com/\u003c/a\u003e\u003c/p\u003e\n\n\n\n  \u003c/div\u003e\n\u003c/div\u003e\n\n\n\n\u003cdiv class=\"liquid-comment\"\u003e\n  \u003cdiv class=\"details\"\u003e\n    \u003ca href=\"/learnbyexample\"\u003e\n      \u003cimg class=\"profile-pic\" src=\"https://res.cloudinary.com/practicaldev/image/fetch/s--tOPJ7YiZ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://res.cloudinary.com/practicaldev/image/fetch/s--OXeDO8rp--/c_fill%2Cf_auto%2Cfl_progressive%2Ch_50%2Cq_auto%2Cw_50/https://dev-to-uploads.s3.amazonaws.com/uploads/user/profile_image/58373/dcd23389-ef2e-4f02-a790-ea167ddb97d3.png\" alt=\"learnbyexample profile image\" loading=\"lazy\"\u003e\n    \u003c/a\u003e\n    \u003ca href=\"/learnbyexample\"\u003e\n      \u003cspan class=\"comment-username\"\u003eSundeep\u003c/span\u003e\n    \u003c/a\u003e\n      \u003ca href=\"https://twitter.com/learn_byexample\"\u003e\n        \u003cimg src=\"/assets/twitter-logo.svg\" class=\"icon-img\" alt=\"twitter\" loading=\"lazy\"\u003e\n      \u003c/a\u003e\n      \u003ca href=\"https://github.com/learnbyexample\"\u003e\n        \u003cimg src=\"/assets/github-logo.svg\" class=\"icon-img\" alt=\"github\" loading=\"lazy\"\u003e\n      \u003c/a\u003e\n    \u003cdiv class=\"comment-date\"\u003e\n  \u003ca href=\"/learnbyexample/comment/94oh\"\u003e\n    \u003ctime datetime=\"2019-02-28T12:09:56Z\"\u003e\n      Feb 28 '19\n    \u003c/time\u003e\n  \u003c/a\u003e\n\u003c/div\u003e\n\n  \u003c/div\u003e\n  \u003cdiv class=\"body\"\u003e\n    \n\n\u003cp\u003eI use Vim, so here's \u003ca href=\"https://github.com/learnbyexample/scripting_course/blob/master/Vim_curated_resources.md\"\u003emy curated list of Vim resources\u003c/a\u003e\u003c/p\u003e\n\n\u003cp\u003eI do have one bookmarked for emacs as well \u003ca href=\"https://batsov.com/articles/2011/11/30/the-ultimate-collection-of-emacs-resources/\"\u003eThe Ultimate Collection of Emacs Resources\u003c/a\u003e\u003c/p\u003e\n\n\n\n  \u003c/div\u003e\n\u003c/div\u003e\n\n\n\n\u003cdiv class=\"liquid-comment\"\u003e\n  \u003cdiv class=\"details\"\u003e\n    \u003ca href=\"/learnbyexample\"\u003e\n      \u003cimg class=\"profile-pic\" src=\"https://res.cloudinary.com/practicaldev/image/fetch/s--tOPJ7YiZ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://res.cloudinary.com/practicaldev/image/fetch/s--OXeDO8rp--/c_fill%2Cf_auto%2Cfl_progressive%2Ch_50%2Cq_auto%2Cw_50/https://dev-to-uploads.s3.amazonaws.com/uploads/user/profile_image/58373/dcd23389-ef2e-4f02-a790-ea167ddb97d3.png\" alt=\"learnbyexample profile image\" loading=\"lazy\"\u003e\n    \u003c/a\u003e\n    \u003ca href=\"/learnbyexample\"\u003e\n      \u003cspan class=\"comment-username\"\u003eSundeep\u003c/span\u003e\n    \u003c/a\u003e\n      \u003ca href=\"https://twitter.com/learn_byexample\"\u003e\n        \u003cimg src=\"/assets/twitter-logo.svg\" class=\"icon-img\" alt=\"twitter\" loading=\"lazy\"\u003e\n      \u003c/a\u003e\n      \u003ca href=\"https://github.com/learnbyexample\"\u003e\n        \u003cimg src=\"/assets/github-logo.svg\" class=\"icon-img\" alt=\"github\" loading=\"lazy\"\u003e\n      \u003c/a\u003e\n    \u003cdiv class=\"comment-date\"\u003e\n  \u003ca href=\"/learnbyexample/comment/94ol\"\u003e\n    \u003ctime datetime=\"2019-02-28T12:14:05Z\"\u003e\n      Feb 28 '19\n    \u003c/time\u003e\n  \u003c/a\u003e\n\u003c/div\u003e\n\n  \u003c/div\u003e\n  \u003cdiv class=\"body\"\u003e\n    \n\n\u003cp\u003ethere is also \u003ca href=\"https://github.com/VSCodium/vscodium\"\u003eVSCodium - Free/Libre Open Source Software Binaries of VSCode\u003c/a\u003e\u003c/p\u003e\n\n\n\n  \u003c/div\u003e\n\u003c/div\u003e\n\n\n","social_image":"","body_markdown":"---\r\ntitle: Developer Tools: The Code Editor\r\npublished: true\r\ndescription: Code Editors\r\ncover_image: https://thepracticaldev.s3.amazonaws.com/i/silz8vz45z3yllzp5jdt.png\r\nseries: Learning Developer Tools\r\ntags: beginner, career, tools\r\n---\r\n\r\nWelcome back, friends!\r\n\r\nToday, we are going to be looking at the code editor. This is a Software Engineer's bread and butter. It's how you take the ideas in your head and get them into a computer. \r\n\r\nThere are tons of options and everyone has an opinion on which is the best. The Emacs vs Vim debate will rage until the end of time. At the end of the day, however, you have to make a decision about whatever works the best for you. For me, it is a mix between Vim and VSCode.\r\n\r\n\r\nThat being said, there are a few things that all good text editors will have. (I know there are some people out there that will disagree, but whatever :P)\r\n\r\n\u003e *Note:* Not every editor is on every OS, so definitely check out the previous article in this series!\r\n\r\n## Themes \u0026 Syntax Highlighting\r\n\r\n![](https://dankneon.com/vscode/assets/vscode.png)\r\n\r\nMost modern editors (and many older ones) have the ability to change the colors of the things you are looking at. Many have UI and syntax themes, which change the colors of the editor itself and the color of the code, respectively. The colors you use are definitely a personal preference. There are light themes and dark themes, natural colors and neon. When choosing a theme, remember that this is something you have to be looking at for multiple hours a day - you want something easy to read and that makes it easy to work in the language that you primarily write.\r\n\r\n(*Side note:* if you are looking for a new theme, check out [Dank Neon](https://dankneon.com/). We are working hard on it and its open source!)\r\n\r\n## Extensibility\r\n\r\nOdds are, not everything in your editor is going to be exactly what you want it to be - a good editor will have options for letting you change default settings. Many have extensible preferences, plugin architectures, and some, like Vim, even have their own programming language.\r\n\r\n## A healthy community\r\n\r\nSome people may enjoy working with an editor that they built themselves or that is very obscure, but for most of us, that time is better spent learning and developing new skills. Having a good community makes troubleshooting any problems you have much easier. It also is a great way to get involved in the community and give back - once you know an answer, you can help someone the next time that comes up!\r\n\r\n# An editor of your very own\r\n\r\nNow that we have covered some of the basic features of editors, let's talk about getting started with your editor. First things first, find one you like. I'll be putting a list of editors and plugins at the end of this post. If you don't already have an editor you like, scroll on down and compare some of the options! For the sake of explanation, I am going to use VS Code to walk through the rest of these steps. Almost every editor will have a way of doing the things outlined. If you aren't using VS Code, you should be able to just Google the topic in the header plus the editor name (i.e \"installing shell commands atom\"). Let's go!\r\n\r\n## Installing Shell Commands\r\n\r\nOnce you have VS code installed, run it! Right off the bat, you should have a good amount of tools and services available to you, but we want to make this editor our own! The first thing to do will be to install the shell commands - this lets you run `code ~/SomeFolder/SomeFile.js` to open the file in VS code. To do this, switch to the VS code window and hit `(cmd/ctrl)+shift+P`. This will bring up the command palette, a place that lets you run various commands and editor related functions. Type `shell` and select *\"Install 'code' command in Path\"*. Now close out of VS Code and switch to a folder that has a file you can edit. Type `code \u003cfile_name\u003e`, where `\u003cfile_name\u003e` is the name of the file you want to edit. If VS Code popped up with that file, you did it!\r\n\r\n## Installing a theme\r\n\r\nNow that we have the shell commands set up, let's install a theme. Head on over to [VSCodeThemes](https://vscodethemes.com/) and browse for a bit. I am going to install [Dank Neon](https://dankneon.com/vscode) (it has support for a bunch of different editors!). Back in VS Code, hit `(cmd/ctrl)+shift+X` to open up the extensions sidebar panel. Once that is open, search for the package you want to install.\r\n\r\n\u003ccenter\u003e![install button](https://thepracticaldev.s3.amazonaws.com/i/xtqtpx2d9lj5dspj5j9y.png)\u003c/center\u003e\r\n\r\nOnce you find the theme, click the green install button. The theme should automatically change to your new one! If it doesn't, bring up the Command Palette and type `Color Scheme` and select *\"Preferences: Color Theme\"*, then select the theme you want to use. \r\n\r\n## Install language/tool packages\r\n\r\nMost editors come with basic support for most languages, but often you will want some more packages for your language. Bring up the extensions sidebar panel again and search for the language you use the most, like `ruby`, `javascript`, and more. For tools, you can find things like `eslint` and `rubocop` pretty easily. Look through some of the packages and find ones that look good to you! Typically you are looking for things that have the functionality you want and have a good number of installations. Check the list below for some lists of good packages. You can also Google stuff like \"set up vscode for javascript\" to find good packages and tutorials.\r\n\r\n# Advanced studies\r\n\r\nOnce you have started getting comfortable with your editor, I'd highly recommend building a package. A theme is a great place to start, but building plugins is a great way to share your workflows and improve your understanding of the inner workings of your editor.\r\n\r\n# Links and More\r\n\r\n## Editors\r\n\r\n[VS Code](https://code.visualstudio.com/)\r\n\r\n[Atom](https://atom.io/)\r\n\r\n[Notepad++](https://notepad-plus-plus.org)\r\n\r\n[Sublime Text](https://www.sublimetext.com/)\r\n\r\n[Brackets](http://brackets.io/)\r\n\r\n## Extensions and more\r\nNote: Awesome lists are a great place to find resources for all sorts of things! When in doubt, Google \"awesome list \u003c thing \u003e\".\r\n\r\n[Awesome VS Code](https://github.com/viatsko/awesome-vscode)\r\n\r\n[Awesome Atom](https://github.com/mehcode/awesome-atom)\r\n\r\n[Notepad++ Plugins](https://www.guidingtech.com/31357/notepad-plus-plugins/)\r\n\r\n[Awesome Brackets](https://github.com/viatsko/awesome-brackets)\r\n\r\n**Edit: More links from the community!**\r\n\r\n{% devcomment 94ge %}\r\n\r\n{% devcomment 94oh %}\r\n\r\n{% devcomment 94ol %}","canonical_url":null,"show_comments":true,"main_image_background_hex_color":"#dddddd","published_from_feed":false,"comments_count":13,"video":null,"video_code":null,"video_source_url":null,"video_thumbnail_url":null,"video_closed_caption_track_url":null,"feed_source_url":null,"edited_at":"2019-02-28T15:53:38.363Z","crossposted_at":null,"language":null,"cached_tag_list":"beginners, career, tools","path":"/wuz/developer-tools-the-code-editor-11b5","cached_user_name":"Conlin Durbin","cached_user_username":"wuz","last_comment_at":"2019-06-14T12:36:36.815Z","public_reactions_count":82},{"title":"Frontend Metrics: CSS Specificity","slug":"frontend-metrics-css-specificity-288p","created_at":"2019-01-28T21:48:43.754Z","main_image":"https://thepracticaldev.s3.amazonaws.com/i/bipxwy3ljekxfuzncfd3.png","description":"What are CSS Specificity graphs and how are they helpful? ","published":true,"published_at":"2019-01-28T22:50:36.524Z","processed_html":"\u003cp\u003eI've been working a lot on discovering and tracking useful Frontend metrics and I wanted to share some of the things I've learned. This will probably be an ad-hoc, at-random series on all things Frontend Metrics as I learn more about them!\u003c/p\u003e\n\n\u003ch1\u003e\n  \u003ca name=\"what-the-heck-is-css-specificity\" href=\"#what-the-heck-is-css-specificity\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  What the heck is CSS Specificity?\n\u003c/h1\u003e\n\n\u003cp\u003e[Emma] put together an overview of what CSS specificity is and has done a much better job than I ever could!\u003c/p\u003e\n\n\n\u003cdiv class=\"ltag__link\"\u003e\n  \u003cdiv class=\"ltag__link__content\"\u003e\n    \u003cdiv class=\"missing\"\u003e\n      \u003ch2\u003eArticle No Longer Available\u003c/h2\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n\n\n\u003cp\u003eFor a quick recap, CSS specificity involves the \"cascading\" part of Cascading Style Sheets. The specificity of a CSS selector decides which style should be given to an element. Good specificity should keep you from needing many \u003ccode\u003e!important\u003c/code\u003es.\u003c/p\u003e\n\n\u003cp\u003eIt's a great thing to know about when writing CSS and it is an even better thing to track over time! For my day job, we've been working to gather some frontend metrics so we can see how our work is impacting the application. One thing we are tracking is what the CSS specificity looks like across the whole file in something called a specificity graph.\u003c/p\u003e\n\n\u003ch1\u003e\n  \u003ca name=\"what-does-a-good-specificity-graph-look-like\" href=\"#what-does-a-good-specificity-graph-look-like\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  What does a good specificity graph look like?\n\u003c/h1\u003e\n\n\u003cp\u003e\u003ca href=\"https://res.cloudinary.com/practicaldev/image/fetch/s---x3boBD4--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/cw4sfz5gg38sr2ptjelv.png\" class=\"article-body-image-wrapper\"\u003e\u003cimg src=\"https://res.cloudinary.com/practicaldev/image/fetch/s---x3boBD4--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/cw4sfz5gg38sr2ptjelv.png\" alt=\"A CSS specificity chart\" loading=\"lazy\"\u003e\u003c/a\u003e\u003c/p\u003e\n\n\u003cp\u003eA good specificity graph has a few noticable attributes. Firstly, it's plotted with the specificity of the selector along the \u003ccode\u003ey\u003c/code\u003e axis and the position of the selector in the CSS file along the \u003ccode\u003ex\u003c/code\u003e axis. Ideally, your specificity should hockey stick - for most of the file, it should remain steady and any major specificity spikes should be confined towards the end.\u003c/p\u003e\n\n\u003ch1\u003e\n  \u003ca name=\"how-do-you-graph-your-css-specificity\" href=\"#how-do-you-graph-your-css-specificity\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  How do you graph your CSS specificity?\n\u003c/h1\u003e\n\n\u003cp\u003eI've got the metrics I am working on set up in my companies \u003ca href=\"https://metabase.com\"\u003eMetabase\u003c/a\u003e, but I build a small tool to see your specificity graph. The code isn't super hard to understand. Try it out, then check out the \u003ccode\u003egetCSSStats.js\u003c/code\u003e file. It uses \u003ca href=\"https://npmjs.com/package/cssstats\"\u003ecssstats\u003c/a\u003e under the hood to get the stats for a chunk of CSS.\u003c/p\u003e\n\n\n\u003cdiv class=\"glitch-embed-wrap\" style=\"height: 450px; width: 100%;margin: 1em auto 1.3em\"\u003e\n  \u003ciframe sandbox=\"allow-same-origin allow-scripts allow-forms allow-top-navigation-by-user-activation allow-popups\" src=\"https://glitch.com/embed/#!/embed/mud-leather?previewSize=100\u0026amp;path=index.html\" alt=\"mud-leather on glitch\" style=\"height: 100%; width: 100%; border: 0;margin:0;padding:0\" loading=\"lazy\"\u003e\u003c/iframe\u003e\n\u003c/div\u003e\n\n\n\u003cp\u003eBy monitoring the changes in the graph as you make changes to your CSS, you can ensure you are on the right track. It's not a hard-and-fast rule - lots of times you need certain specificity - and it's easy to break when using \u003ccode\u003escss\u003c/code\u003e or \u003ccode\u003eless\u003c/code\u003e imports. When used as a quick health check however, a good specificity graph can be very useful!\u003c/p\u003e\n\n\u003cp\u003eRead more about specificity graphs \u003ca href=\"https://csswizardry.com/2014/10/the-specificity-graph/\"\u003ehere\u003c/a\u003e\u003c/p\u003e\n\n\u003cp\u003eHave a great week, devs! What kind of metrics do you track? What do you think about CSS specificity graphs?\u003c/p\u003e\n\n","social_image":"","body_markdown":"---\r\ntitle: Frontend Metrics: CSS Specificity\r\npublished: true\r\ndescription: What are CSS Specificity graphs and how are they helpful? \r\ncover_image: https://thepracticaldev.s3.amazonaws.com/i/bipxwy3ljekxfuzncfd3.png\r\nseries: Frontend Metrics\r\ntags: css, metrics, frontend\r\n---\r\n\r\nI've been working a lot on discovering and tracking useful Frontend metrics and I wanted to share some of the things I've learned. This will probably be an ad-hoc, at-random series on all things Frontend Metrics as I learn more about them!\r\n\r\n# What the heck is CSS Specificity?\r\n\r\n[Emma] put together an overview of what CSS specificity is and has done a much better job than I ever could!\r\n\r\n{% link emmawedekind/css-specificity-1kca %}\r\n\r\nFor a quick recap, CSS specificity involves the \"cascading\" part of Cascading Style Sheets. The specificity of a CSS selector decides which style should be given to an element. Good specificity should keep you from needing many `!important`s.\r\n\r\nIt's a great thing to know about when writing CSS and it is an even better thing to track over time! For my day job, we've been working to gather some frontend metrics so we can see how our work is impacting the application. One thing we are tracking is what the CSS specificity looks like across the whole file in something called a specificity graph.\r\n\r\n# What does a good specificity graph look like?\r\n\r\n![A CSS specificity chart](https://thepracticaldev.s3.amazonaws.com/i/cw4sfz5gg38sr2ptjelv.png)\r\n\r\nA good specificity graph has a few noticable attributes. Firstly, it's plotted with the specificity of the selector along the `y` axis and the position of the selector in the CSS file along the `x` axis. Ideally, your specificity should hockey stick - for most of the file, it should remain steady and any major specificity spikes should be confined towards the end.\r\n\r\n# How do you graph your CSS specificity?\r\n\r\nI've got the metrics I am working on set up in my companies [Metabase](https://metabase.com), but I build a small tool to see your specificity graph. The code isn't super hard to understand. Try it out, then check out the `getCSSStats.js` file. It uses [cssstats](https://npmjs.com/package/cssstats) under the hood to get the stats for a chunk of CSS.\r\n\r\n{% glitch mud-leather app %}\r\n\r\nBy monitoring the changes in the graph as you make changes to your CSS, you can ensure you are on the right track. It's not a hard-and-fast rule - lots of times you need certain specificity - and it's easy to break when using `scss` or `less` imports. When used as a quick health check however, a good specificity graph can be very useful!\r\n\r\nRead more about specificity graphs [here](https://csswizardry.com/2014/10/the-specificity-graph/)\r\n\r\nHave a great week, devs! What kind of metrics do you track? What do you think about CSS specificity graphs?\r\n","canonical_url":null,"show_comments":true,"main_image_background_hex_color":"#dddddd","published_from_feed":false,"comments_count":2,"video":null,"video_code":null,"video_source_url":null,"video_thumbnail_url":null,"video_closed_caption_track_url":null,"feed_source_url":null,"edited_at":null,"crossposted_at":null,"language":null,"cached_tag_list":"css, metrics, frontend","path":"/wuz/frontend-metrics-css-specificity-288p","cached_user_name":"Conlin Durbin","cached_user_username":"wuz","last_comment_at":"2019-01-28T23:47:03.677Z","public_reactions_count":37},{"title":"Non-computer based hobbies?","slug":"non-computer-based-hobbies-55b5","created_at":"2019-02-12T00:57:07.006Z","main_image":null,"description":"What do you like to do that isn't on a computer?","published":true,"published_at":"2019-02-12T00:57:06.982Z","processed_html":"\u003cp\u003eI spend a \u003cem\u003elot\u003c/em\u003e of time on the computer. Like 16 hours a day sometimes. I know that isn't great for my health, but I don't have a lot to do that isn't playing games, coding, or watching Netflix. \u003c/p\u003e\n\n\u003cp\u003eAs such, I am looking for a new hobby. What kind of stuff do you like to do that doesn't involve a computer?\u003c/p\u003e\n\n","social_image":"","body_markdown":"---\r\ntitle: Non-computer based hobbies?\r\npublished: true\r\ndescription: What do you like to do that isn't on a computer?\r\ntags: discuss, health\r\n---\r\n\r\n\r\nI spend a _lot_ of time on the computer. Like 16 hours a day sometimes. I know that isn't great for my health, but I don't have a lot to do that isn't playing games, coding, or watching Netflix. \r\n\r\nAs such, I am looking for a new hobby. What kind of stuff do you like to do that doesn't involve a computer?","canonical_url":null,"show_comments":true,"main_image_background_hex_color":"#dddddd","published_from_feed":false,"comments_count":36,"video":null,"video_code":null,"video_source_url":null,"video_thumbnail_url":null,"video_closed_caption_track_url":null,"feed_source_url":null,"edited_at":null,"crossposted_at":null,"language":"en","cached_tag_list":"discuss, health","path":"/wuz/non-computer-based-hobbies-55b5","cached_user_name":"Conlin Durbin","cached_user_username":"wuz","last_comment_at":"2019-08-15T15:49:52.649Z","public_reactions_count":32},{"title":"Holy smokes, that's a paycheck","slug":"a-developers-guide-to-economic-mobility-5b75-temp-slug-9087710","created_at":"2019-02-15T14:15:51.425Z","main_image":null,"description":"\n\nIf you are like me and many other developers, getting a job in tech is a big fi...","published":false,"published_at":null,"processed_html":"\u003cp\u003eIf you are like me and many other developers, getting a job in tech is a big financial milestone. You get that first paycheck and suddenly the world is yours. You buy a round (or six) of drinks with your friends, get a new bed, and upgrade your desk chair. And then you see your bank account the next day. Oops.\u003c/p\u003e\n\n\u003cp\u003e\u003ca href=\"https://i.giphy.com/media/3ohjV4PgSCtflVFBXW/giphy.gif\" class=\"article-body-image-wrapper\"\u003e\u003cimg src=\"https://i.giphy.com/media/3ohjV4PgSCtflVFBXW/giphy.gif\" alt=\"I don't want to check my bank account gif\" loading=\"lazy\"\u003e\u003c/a\u003e\u003c/p\u003e\n\n\u003cp\u003eOk, so maybe that's not the case exactly, but if you're like me, you've got rent, a car payment, and student loans - all that can be super confusing and hard to manage. That doesn't even scratch the surface of financial management though! Soon you might have a 401k and health insurance. Plus, saving some money and shelling some into the stock market are never bad ideas.\u003c/p\u003e\n\n\u003cp\u003e\u003cem\u003eHowever do you learn to manage all that?\u003c/em\u003e\u003c/p\u003e\n\n\u003cp\u003eWell not to fear, I am going to attempt to give a quick and dirty rundown of some basic financial management. I have to note here - I am not an accountant and while I do have a degree in economics, that makes me about as qualified to give you advice as me being from Indiana does. This is advice that has worked for me and some other people on the internet - your situation might be different and you should definitely get a good finance person if you need it.\u003c/p\u003e\n\n\u003ch2\u003e\n  \u003ca name=\"step-1-get-those-bills-under-control\" href=\"#step-1-get-those-bills-under-control\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  Step 1 - Get those bills under control\n\u003c/h2\u003e\n\n\u003cblockquote\u003e\n\u003cp\u003eFor the purpose of illustration, let's come up with a fake developer \"Alex\" who makes $80,000 a year base salary with a $10,000 possible bonus. They've got $500 a month in student loans and $1400 a month in rent. These numbers are based around a standard person living in Indianapolis (what I know), they may not be illustrative of your situation, but hopefully, this work as an example! You can also check out the finished budget \u003ca href=\"https://docs.google.com/spreadsheets/d/1bOz566YYOwt0hBeXsDZTqwvMZm9RMpMFxrPON7Xr9wU/edit?usp=sharing\"\u003ehere\u003c/a\u003e Feel free to make a copy!\u003c/p\u003e\n\u003c/blockquote\u003e\n\n\u003cp\u003eSo first things first, you're gonna want to find out how much money you have coming in each month. Start a Google spreadsheet (no need for fancy software right now) and set it up like so:\u003c/p\u003e\n\n\u003cp\u003e\u003ca href=\"https://res.cloudinary.com/practicaldev/image/fetch/s--MvKciJN1--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/76a3aacmhexo1fvu7mkm.png\" class=\"article-body-image-wrapper\"\u003e\u003cimg src=\"https://res.cloudinary.com/practicaldev/image/fetch/s--MvKciJN1--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/76a3aacmhexo1fvu7mkm.png\" alt=\"\" loading=\"lazy\"\u003e\u003c/a\u003e\u003c/p\u003e\n\n\u003cp\u003eLet's start by adding the monthly income (this will depend on how you are paid - for our example Alex will get paid twice a month once on the 15th and once on the 30th).\u003c/p\u003e\n\n\u003cp\u003e\u003ca href=\"https://neuvoo.com/tax-calculator/\"\u003eHere\u003c/a\u003e is a super easy calculator to determine how much you will make after tax. Let's plug in the \"bi-weekly\" number from that calculator. We can also use a really simple Google Sheets formula to calculate the running total of how much we will have at the end of the month.\u003c/p\u003e\n\n\u003cp\u003eFor the first cell, add a Total column with the formula: \u003ccode\u003e=B2-C2\u003c/code\u003e. In the next row add this formula: \u003ccode\u003e=B3-C3+D2\u003c/code\u003e. Then drag down for the rest of the columns.\u003c/p\u003e\n\n\u003cp\u003eHere's a gif showing you what I mean:\u003c/p\u003e\n\n\u003cp\u003e\u003ca href=\"https://res.cloudinary.com/practicaldev/image/fetch/s--NnDWfBGB--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/5o8mncyfyp31dojafa06.gif\" class=\"article-body-image-wrapper\"\u003e\u003cimg src=\"https://res.cloudinary.com/practicaldev/image/fetch/s--NnDWfBGB--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/5o8mncyfyp31dojafa06.gif\" alt=\"\" loading=\"lazy\"\u003e\u003c/a\u003e\u003c/p\u003e\n\n\u003cp\u003eSweet. Now that that is done, let's add some of our bills.\u003c/p\u003e\n\n\u003cp\u003e\u003ca href=\"https://res.cloudinary.com/practicaldev/image/fetch/s--0br5lSXU--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/neqkz5qedcns1lmpl66k.png\" class=\"article-body-image-wrapper\"\u003e\u003cimg src=\"https://res.cloudinary.com/practicaldev/image/fetch/s--0br5lSXU--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/neqkz5qedcns1lmpl66k.png\" alt=\"\" loading=\"lazy\"\u003e\u003c/a\u003e\u003c/p\u003e\n\n\u003ch2\u003e\n  \u003ca name=\"step-2-save-some-money\" href=\"#step-2-save-some-money\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  Step 2 - Save some money\n\u003c/h2\u003e\n\n\u003cp\u003eA penny saved is a penny earned and you're gonna want to have some money put back in case of emergencies.\u003c/p\u003e\n\n\u003cp\u003eA good basic rule to follow is the \u003cem\u003e50/30/20 rule\u003c/em\u003e - basically, put 50% of your income to necessities (rent, food, a car payment, etc), 30% into whatever you want (computer upgrades, drinks with friends, etc), and 20% into savings. If you can't do that much, pay whatever you need to for needs and split the leftover 60/40 between wants and savings. Obviously the more you save, the better off you will be but remember to treat yourself some. Just like dieting can actually cause to gain weight, too strict of a budget can cause you to spend more money than you should. Let's add savings of 20% to Alex's budget:\u003c/p\u003e\n\n\u003ch2\u003e\n  \u003ca name=\"step-3-profit\" href=\"#step-3-profit\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  Step 3 - Profit?\n\u003c/h2\u003e\n\n\u003cp\u003eOnce you start having some money put back into savings, \u003c/p\u003e\n\n\u003ch2\u003e\n  \u003ca name=\"more-resources\" href=\"#more-resources\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  More Resources\n\u003c/h2\u003e\n\n\u003cul\u003e\n\u003cli\u003e\u003ca href=\"https://twocents.lifehacker.com\"\u003eLifehacker Two Cents\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\n","social_image":null,"body_markdown":"If you are like me and many other developers, getting a job in tech is a big financial milestone. You get that first paycheck and suddenly the world is yours. You buy a round (or six) of drinks with your friends, get a new bed, and upgrade your desk chair. And then you see your bank account the next day. Oops.\n\n![I don't want to check my bank account gif](https://media.giphy.com/media/3ohjV4PgSCtflVFBXW/giphy.gif)\n\nOk, so maybe that's not the case exactly, but if you're like me, you've got rent, a car payment, and student loans - all that can be super confusing and hard to manage. That doesn't even scratch the surface of financial management though! Soon you might have a 401k and health insurance. Plus, saving some money and shelling some into the stock market are never bad ideas.\n\n*However do you learn to manage all that?*\n\nWell not to fear, I am going to attempt to give a quick and dirty rundown of some basic financial management. I have to note here - I am not an accountant and while I do have a degree in economics, that makes me about as qualified to give you advice as me being from Indiana does. This is advice that has worked for me and some other people on the internet - your situation might be different and you should definitely get a good finance person if you need it.\n\n## Step 1 - Get those bills under control\n\n\u003e For the purpose of illustration, let's come up with a fake developer \"Alex\" who makes $80,000 a year base salary with a $10,000 possible bonus. They've got $500 a month in student loans and $1400 a month in rent. These numbers are based around a standard person living in Indianapolis (what I know), they may not be illustrative of your situation, but hopefully, this work as an example! You can also check out the finished budget [here](https://docs.google.com/spreadsheets/d/1bOz566YYOwt0hBeXsDZTqwvMZm9RMpMFxrPON7Xr9wU/edit?usp=sharing) Feel free to make a copy!\n\nSo first things first, you're gonna want to find out how much money you have coming in each month. Start a Google spreadsheet (no need for fancy software right now) and set it up like so:\n\n![](https://thepracticaldev.s3.amazonaws.com/i/76a3aacmhexo1fvu7mkm.png)\n\nLet's start by adding the monthly income (this will depend on how you are paid - for our example Alex will get paid twice a month once on the 15th and once on the 30th).\n\n[Here](https://neuvoo.com/tax-calculator/) is a super easy calculator to determine how much you will make after tax. Let's plug in the \"bi-weekly\" number from that calculator. We can also use a really simple Google Sheets formula to calculate the running total of how much we will have at the end of the month.\n\nFor the first cell, add a Total column with the formula: `=B2-C2`. In the next row add this formula: `=B3-C3+D2`. Then drag down for the rest of the columns.\n\nHere's a gif showing you what I mean:\n\n![](https://thepracticaldev.s3.amazonaws.com/i/5o8mncyfyp31dojafa06.gif)\n\nSweet. Now that that is done, let's add some of our bills.\n\n![](https://thepracticaldev.s3.amazonaws.com/i/neqkz5qedcns1lmpl66k.png)\n\n## Step 2 - Save some money\n\nA penny saved is a penny earned and you're gonna want to have some money put back in case of emergencies.\n\nA good basic rule to follow is the *50/30/20 rule* - basically, put 50% of your income to necessities (rent, food, a car payment, etc), 30% into whatever you want (computer upgrades, drinks with friends, etc), and 20% into savings. If you can't do that much, pay whatever you need to for needs and split the leftover 60/40 between wants and savings. Obviously the more you save, the better off you will be but remember to treat yourself some. Just like dieting can actually cause to gain weight, too strict of a budget can cause you to spend more money than you should. Let's add savings of 20% to Alex's budget:\n\n## Step 3 - Profit?\n\nOnce you start having some money put back into savings, \n\n## More Resources\n\n- [Lifehacker Two Cents](https://twocents.lifehacker.com)","canonical_url":null,"show_comments":true,"main_image_background_hex_color":"#dddddd","published_from_feed":false,"comments_count":0,"video":null,"video_code":null,"video_source_url":null,"video_thumbnail_url":null,"video_closed_caption_track_url":null,"feed_source_url":null,"edited_at":null,"crossposted_at":null,"language":"en","cached_tag_list":"career, life, money","path":"/wuz/a-developers-guide-to-economic-mobility-5b75-temp-slug-9087710","cached_user_name":"Conlin Durbin","cached_user_username":"wuz","last_comment_at":"2017-01-01T05:00:00.000Z","public_reactions_count":0},{"title":"Digging into Hooks with `useHistory`","slug":"digging-into-hooks-with-usehistory-898-temp-slug-6605174","created_at":"2019-02-19T20:35:48.324Z","main_image":null,"description":"\n\nhttps://codesandbox.io/s/32rqn6zq0p\n\n\n...","published":false,"published_at":null,"processed_html":"\u003cp\u003e\u003ca href=\"https://codesandbox.io/s/32rqn6zq0p\"\u003ehttps://codesandbox.io/s/32rqn6zq0p\u003c/a\u003e\u003c/p\u003e\n\n","social_image":null,"body_markdown":"https://codesandbox.io/s/32rqn6zq0p","canonical_url":null,"show_comments":true,"main_image_background_hex_color":"#dddddd","published_from_feed":false,"comments_count":0,"video":null,"video_code":null,"video_source_url":null,"video_thumbnail_url":null,"video_closed_caption_track_url":null,"feed_source_url":null,"edited_at":null,"crossposted_at":null,"language":"en","cached_tag_list":"","path":"/wuz/digging-into-hooks-with-usehistory-898-temp-slug-6605174","cached_user_name":"Conlin Durbin","cached_user_username":"wuz","last_comment_at":"2017-01-01T05:00:00.000Z","public_reactions_count":0},{"title":"Ski Lifts: Understanding React  Hooks","slug":"ski-lifts-understanding-react--hooks-3la3-temp-slug-9514640","created_at":"2019-02-20T01:17:11.767Z","main_image":null,"description":"\n\nCongratulations! You have just inherited\n\nhttps://codesandbox.io/s/pyk843zmx7\n\n...","published":false,"published_at":null,"processed_html":"\u003cp\u003eCongratulations! You have just inherited\u003c/p\u003e\n\n\u003cp\u003e\u003ca href=\"https://codesandbox.io/s/pyk843zmx7\"\u003ehttps://codesandbox.io/s/pyk843zmx7\u003c/a\u003e\u003c/p\u003e\n\n","social_image":null,"body_markdown":"Congratulations! You have just inherited\n\nhttps://codesandbox.io/s/pyk843zmx7","canonical_url":null,"show_comments":true,"main_image_background_hex_color":"#dddddd","published_from_feed":false,"comments_count":0,"video":null,"video_code":null,"video_source_url":null,"video_thumbnail_url":null,"video_closed_caption_track_url":null,"feed_source_url":null,"edited_at":null,"crossposted_at":null,"language":"en","cached_tag_list":"javascript","path":"/wuz/ski-lifts-understanding-react--hooks-3la3-temp-slug-9514640","cached_user_name":"Conlin Durbin","cached_user_username":"wuz","last_comment_at":"2017-01-01T05:00:00.000Z","public_reactions_count":0},{"title":"Dev.to Cookbook","slug":"devto-cookbook-21a4","created_at":"2019-02-27T00:26:11.184Z","main_image":"https://res.cloudinary.com/practicaldev/image/fetch/s--K68W631F--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://thepracticaldev.s3.amazonaws.com/i/tu8g8p35ttnjirbvpxzi.jpg","description":"\n\nHey cool kids! I was cooking dinner tonight and was thinking about dev.to. Ther...","published":true,"published_at":"2019-02-27T00:28:23.501Z","processed_html":"\u003cp\u003eHey cool kids! I was cooking dinner tonight and was thinking about dev.to. There are lots of cool people on here so I wanted to ask: \u003cbr\u003e\nWhat is your favorite recipe?\u003c/p\u003e\n\n\u003cp\u003eI'll compile these and post them on a new site, so make them good!\u003c/p\u003e\n\n","social_image":null,"body_markdown":"Hey cool kids! I was cooking dinner tonight and was thinking about dev.to. There are lots of cool people on here so I wanted to ask: \nWhat is your favorite recipe?\n\nI'll compile these and post them on a new site, so make them good!\n","canonical_url":null,"show_comments":true,"main_image_background_hex_color":"#dddddd","published_from_feed":false,"comments_count":6,"video":null,"video_code":null,"video_source_url":null,"video_thumbnail_url":null,"video_closed_caption_track_url":null,"feed_source_url":null,"edited_at":null,"crossposted_at":null,"language":"en","cached_tag_list":"discuss, offtopic","path":"/wuz/devto-cookbook-21a4","cached_user_name":"Conlin Durbin","cached_user_username":"wuz","last_comment_at":"2019-03-04T08:06:00.889Z","public_reactions_count":7},{"title":"I'm Conlin Durbin, and this isn't about me.","slug":"im-conlin-durbin-and-this-isnt-about-me-37cc","created_at":"2019-03-08T21:30:32.566Z","main_image":null,"description":"\n\nHey there, friends. Happy International Women's Day! This isn't about me, so he...","published":true,"published_at":"2019-03-09T02:39:29.189Z","processed_html":"\u003cp\u003eHey there, friends. Happy International Women's Day! This isn't about me, so here are some great women to follow and learn from. \u003c/p\u003e\n\n\u003cp\u003eI really hope this doesn't come across like this, but I would be remiss to not share this tweet: \u003c/p\u003e\n\n\n\u003cblockquote class=\"ltag__twitter-tweet\" data-url=\"https://twitter.com/theamycode/status/1104030149245202432\"\u003e\n      \u003cdiv class=\"ltag__twitter-tweet__media ltag__twitter-tweet__media__video-wrapper\"\u003e\n        \u003cdiv class=\"ltag__twitter-tweet__media--video-preview\"\u003e\n          \u003cimg src=\"https://res.cloudinary.com/practicaldev/image/fetch/s--N_X8YVUx--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://pbs.twimg.com/tweet_video_thumb/D1JNkPEU4AIobiZ.jpg\" alt=\"unknown tweet media content\" loading=\"lazy\"\u003e\n          \u003cimg src=\"/assets/play-butt.svg\" class=\"ltag__twitter-tweet__play-butt\" alt=\"Play butt\" loading=\"lazy\"\u003e\n        \u003c/div\u003e\n        \u003cdiv class=\"ltag__twitter-tweet__video\"\u003e\n          \u003cvideo loop controls\u003e\n            \u003csource src=\"https://video.twimg.com/tweet_video/D1JNkPEU4AIobiZ.mp4\" type=\"video/mp4\"\u003e\n          \u003c/source\u003e\u003c/video\u003e\n        \u003c/div\u003e\n      \u003c/div\u003e\n\n  \u003cdiv class=\"ltag__twitter-tweet__main\" data-url=\"https://twitter.com/theamycode/status/1104030149245202432\"\u003e\n    \u003cdiv class=\"ltag__twitter-tweet__header\"\u003e\n      \u003cimg class=\"ltag__twitter-tweet__profile-image\" src=\"https://res.cloudinary.com/practicaldev/image/fetch/s--8AVRgOET--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://pbs.twimg.com/profile_images/1059229252292202496/1A0XmN9i_normal.jpg\" alt=\"Amy Codes 🌻 profile image\" loading=\"lazy\"\u003e\n      \u003cdiv class=\"ltag__twitter-tweet__full-name\"\u003e\n        Amy Codes 🌻\n      \u003c/div\u003e\n      \u003cdiv class=\"ltag__twitter-tweet__username\"\u003e\n        @theamycode\n      \u003c/div\u003e\n      \u003cdiv class=\"ltag__twitter-tweet__twitter-logo\"\u003e\n        \u003cimg src=\"https://res.cloudinary.com/practicaldev/image/fetch/s--P4t6ys1m--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://practicaldev-herokuapp-com.freetls.fastly.net/assets/twitter-f95605061196010f91e64806688390eb1a4dbc9e913682e043eb8b1e06ca484f.svg\" alt=\"twitter logo\" loading=\"lazy\"\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"ltag__twitter-tweet__body\"\u003e\n      You know the “list of women to follow without any context” are for. Here’s what they’re actually for:\u003cbr\u003e\u003cbr\u003eMen to freely steal your clout bc you’re forced to like \u0026amp; reply. \u003cbr\u003e\u003cbr\u003eSo then your followers see the interaction. And he gets a dumb ally stamp with zero work. \n    \u003c/div\u003e\n    \u003cdiv class=\"ltag__twitter-tweet__date\"\u003e\n      14:44 PM - 08 Mar 2019\n    \u003c/div\u003e\n\n\n    \u003cdiv class=\"ltag__twitter-tweet__actions\"\u003e\n      \u003ca href=\"https://twitter.com/intent/tweet?in_reply_to=1104030149245202432\" class=\"ltag__twitter-tweet__actions__button\"\u003e\n        \u003cimg src=\"/assets/twitter-reply-action.svg\" alt=\"Twitter reply action\" loading=\"lazy\"\u003e\n      \u003c/a\u003e\n      \u003ca href=\"https://twitter.com/intent/retweet?tweet_id=1104030149245202432\" class=\"ltag__twitter-tweet__actions__button\"\u003e\n        \u003cimg src=\"/assets/twitter-retweet-action.svg\" alt=\"Twitter retweet action\" loading=\"lazy\"\u003e\n      \u003c/a\u003e\n      4\n      \u003ca href=\"https://twitter.com/intent/like?tweet_id=1104030149245202432\" class=\"ltag__twitter-tweet__actions__button\"\u003e\n        \u003cimg src=\"/assets/twitter-like-action.svg\" alt=\"Twitter like action\" loading=\"lazy\"\u003e\n      \u003c/a\u003e\n      68\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/blockquote\u003e\n\n\n\u003cp\u003eThat's not my goal at all, I am just very lucky to follow/know all of these people and others would be too! \u003c/p\u003e\n\n\u003cblockquote\u003e\n\u003cp\u003eNote: This is by no means a comprehensive list. There are many, many great women out there and I could never create a list of them all.\u003c/p\u003e\n\u003c/blockquote\u003e\n\n\u003ch2\u003e\n  \u003ca name=\"ali\" href=\"#ali\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  Ali\n\u003c/h2\u003e\n\n\n\u003cblockquote class=\"ltag__twitter-tweet\" data-url=\"https://twitter.com/aspittel/status/1104066078643286017\"\u003e\n      \u003cdiv class=\"ltag__twitter-tweet__media\"\u003e\n        \u003cimg src=\"https://res.cloudinary.com/practicaldev/image/fetch/s--z-d_Lyjj--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://pbs.twimg.com/media/D1JuH41XgAE4Xnm.jpg\" alt=\"unknown tweet media content\" loading=\"lazy\"\u003e\n      \u003c/div\u003e\n\n  \u003cdiv class=\"ltag__twitter-tweet__main\" data-url=\"https://twitter.com/aspittel/status/1104066078643286017\"\u003e\n    \u003cdiv class=\"ltag__twitter-tweet__header\"\u003e\n      \u003cimg class=\"ltag__twitter-tweet__profile-image\" src=\"https://res.cloudinary.com/practicaldev/image/fetch/s--XxP8HND1--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://pbs.twimg.com/profile_images/1100012675537559553/TWraOTYF_normal.png\" alt=\"Ali Spittel 💁 profile image\" loading=\"lazy\"\u003e\n      \u003cdiv class=\"ltag__twitter-tweet__full-name\"\u003e\n        Ali Spittel 💁\n      \u003c/div\u003e\n      \u003cdiv class=\"ltag__twitter-tweet__username\"\u003e\n        \u003ca class=\"comment-mentioned-user\" href=\"https://dev.to/aspittel\"\u003e@aspittel\u003c/a\u003e\n\n      \u003c/div\u003e\n      \u003cdiv class=\"ltag__twitter-tweet__twitter-logo\"\u003e\n        \u003cimg src=\"https://res.cloudinary.com/practicaldev/image/fetch/s--P4t6ys1m--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://practicaldev-herokuapp-com.freetls.fastly.net/assets/twitter-f95605061196010f91e64806688390eb1a4dbc9e913682e043eb8b1e06ca484f.svg\" alt=\"twitter logo\" loading=\"lazy\"\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"ltag__twitter-tweet__body\"\u003e\n      This morning, I shared some of the messages I've gotten from men in the past few months for \u003ca href=\"https://twitter.com/hashtag/IWD2019\"\u003e#IWD2019\u003c/a\u003e and \u003ca href=\"https://twitter.com/hashtag/SheCoded\"\u003e#SheCoded\u003c/a\u003e.\u003cbr\u003e\u003cbr\u003eBut -- remember -- this isn't just my story. And this isn't just happening online. It's happening at work, tech events, the street.\u003cbr\u003e\u003cbr\u003e\u003ca href=\"https://t.co/F7essWXe5Y\"\u003edev.to/aspittel/never…\u003c/a\u003e \n    \u003c/div\u003e\n    \u003cdiv class=\"ltag__twitter-tweet__date\"\u003e\n      17:07 PM - 08 Mar 2019\n    \u003c/div\u003e\n\n\n    \u003cdiv class=\"ltag__twitter-tweet__actions\"\u003e\n      \u003ca href=\"https://twitter.com/intent/tweet?in_reply_to=1104066078643286017\" class=\"ltag__twitter-tweet__actions__button\"\u003e\n        \u003cimg src=\"/assets/twitter-reply-action.svg\" alt=\"Twitter reply action\" loading=\"lazy\"\u003e\n      \u003c/a\u003e\n      \u003ca href=\"https://twitter.com/intent/retweet?tweet_id=1104066078643286017\" class=\"ltag__twitter-tweet__actions__button\"\u003e\n        \u003cimg src=\"/assets/twitter-retweet-action.svg\" alt=\"Twitter retweet action\" loading=\"lazy\"\u003e\n      \u003c/a\u003e\n      75\n      \u003ca href=\"https://twitter.com/intent/like?tweet_id=1104066078643286017\" class=\"ltag__twitter-tweet__actions__button\"\u003e\n        \u003cimg src=\"/assets/twitter-like-action.svg\" alt=\"Twitter like action\" loading=\"lazy\"\u003e\n      \u003c/a\u003e\n      164\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/blockquote\u003e\n\n\n\u003cp\u003eHonestly, if you are on here, you probably know who she is. She has great content and great insight.\u003c/p\u003e\n\n\u003ch2\u003e\n  \u003ca name=\"emma\" href=\"#emma\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  Emma\n\u003c/h2\u003e\n\n\n\u003cblockquote class=\"ltag__twitter-tweet\" data-url=\"https://twitter.com/emmawedekind/status/1104018657187893249\"\u003e\n\n  \u003cdiv class=\"ltag__twitter-tweet__main\" data-url=\"https://twitter.com/emmawedekind/status/1104018657187893249\"\u003e\n    \u003cdiv class=\"ltag__twitter-tweet__header\"\u003e\n      \u003cimg class=\"ltag__twitter-tweet__profile-image\" src=\"https://res.cloudinary.com/practicaldev/image/fetch/s---evpsBhL--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://pbs.twimg.com/profile_images/1100345482147176448/mIOWZK8h_normal.jpg\" alt=\"Emma Wedekind ✨ profile image\" loading=\"lazy\"\u003e\n      \u003cdiv class=\"ltag__twitter-tweet__full-name\"\u003e\n        Emma Wedekind ✨\n      \u003c/div\u003e\n      \u003cdiv class=\"ltag__twitter-tweet__username\"\u003e\n        @emmawedekind\n      \u003c/div\u003e\n      \u003cdiv class=\"ltag__twitter-tweet__twitter-logo\"\u003e\n        \u003cimg src=\"https://res.cloudinary.com/practicaldev/image/fetch/s--P4t6ys1m--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://practicaldev-herokuapp-com.freetls.fastly.net/assets/twitter-f95605061196010f91e64806688390eb1a4dbc9e913682e043eb8b1e06ca484f.svg\" alt=\"twitter logo\" loading=\"lazy\"\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"ltag__twitter-tweet__body\"\u003e\n      Full transparency: I’m struggling with motivation to blog, code, etc. so I’ve decided to listen to myself and take the rest of my trip in Florida to disconnect from tech, although this is really hard for me, it’s important to recognize your mental state and listen to yourself 💕\n    \u003c/div\u003e\n    \u003cdiv class=\"ltag__twitter-tweet__date\"\u003e\n      13:58 PM - 08 Mar 2019\n    \u003c/div\u003e\n\n\n    \u003cdiv class=\"ltag__twitter-tweet__actions\"\u003e\n      \u003ca href=\"https://twitter.com/intent/tweet?in_reply_to=1104018657187893249\" class=\"ltag__twitter-tweet__actions__button\"\u003e\n        \u003cimg src=\"/assets/twitter-reply-action.svg\" alt=\"Twitter reply action\" loading=\"lazy\"\u003e\n      \u003c/a\u003e\n      \u003ca href=\"https://twitter.com/intent/retweet?tweet_id=1104018657187893249\" class=\"ltag__twitter-tweet__actions__button\"\u003e\n        \u003cimg src=\"/assets/twitter-retweet-action.svg\" alt=\"Twitter retweet action\" loading=\"lazy\"\u003e\n      \u003c/a\u003e\n      10\n      \u003ca href=\"https://twitter.com/intent/like?tweet_id=1104018657187893249\" class=\"ltag__twitter-tweet__actions__button\"\u003e\n        \u003cimg src=\"/assets/twitter-like-action.svg\" alt=\"Twitter like action\" loading=\"lazy\"\u003e\n      \u003c/a\u003e\n      549\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/blockquote\u003e\n\n\n\u003cp\u003eEmma also writes great content on dev.to and I've learned a lot from reading her posts! \u003c/p\u003e\n\n\u003ch2\u003e\n  \u003ca name=\"casey\" href=\"#casey\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  Casey\n\u003c/h2\u003e\n\n\u003cp\u003e\u003ca href=\"https://twitter.com/case_eee\"\u003eTwitter\u003c/a\u003e\u003c/p\u003e\n\n\u003cp\u003eFull disclosure, Casey is my manager at work. She doesn't post much but her retweets are great! I've learned so much from working with her!\u003c/p\u003e\n\n\u003ch2\u003e\n  \u003ca name=\"caryssa\" href=\"#caryssa\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  Caryssa\n\u003c/h2\u003e\n\n\u003cp\u003e\u003ca href=\"https://caryssaperez.com/posts/2019-02-27-faradays-law-of-induction\"\u003eA post from Caryssa's blog\u003c/a\u003e\u003c/p\u003e\n\n\u003cp\u003eI also work with Caryssa and her posts on Maxwell's equations leave my head spinning! She's an incredible engineer and you should definitely be following her blog!\u003c/p\u003e\n\n\u003ch2\u003e\n  \u003ca name=\"cassidy\" href=\"#cassidy\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  Cassidy\n\u003c/h2\u003e\n\n\n\u003cblockquote class=\"ltag__twitter-tweet\" data-url=\"https://twitter.com/cassidoo/status/1103811427997933573\"\u003e\n\n  \u003cdiv class=\"ltag__twitter-tweet__main\" data-url=\"https://twitter.com/cassidoo/status/1103811427997933573\"\u003e\n    \u003cdiv class=\"ltag__twitter-tweet__header\"\u003e\n      \u003cimg class=\"ltag__twitter-tweet__profile-image\" src=\"https://res.cloudinary.com/practicaldev/image/fetch/s--xEfHh4-p--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://pbs.twimg.com/profile_images/718548236580098048/OgV0pPQY_normal.jpg\" alt=\"Cassidy Williams profile image\" loading=\"lazy\"\u003e\n      \u003cdiv class=\"ltag__twitter-tweet__full-name\"\u003e\n        Cassidy Williams\n      \u003c/div\u003e\n      \u003cdiv class=\"ltag__twitter-tweet__username\"\u003e\n        \u003ca class=\"comment-mentioned-user\" href=\"https://dev.to/cassidoo\"\u003e@cassidoo\u003c/a\u003e\n\n      \u003c/div\u003e\n      \u003cdiv class=\"ltag__twitter-tweet__twitter-logo\"\u003e\n        \u003cimg src=\"https://res.cloudinary.com/practicaldev/image/fetch/s--P4t6ys1m--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://practicaldev-herokuapp-com.freetls.fastly.net/assets/twitter-f95605061196010f91e64806688390eb1a4dbc9e913682e043eb8b1e06ca484f.svg\" alt=\"twitter logo\" loading=\"lazy\"\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"ltag__twitter-tweet__body\"\u003e\n      We just released something super exciting on \u003ca href=\"https://twitter.com/CodePen\"\u003e@CodePen\u003c/a\u003e: Babel 7! Add it as a preprocessor to your Pen and you can use the latest JS proposed features, like optional chaining, do expressions, logical assignment ops, and, in this example, pipeline operators!\u003cbr\u003e\u003ca href=\"https://t.co/AAKIuSAivZ\"\u003ecodepen.io/cassidoo/pen/O…\u003c/a\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"ltag__twitter-tweet__date\"\u003e\n      00:15 AM - 08 Mar 2019\n    \u003c/div\u003e\n\n\n    \u003cdiv class=\"ltag__twitter-tweet__actions\"\u003e\n      \u003ca href=\"https://twitter.com/intent/tweet?in_reply_to=1103811427997933573\" class=\"ltag__twitter-tweet__actions__button\"\u003e\n        \u003cimg src=\"/assets/twitter-reply-action.svg\" alt=\"Twitter reply action\" loading=\"lazy\"\u003e\n      \u003c/a\u003e\n      \u003ca href=\"https://twitter.com/intent/retweet?tweet_id=1103811427997933573\" class=\"ltag__twitter-tweet__actions__button\"\u003e\n        \u003cimg src=\"/assets/twitter-retweet-action.svg\" alt=\"Twitter retweet action\" loading=\"lazy\"\u003e\n      \u003c/a\u003e\n      12\n      \u003ca href=\"https://twitter.com/intent/like?tweet_id=1103811427997933573\" class=\"ltag__twitter-tweet__actions__button\"\u003e\n        \u003cimg src=\"/assets/twitter-like-action.svg\" alt=\"Twitter like action\" loading=\"lazy\"\u003e\n      \u003c/a\u003e\n      41\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/blockquote\u003e\n\n\n\u003cp\u003eCassidy is an engineer at CodePen, which is super cool. \u003ca href=\"https://tinyletter.com/cassidoo\"\u003eHer newsletter\u003c/a\u003e is absolutely fantastic!\u003c/p\u003e\n\n\u003ch2\u003e\n  \u003ca name=\"mayuko\" href=\"#mayuko\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  Mayuko\n\u003c/h2\u003e\n\n\n\u003cblockquote class=\"ltag__twitter-tweet\" data-url=\"https://twitter.com/hellomayuko/status/1104038419884236800\"\u003e\n      \u003cdiv class=\"ltag__twitter-tweet__media\"\u003e\n        \u003cimg src=\"https://res.cloudinary.com/practicaldev/image/fetch/s--7hbzc-XT--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://pbs.twimg.com/media/D1JVFy1UYAAE3me.jpg\" alt=\"unknown tweet media content\" loading=\"lazy\"\u003e\n      \u003c/div\u003e\n\n  \u003cdiv class=\"ltag__twitter-tweet__main\" data-url=\"https://twitter.com/hellomayuko/status/1104038419884236800\"\u003e\n    \u003cdiv class=\"ltag__twitter-tweet__header\"\u003e\n      \u003cimg class=\"ltag__twitter-tweet__profile-image\" src=\"https://res.cloudinary.com/practicaldev/image/fetch/s--OOb0Dxmg--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://pbs.twimg.com/profile_images/785642595233914880/aV9p3BwK_normal.jpg\" alt=\"mayuko profile image\" loading=\"lazy\"\u003e\n      \u003cdiv class=\"ltag__twitter-tweet__full-name\"\u003e\n        mayuko\n      \u003c/div\u003e\n      \u003cdiv class=\"ltag__twitter-tweet__username\"\u003e\n        @hellomayuko\n      \u003c/div\u003e\n      \u003cdiv class=\"ltag__twitter-tweet__twitter-logo\"\u003e\n        \u003cimg src=\"https://res.cloudinary.com/practicaldev/image/fetch/s--P4t6ys1m--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://practicaldev-herokuapp-com.freetls.fastly.net/assets/twitter-f95605061196010f91e64806688390eb1a4dbc9e913682e043eb8b1e06ca484f.svg\" alt=\"twitter logo\" loading=\"lazy\"\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"ltag__twitter-tweet__body\"\u003e\n      For \u003ca href=\"https://twitter.com/hashtag/InternationalWomensDay\"\u003e#InternationalWomensDay\u003c/a\u003e, I partnered with an amazing organization called \u003ca href=\"https://twitter.com/builtbygirls\"\u003e@builtbygirls\u003c/a\u003e to create some extra content for their campaign for \u003ca href=\"https://twitter.com/hashtag/IWD19\"\u003e#IWD19\u003c/a\u003e. I asked tech experts and students their opinions on the tech industry: \u003ca href=\"https://t.co/2GupaPPTL1\"\u003eyoutu.be/kBJHSizQLsE\u003c/a\u003e \n    \u003c/div\u003e\n    \u003cdiv class=\"ltag__twitter-tweet__date\"\u003e\n      15:17 PM - 08 Mar 2019\n    \u003c/div\u003e\n\n\n    \u003cdiv class=\"ltag__twitter-tweet__actions\"\u003e\n      \u003ca href=\"https://twitter.com/intent/tweet?in_reply_to=1104038419884236800\" class=\"ltag__twitter-tweet__actions__button\"\u003e\n        \u003cimg src=\"/assets/twitter-reply-action.svg\" alt=\"Twitter reply action\" loading=\"lazy\"\u003e\n      \u003c/a\u003e\n      \u003ca href=\"https://twitter.com/intent/retweet?tweet_id=1104038419884236800\" class=\"ltag__twitter-tweet__actions__button\"\u003e\n        \u003cimg src=\"/assets/twitter-retweet-action.svg\" alt=\"Twitter retweet action\" loading=\"lazy\"\u003e\n      \u003c/a\u003e\n      5\n      \u003ca href=\"https://twitter.com/intent/like?tweet_id=1104038419884236800\" class=\"ltag__twitter-tweet__actions__button\"\u003e\n        \u003cimg src=\"/assets/twitter-like-action.svg\" alt=\"Twitter like action\" loading=\"lazy\"\u003e\n      \u003c/a\u003e\n      18\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/blockquote\u003e\n\n\n\u003cp\u003eMayuko is one of my favorite Youtubers! Her content is so inspiring and her editing style is wonderful. I highly recommend \u003ca href=\"https://www.youtube.com/watch?v=lncbay-6HYU\u0026amp;t=441s\"\u003ethis video\u003c/a\u003e - it has a great tone and the message is wonderful!\u003c/p\u003e\n\n\u003ch2\u003e\n  \u003ca name=\"taelur\" href=\"#taelur\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  Tae'lur\n\u003c/h2\u003e\n\n\n\u003cblockquote class=\"ltag__twitter-tweet\" data-url=\"https://twitter.com/taeluralexis/status/1104013472961044482\"\u003e\n      \u003cdiv class=\"ltag__twitter-tweet__media\"\u003e\n        \u003cimg src=\"https://res.cloudinary.com/practicaldev/image/fetch/s--4OvQjR2S--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://pbs.twimg.com/media/D1I-X0OWwAAyCOZ.jpg\" alt=\"unknown tweet media content\" loading=\"lazy\"\u003e\n      \u003c/div\u003e\n\n  \u003cdiv class=\"ltag__twitter-tweet__main\" data-url=\"https://twitter.com/taeluralexis/status/1104013472961044482\"\u003e\n    \u003cdiv class=\"ltag__twitter-tweet__header\"\u003e\n      \u003cimg class=\"ltag__twitter-tweet__profile-image\" src=\"https://res.cloudinary.com/practicaldev/image/fetch/s--lk7TvETE--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://pbs.twimg.com/profile_images/1103878878295056386/tmyNRUo8_normal.jpg\" alt=\"Tae'lur Alexis ⚛️🦄 profile image\" loading=\"lazy\"\u003e\n      \u003cdiv class=\"ltag__twitter-tweet__full-name\"\u003e\n        Tae'lur Alexis ⚛️🦄\n      \u003c/div\u003e\n      \u003cdiv class=\"ltag__twitter-tweet__username\"\u003e\n        \u003ca class=\"comment-mentioned-user\" href=\"https://dev.to/taeluralexis\"\u003e@taeluralexis\u003c/a\u003e\n\n      \u003c/div\u003e\n      \u003cdiv class=\"ltag__twitter-tweet__twitter-logo\"\u003e\n        \u003cimg src=\"https://res.cloudinary.com/practicaldev/image/fetch/s--P4t6ys1m--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://practicaldev-herokuapp-com.freetls.fastly.net/assets/twitter-f95605061196010f91e64806688390eb1a4dbc9e913682e043eb8b1e06ca484f.svg\" alt=\"twitter logo\" loading=\"lazy\"\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"ltag__twitter-tweet__body\"\u003e\n      Happy International Women's Day ♡\u003cbr\u003e\u003cbr\u003eI published my very first blog post, \"Nevertheless, Tae'lur Alexis Coded\", reflections on my journey into tech \u0026amp;\u0026amp; goals for our community\u003cbr\u003e\u003cbr\u003eTLDR; Embrace failure, share knowledge \u0026amp; never let anyone define you \u003ca href=\"https://twitter.com/hashtag/iwd2019\"\u003e#iwd2019\u003c/a\u003e \u003cbr\u003e\u003cbr\u003e\u003ca href=\"https://t.co/j3nOOmg1XJ\"\u003edev.to/taeluralexis/n…\u003c/a\u003e \n    \u003c/div\u003e\n    \u003cdiv class=\"ltag__twitter-tweet__date\"\u003e\n      13:38 PM - 08 Mar 2019\n    \u003c/div\u003e\n\n\n    \u003cdiv class=\"ltag__twitter-tweet__actions\"\u003e\n      \u003ca href=\"https://twitter.com/intent/tweet?in_reply_to=1104013472961044482\" class=\"ltag__twitter-tweet__actions__button\"\u003e\n        \u003cimg src=\"/assets/twitter-reply-action.svg\" alt=\"Twitter reply action\" loading=\"lazy\"\u003e\n      \u003c/a\u003e\n      \u003ca href=\"https://twitter.com/intent/retweet?tweet_id=1104013472961044482\" class=\"ltag__twitter-tweet__actions__button\"\u003e\n        \u003cimg src=\"/assets/twitter-retweet-action.svg\" alt=\"Twitter retweet action\" loading=\"lazy\"\u003e\n      \u003c/a\u003e\n      34\n      \u003ca href=\"https://twitter.com/intent/like?tweet_id=1104013472961044482\" class=\"ltag__twitter-tweet__actions__button\"\u003e\n        \u003cimg src=\"/assets/twitter-like-action.svg\" alt=\"Twitter like action\" loading=\"lazy\"\u003e\n      \u003c/a\u003e\n      175\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/blockquote\u003e\n\n\n\u003cp\u003eTae'lur's journey into tech is incredibly inspiring and she just started blogging on dev.to! \u003c/p\u003e\n\n\u003ch2\u003e\n  \u003ca name=\"kim\" href=\"#kim\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  Kim\n\u003c/h2\u003e\n\n\n\u003cblockquote class=\"ltag__twitter-tweet\" data-url=\"https://twitter.com/lipstickandtech/status/1104109535768252416\"\u003e\n\n  \u003cdiv class=\"ltag__twitter-tweet__main\" data-url=\"https://twitter.com/lipstickandtech/status/1104109535768252416\"\u003e\n    \u003cdiv class=\"ltag__twitter-tweet__header\"\u003e\n      \u003cimg class=\"ltag__twitter-tweet__profile-image\" src=\"https://res.cloudinary.com/practicaldev/image/fetch/s--5vSu8DC6--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://pbs.twimg.com/profile_images/1039029100051030016/4rrc_k7t_normal.jpg\" alt=\"Kim, Lipstick and Tech ☁️ profile image\" loading=\"lazy\"\u003e\n      \u003cdiv class=\"ltag__twitter-tweet__full-name\"\u003e\n        Kim, Lipstick and Tech ☁️\n      \u003c/div\u003e\n      \u003cdiv class=\"ltag__twitter-tweet__username\"\u003e\n        @lipstickandtech\n      \u003c/div\u003e\n      \u003cdiv class=\"ltag__twitter-tweet__twitter-logo\"\u003e\n        \u003cimg src=\"https://res.cloudinary.com/practicaldev/image/fetch/s--P4t6ys1m--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://practicaldev-herokuapp-com.freetls.fastly.net/assets/twitter-f95605061196010f91e64806688390eb1a4dbc9e913682e043eb8b1e06ca484f.svg\" alt=\"twitter logo\" loading=\"lazy\"\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"ltag__twitter-tweet__body\"\u003e\n      Are You Losing Your Mind Due To Burnout? \u003ca href=\"https://t.co/VjbxYXjZ6L\"\u003erviv.ly/FDvZ4V\u003c/a\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"ltag__twitter-tweet__date\"\u003e\n      20:00 PM - 08 Mar 2019\n    \u003c/div\u003e\n\n\n    \u003cdiv class=\"ltag__twitter-tweet__actions\"\u003e\n      \u003ca href=\"https://twitter.com/intent/tweet?in_reply_to=1104109535768252416\" class=\"ltag__twitter-tweet__actions__button\"\u003e\n        \u003cimg src=\"/assets/twitter-reply-action.svg\" alt=\"Twitter reply action\" loading=\"lazy\"\u003e\n      \u003c/a\u003e\n      \u003ca href=\"https://twitter.com/intent/retweet?tweet_id=1104109535768252416\" class=\"ltag__twitter-tweet__actions__button\"\u003e\n        \u003cimg src=\"/assets/twitter-retweet-action.svg\" alt=\"Twitter retweet action\" loading=\"lazy\"\u003e\n      \u003c/a\u003e\n      0\n      \u003ca href=\"https://twitter.com/intent/like?tweet_id=1104109535768252416\" class=\"ltag__twitter-tweet__actions__button\"\u003e\n        \u003cimg src=\"/assets/twitter-like-action.svg\" alt=\"Twitter like action\" loading=\"lazy\"\u003e\n      \u003c/a\u003e\n      0\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/blockquote\u003e\n\n\n\u003cp\u003eI went to college with Kim! I love following her twitter and blog. She posts great content - a lot of which has a focus on women in tech!\u003c/p\u003e\n\n\u003ch2\u003e\n  \u003ca name=\"my-advice-for-fellow-allies-is\" href=\"#my-advice-for-fellow-allies-is\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  My advice for fellow allies is...\n\u003c/h2\u003e\n\n\u003col\u003e\n\u003cli\u003eListen to women. It's literally the easiest thing to do.\u003c/li\u003e\n\u003cli\u003eBelieve women. I know you might not understand their situation, but I guarantee they aren't lying.\u003c/li\u003e\n\u003cli\u003eSupport women. Recommend them for speaking gigs, promotions, literally anything you would recommend a man for.\u003c/li\u003e\n\u003cli\u003eList your pronouns. This helps all sorts of people, but it normalizes the idea of personal pronouns, which is super important.\u003c/li\u003e\n\u003c/ol\u003e\n\n","social_image":"","body_markdown":"Hey there, friends. Happy International Women's Day! This isn't about me, so here are some great women to follow and learn from. \n\nI really hope this doesn't come across like this, but I would be remiss to not share this tweet: \n\n{% tweet 1104030149245202432 %}\n\nThat's not my goal at all, I am just very lucky to follow/know all of these people and others would be too! \n\n\n\u003e Note: This is by no means a comprehensive list. There are many, many great women out there and I could never create a list of them all.\n\n## Ali\n{% tweet 1104066078643286017 %}\n\nHonestly, if you are on here, you probably know who she is. She has great content and great insight.\n\n## Emma\n{% tweet 1104018657187893249 %}\n\nEmma also writes great content on dev.to and I've learned a lot from reading her posts! \n\n## Casey\n\n[Twitter](https://twitter.com/case_eee)\n\nFull disclosure, Casey is my manager at work. She doesn't post much but her retweets are great! I've learned so much from working with her!\n\n## Caryssa\n\n[A post from Caryssa's blog](https://caryssaperez.com/posts/2019-02-27-faradays-law-of-induction)\n\nI also work with Caryssa and her posts on Maxwell's equations leave my head spinning! She's an incredible engineer and you should definitely be following her blog!\n\n## Cassidy\n\n{% tweet 1103811427997933573 %}\n\nCassidy is an engineer at CodePen, which is super cool. [Her newsletter](https://tinyletter.com/cassidoo) is absolutely fantastic!\n\n## Mayuko\n\n{% tweet 1104038419884236800 %}\n\nMayuko is one of my favorite Youtubers! Her content is so inspiring and her editing style is wonderful. I highly recommend [this video](https://www.youtube.com/watch?v=lncbay-6HYU\u0026t=441s) - it has a great tone and the message is wonderful!\n\n## Tae'lur\n\n{% tweet 1104013472961044482 %}\n\nTae'lur's journey into tech is incredibly inspiring and she just started blogging on dev.to! \n\n## Kim\n\n{% tweet 1104109535768252416 %}\n\nI went to college with Kim! I love following her twitter and blog. She posts great content - a lot of which has a focus on women in tech!\n\n\n## My advice for fellow allies is...\n1. Listen to women. It's literally the easiest thing to do.\n2. Believe women. I know you might not understand their situation, but I guarantee they aren't lying.\n3. Support women. Recommend them for speaking gigs, promotions, literally anything you would recommend a man for.\n4. List your pronouns. This helps all sorts of people, but it normalizes the idea of personal pronouns, which is super important.","canonical_url":null,"show_comments":true,"main_image_background_hex_color":"#dddddd","published_from_feed":false,"comments_count":0,"video":null,"video_code":null,"video_source_url":null,"video_thumbnail_url":null,"video_closed_caption_track_url":null,"feed_source_url":null,"edited_at":null,"crossposted_at":null,"language":"en","cached_tag_list":"shecodedally","path":"/wuz/im-conlin-durbin-and-this-isnt-about-me-37cc","cached_user_name":"Conlin Durbin","cached_user_username":"wuz","last_comment_at":"2019-03-09T02:39:29.189Z","public_reactions_count":7},{"title":"How to take a vacation","slug":"how-to-take-a-vacation-5gn1-temp-slug-1696014","created_at":"2019-03-18T02:41:41.560Z","main_image":null,"description":"\n\nHey all! I just got back from a vacation to Nashville, TN. It's the first one I...","published":false,"published_at":null,"processed_html":"\u003cp\u003eHey all! I just got back from a vacation to Nashville, TN. It's the first one I've taken in a while and I had some thoughts on disconnecting from work and everything else while getting the most out of a trip (or stay-cation!) I am not great at stepping away, but it was quite nice.\u003c/p\u003e\n\n\u003ch1\u003e\n  \u003ca name=\"step-one-get-things-ready-to-go\" href=\"#step-one-get-things-ready-to-go\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  Step One - Get things ready to go\n\u003c/h1\u003e\n\n\u003cp\u003eThe key to having a good vacation that doesn't have work-creep is leaving things in a good place. I'm lucky enough to have a great team that helped take over some of my work on my days away, but even if you don't there are a few things you can do to make it a bit smoother. First and foremost, make sure you push your changes in Git. That way you can \u003cem\u003eshow\u003c/em\u003e your team the status of what you have been working on. Leave a few comments on the PR and drop a line in Slack about where you are pausing on progress. Then, message your teammates to determine steps forward - can they pick up the feature where you left off or does the timeline need to change to accommodate for your departure? If someone is going to be picking it up, make sure you leave the PR in a good place - document what next steps you are thinking about taking, leave some notes as to the general quality of the code you have already written. If there are any big considerations that still need to be made, leave some notes on what you are thinking and why. Give them some alternatives to consider. \u003c/p\u003e\n\n","social_image":null,"body_markdown":"Hey all! I just got back from a vacation to Nashville, TN. It's the first one I've taken in a while and I had some thoughts on disconnecting from work and everything else while getting the most out of a trip (or stay-cation!) I am not great at stepping away, but it was quite nice.\n\n# Step One - Get things ready to go\n\nThe key to having a good vacation that doesn't have work-creep is leaving things in a good place. I'm lucky enough to have a great team that helped take over some of my work on my days away, but even if you don't there are a few things you can do to make it a bit smoother. First and foremost, make sure you push your changes in Git. That way you can _show_ your team the status of what you have been working on. Leave a few comments on the PR and drop a line in Slack about where you are pausing on progress. Then, message your teammates to determine steps forward - can they pick up the feature where you left off or does the timeline need to change to accommodate for your departure? If someone is going to be picking it up, make sure you leave the PR in a good place - document what next steps you are thinking about taking, leave some notes as to the general quality of the code you have already written. If there are any big considerations that still need to be made, leave some notes on what you are thinking and why. Give them some alternatives to consider. ","canonical_url":null,"show_comments":true,"main_image_background_hex_color":"#dddddd","published_from_feed":false,"comments_count":0,"video":null,"video_code":null,"video_source_url":null,"video_thumbnail_url":null,"video_closed_caption_track_url":null,"feed_source_url":null,"edited_at":null,"crossposted_at":null,"language":"en","cached_tag_list":"career","path":"/wuz/how-to-take-a-vacation-5gn1-temp-slug-1696014","cached_user_name":"Conlin Durbin","cached_user_username":"wuz","last_comment_at":"2017-01-01T05:00:00.000Z","public_reactions_count":0},{"title":"Announcing stdio - A community for human engineers","slug":"announcing-stdio---a-community-for-human-engineers-4np2","created_at":"2019-03-18T02:42:45.932Z","main_image":"https://res.cloudinary.com/practicaldev/image/fetch/s--deJFwAsv--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://thepracticaldev.s3.amazonaws.com/i/qiqh0dgkxh1x8ioluvwp.png","description":"\n\nHey friends! It's been a little over a week since I've posted and I feel like I...","published":true,"published_at":"2019-03-23T02:20:04.270Z","processed_html":"\u003cp\u003eHey friends! It's been a little over a week since I've posted and I feel like I am loosing some of my drive. To get it kickstarted back up, I'd love to announce a new side project I am working on! So without further ado, check out \u003cstrong\u003estdio\u003c/strong\u003e.\u003c/p\u003e\n\n\u003ch1\u003e\n  \u003ca name=\"what-is-it\" href=\"#what-is-it\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  What is it?\n\u003c/h1\u003e\n\n\u003cp\u003e\u003ca href=\"https://stdio.app\"\u003estdio\u003c/a\u003e (standard io) is a community/name under which a few projects are being released, all centered around helping everyone become more human engineers. \u003c/p\u003e\n\n\u003cp\u003eThe first project is up - it's a discord server for engineers of all skill levels to come hang out, get help with programming problems, connect with other engineers and learn new things. We'll be having weekly community nights every Tuesday at 6:15PM PST (subject to change by popular demand) where we will just hang out, discuss engineering things, and (hopefully) have some special guests!\u003c/p\u003e\n\n\u003cp\u003eMore projects are in the works, but I really want this to be a collaborative, community-driven group. I have lots of ideas where this could go, but I want to know what the community wants!\u003c/p\u003e\n\n\u003cp\u003eCome join us in Discord, accept the Code of Conduct and join us \u003cem\u003ethis\u003c/em\u003e Tuesday at 6:15PM EST! We'll be hanging out, chatting, and getting to know everyone!\u003c/p\u003e\n\n","social_image":null,"body_markdown":"Hey friends! It's been a little over a week since I've posted and I feel like I am loosing some of my drive. To get it kickstarted back up, I'd love to announce a new side project I am working on! So without further ado, check out **stdio**.\n\n# What is it?\n\n[stdio](https://stdio.app) (standard io) is a community/name under which a few projects are being released, all centered around helping everyone become more human engineers. \n\nThe first project is up - it's a discord server for engineers of all skill levels to come hang out, get help with programming problems, connect with other engineers and learn new things. We'll be having weekly community nights every Tuesday at 6:15PM PST (subject to change by popular demand) where we will just hang out, discuss engineering things, and (hopefully) have some special guests!\n\nMore projects are in the works, but I really want this to be a collaborative, community-driven group. I have lots of ideas where this could go, but I want to know what the community wants!\n\nCome join us in Discord, accept the Code of Conduct and join us _this_ Tuesday at 6:15PM EST! We'll be hanging out, chatting, and getting to know everyone!\n","canonical_url":null,"show_comments":true,"main_image_background_hex_color":"#dddddd","published_from_feed":false,"comments_count":0,"video":null,"video_code":null,"video_source_url":null,"video_thumbnail_url":null,"video_closed_caption_track_url":null,"feed_source_url":null,"edited_at":null,"crossposted_at":null,"language":"en","cached_tag_list":"discuss","path":"/wuz/announcing-stdio---a-community-for-human-engineers-4np2","cached_user_name":"Conlin Durbin","cached_user_username":"wuz","last_comment_at":"2019-03-23T02:20:04.270Z","public_reactions_count":8},{"title":"I'm a software engineer that doesn't live on the coast, Ask Me Anything!","slug":"i-m-software-engineer-that-doesn-t-live-on-the-coast-ask-me-anything-n06","created_at":"2019-04-03T02:14:31.163Z","main_image":null,"description":"\n\nHey friends! I am Conlin, a software engineer that lives in Indianapolis. I thi...","published":true,"published_at":"2019-04-03T18:35:02.101Z","processed_html":"\u003cp\u003eHey friends! I am Conlin, a software engineer that lives in Indianapolis. I think I've got a good perspective on tech outside of the Valley and away from the coasts.\u003c/p\u003e\n\n\u003cp\u003eI've been a developer for a while, depending on how you count. I got paid to write code for the first time almost 10 years ago. I studied Economics in college with a minor in Computer Science and (almost) one in Sociology.\u003c/p\u003e\n\n\u003cp\u003eI've worked lots of different kinds of jobs, from consulting to a small dev team, to now working at a rather large \"scale-up\" company.\u003c/p\u003e\n\n\u003cp\u003eLet's do this!\u003c/p\u003e\n\n\u003cp\u003e\u003ca href=\"https://res.cloudinary.com/practicaldev/image/fetch/s--XAiTzhNK--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://wuz.fyi/gifs/cigar-jeff.gif\" class=\"article-body-image-wrapper\"\u003e\u003cimg src=\"https://res.cloudinary.com/practicaldev/image/fetch/s--XAiTzhNK--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://wuz.fyi/gifs/cigar-jeff.gif\" alt=\"\" loading=\"lazy\"\u003e\u003c/a\u003e\u003c/p\u003e\n\n","social_image":null,"body_markdown":"Hey friends! I am Conlin, a software engineer that lives in Indianapolis. I think I've got a good perspective on tech outside of the Valley and away from the coasts.\n\nI've been a developer for a while, depending on how you count. I got paid to write code for the first time almost 10 years ago. I studied Economics in college with a minor in Computer Science and (almost) one in Sociology.\n\nI've worked lots of different kinds of jobs, from consulting to a small dev team, to now working at a rather large \"scale-up\" company.\n\nLet's do this!\n\n![](https://wuz.fyi/gifs/cigar-jeff.gif)","canonical_url":null,"show_comments":true,"main_image_background_hex_color":"#dddddd","published_from_feed":false,"comments_count":16,"video":null,"video_code":null,"video_source_url":null,"video_thumbnail_url":null,"video_closed_caption_track_url":null,"feed_source_url":null,"edited_at":null,"crossposted_at":null,"language":"en","cached_tag_list":"ama","path":"/wuz/i-m-software-engineer-that-doesn-t-live-on-the-coast-ask-me-anything-n06","cached_user_name":"Conlin Durbin","cached_user_username":"wuz","last_comment_at":"2019-05-15T03:02:20.207Z","public_reactions_count":7},{"title":"Become an accessibility rock-star! 🤘","slug":"become-an-accessibility-rock-star-4h0c","created_at":"2019-04-09T03:30:26.678Z","main_image":null,"description":"A quick introduction to how you can start rocking at accessibility!","published":true,"published_at":"2019-04-09T12:14:33.735Z","processed_html":"\u003cblockquote\u003e\n\u003cp\u003eThe power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect. \u003cbr\u003e\n\u003cstrong\u003eTim Berners-Lee, W3C Director and inventor of the World Wide Web\u003c/strong\u003e\u003c/p\u003e\n\u003c/blockquote\u003e\n\n\u003cfigure\u003e\u003cp\u003e\u003ca href=\"https://res.cloudinary.com/practicaldev/image/fetch/s--ficI1nOJ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/veemmioyzu06m2ipl68a.gif\" class=\"article-body-image-wrapper\"\u003e\u003cimg src=\"https://res.cloudinary.com/practicaldev/image/fetch/s--ficI1nOJ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/veemmioyzu06m2ipl68a.gif\" alt=\"Wow person\" loading=\"lazy\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cfigcaption\u003eHow I hope you feel after reading this!\u003c/figcaption\u003e\u003c/figure\u003e\n\n\n\n\u003cp\u003eThis is an article I originally wrote as a lesson for some folks where I work. Accesibility is super important to me and this was a guide to help people at the company get to a good level on it.\u003c/p\u003e\n\n\u003cp\u003eI think a large part of the battle is turning on the accessibility focus in your brain - start thinking about it from time to time, and when you are creating new features implement some tiny changes that can have a big impact. I hope that by the end of this I can get us all thinking a little more about accessibility, why it's important, and how it applies to the goals of a company.\u003c/p\u003e\n\n\u003cp\u003eFirst, I want to give a little introduction to what accessibility even means.\u003c/p\u003e\n\n\u003ch2\u003e\n  \u003ca name=\"accessibility-is\" href=\"#accessibility-is\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  Accessibility is...\n\u003c/h2\u003e\n\n\u003col\u003e\n\u003cli\u003e\u003cp\u003eAdvocacy: For the most part, accessibility involves advocating for those who may not have the ability to advocate for themselves. Think of it this way: If a website is not accessible and the only means of finding contact information or getting in touch with the website maintainers is through the website, how would you ever let them know you want to use their site but can't?\u003c/p\u003e\u003c/li\u003e\n\u003cli\u003e\u003cp\u003eEducation: Often times, accessibility issues in a web platform arise from a lack of understanding, not a lack of empathy. By educating ourselves, we can greatly reduce future accessibility problems.\u003c/p\u003e\u003c/li\u003e\n\u003cli\u003e\u003cp\u003eLazy: This is good news! The web was built with accessibility in mind! If you were to create a website using nothing but built in HTML elements and minimal CSS, it would be accessible by default! Often times, not doing extra work is the best way to make your site accessible. Score one for slackers!\u003c/p\u003e\u003c/li\u003e\n\u003cli\u003e\u003cp\u003ePervasive: We tend to think of accessibility in narrow terms - someone who is blind or physically disabled. In truth, it is much more pervasive and encompassing than we think. How many of you have ever broken an arm? How did that slow down your work? According to Microsoft, there are 3 types of disability: \u003c/p\u003e\u003c/li\u003e\n\u003c/ol\u003e\n\n\u003cfigure\u003e\u003cp\u003e\u003ca href=\"https://res.cloudinary.com/practicaldev/image/fetch/s--ye-StFGR--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/7dvorvmzipkijc440zj3.png\" class=\"article-body-image-wrapper\"\u003e\u003cimg src=\"https://res.cloudinary.com/practicaldev/image/fetch/s--ye-StFGR--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/7dvorvmzipkijc440zj3.png\" alt=\"Kinds of disability: Permanent, Temporary, Situation\" loading=\"lazy\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cfigcaption\u003eThere are many kinds of disability and we are all affected by them!\u003c/figcaption\u003e\u003c/figure\u003e\n\n\n\n\u003ch1\u003e\n  \u003ca name=\"a11y-aria-and-wai-oh-my\" href=\"#a11y-aria-and-wai-oh-my\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  a11y, ARIA, and WAI - oh my!\n\u003c/h1\u003e\n\n\u003cblockquote\u003e\n\u003cp\u003eIf we use our own abilities as a baseline, we make things that are easy for some people to use, but difficult for everyone else. \u003cbr\u003e\n\u003cstrong\u003eMicrosoft inclusive toolkit\u003c/strong\u003e\u003c/p\u003e\n\u003c/blockquote\u003e\n\n\u003cfigure\u003e\u003cp\u003e\u003ca href=\"https://res.cloudinary.com/practicaldev/image/fetch/s--dzsxCg5h--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/tglkfk9xg6z7ahdidrv3.PNG\" class=\"article-body-image-wrapper\"\u003e\u003cimg src=\"https://res.cloudinary.com/practicaldev/image/fetch/s--dzsxCg5h--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/tglkfk9xg6z7ahdidrv3.PNG\" alt=\"A picture of a dev.to figure\" loading=\"lazy\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cfigcaption\u003eAdding a caption is an awesome a11y win! (so is adding an alt tag!)\u003c/figcaption\u003e\u003c/figure\u003e\n\n\n\n\u003cp\u003eThere are a lot of words thrown around with regards to accessibility, which can make it confusing. Let's cover some basic terminology here.\u003c/p\u003e\n\n\u003cp\u003e\u003cstrong\u003ea11Y\u003c/strong\u003e = \"Accessibility\". There are 11 letters between the A and the Y in accessibility. Much easier to type.\u003c/p\u003e\n\n\u003cp\u003e\u003cstrong\u003eARIA\u003c/strong\u003e = \"Accessible Rich Internet Applications\". ARIA is a standard for building accessible tools on the web.\u003c/p\u003e\n\n\u003cp\u003e\u003cstrong\u003eWAI\u003c/strong\u003e = \"Web Accessibility Initiative\".\u003c/p\u003e\n\n\u003cp\u003e\u003cstrong\u003eWCAG\u003c/strong\u003e = \"Web Content Accessibility Guidelines\".\u003c/p\u003e\n\n\u003cfigure\u003e\u003cp\u003e\u003ca href=\"https://res.cloudinary.com/practicaldev/image/fetch/s--LLz6zxPg--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/i4o25kahevjkkpnp97em.png\" class=\"article-body-image-wrapper\"\u003e\u003cimg src=\"https://res.cloudinary.com/practicaldev/image/fetch/s--LLz6zxPg--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/i4o25kahevjkkpnp97em.png\" alt=\"Disibility is not a personal health condition. Disibility is mismatched human interactions\" loading=\"lazy\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cfigcaption\u003eDisabilities encompass so much more than just health conditions.\u003c/figcaption\u003e\u003c/figure\u003e\n\n\n\n\u003ch1\u003e\n  \u003ca name=\"why-does-this-matter\" href=\"#why-does-this-matter\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  Why does this matter?\n\u003c/h1\u003e\n\n\u003cfigure\u003e\u003cp\u003e\u003ca href=\"https://res.cloudinary.com/practicaldev/image/fetch/s--NjwDSgRQ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/34b4msovb70ea0afkxdq.gif\" class=\"article-body-image-wrapper\"\u003e\u003cimg src=\"https://res.cloudinary.com/practicaldev/image/fetch/s--NjwDSgRQ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/34b4msovb70ea0afkxdq.gif\" alt=\"Infinite high-fiving gif\" loading=\"lazy\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cfigcaption\u003eInfinite highfives - what we'll be doing by paying attention to a11y\u003c/figcaption\u003e\u003c/figure\u003e\n\n\n\n\u003cp\u003e\u003cstrong\u003eFor the...\u003c/strong\u003e\u003c/p\u003e\n\n\u003cp\u003e\u003cstrong\u003e... Business\u003c/strong\u003e\u003c/p\u003e\n\n\u003cp\u003eThe good news is accessibility is a win for the business. It doesn't have to cost much to implement and the benefits can be sold to many customers, large and small. More accessible tools means more people using the platform, which means more paying customers. \u003c/p\u003e\n\n\u003cp\u003e\u003cstrong\u003e... Future\u003c/strong\u003e\u003c/p\u003e\n\n\u003cp\u003eAccessibility is a huge concern. Already in places like Ontario, there are laws requiring companies of a certain size to provide accessible websites and tools. It should be expected that this will be the norm moving forward. \u003c/p\u003e\n\n\u003cp\u003e\u003cstrong\u003e... User\u003c/strong\u003e\u003c/p\u003e\n\n\u003cp\u003eNon-disabled users benefit from accessibility as well! Features like keyboard shortcuts and tabIndex support help out power users and users with disabilities alike!\u003c/p\u003e\n\n\u003cp\u003e\u003cstrong\u003e... Product Team\u003c/strong\u003e\u003c/p\u003e\n\n\u003cp\u003eSpeccing, designing, developing and testing with accessibility in mind all improve the empathy and skillset of the people involved with them. When we spend more time considering our users (especially the ones that don't look, act or sound like us) and their needs, we improve ourselves and our product.\u003c/p\u003e\n\n\u003ch1\u003e\n  \u003ca name=\"tiny-actions-big-results\" href=\"#tiny-actions-big-results\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  Tiny actions, Big results\n\u003c/h1\u003e\n\n\u003cp\u003eThe good news is, there are a lot of easy wins that you can get by making simple changes.\u003c/p\u003e\n\n\u003cp\u003eFirst, stop breaking default functionality. This means using the right kind of elements for the right kind of things. \u003ccode\u003e\u0026lt;div\u0026gt;\u003c/code\u003e's shouldn't have click events, \u003ccode\u003e\u0026lt;img\u0026gt;\u003c/code\u003e tags should have alt text, and instructional text shouldn't be needlessly complicated. \u003ca href=\"https://medium.com/valtech-design/inclusive-design-dd4e03f82094\"\u003eHere is a more comprehensive list\u003c/a\u003e.\u003c/p\u003e\n\n\u003cp\u003eNext, installing some basic rules around accessibility. Eslint provides an a11y configuration that helps prevent you from making future mistakes and can help you correct old ones. There are lots of great tools out there that we can make use of. \u003c/p\u003e\n\n\u003cp\u003eFinally, spend some time watching/reading/learning about accessibility. Here is a basic list:\u003c/p\u003e\n\n\u003cp\u003e\u003ca href=\"https://a11yproject.com/resources\"\u003eA11y Project Resources\u003c/a\u003e\u003c/p\u003e\n\n\u003cp\u003e\u003ca href=\"https://www.youtube.com/channel/UCvNQ5aJllZ5Oi49jtMKeb0Q\"\u003eDeque videos on Youtube\u003c/a\u003e\u003c/p\u003e\n\n\u003cp\u003e\u003ca href=\"https://www.youtube.com/watch?v=l95VFLj3e2w\"\u003eEmpathy-Driven Development\u003c/a\u003e\u003c/p\u003e\n\n\u003cp\u003e\u003ca href=\"https://developers.google.com/web/fundamentals/accessibility/semantics-aria/\"\u003eIntroduction to ARIA\u003c/a\u003e\u003c/p\u003e\n\n\u003cp\u003e\u003ca href=\"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques\"\u003eARIA on MDN\u003c/a\u003e\u003c/p\u003e\n\n\u003cp\u003e\u003ca href=\"https://www.essentialaccessibility.com/blog/aoda-compliance/\"\u003eAODA Act Compliance\u003c/a\u003e\u003c/p\u003e\n\n\u003cp\u003e\u003ca href=\"https://www.section508.gov/\"\u003eSection 508 Compliance\u003c/a\u003e\u003c/p\u003e\n\n\u003cp\u003e\u003ca href=\"https://webaim.org/resources/\"\u003eWebAIM Resources\u003c/a\u003e\u003c/p\u003e\n\n\u003cp\u003e\u003ca href=\"https://github.com/UKHomeOffice/posters\"\u003eFree Accessibility Posters\u003c/a\u003e\u003c/p\u003e\n\n\u003cp\u003e\u003ca href=\"https://bulbenergy.github.io/bulb-audit/\"\u003eBulb Inclusive Design Audit\u003c/a\u003e\u003c/p\u003e\n\n\u003ch1\u003e\n  \u003ca name=\"beyond-a11y\" href=\"#beyond-a11y\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  Beyond a11y\n\u003c/h1\u003e\n\n\u003cp\u003e\u003ca href=\"https://res.cloudinary.com/practicaldev/image/fetch/s--HYsJkO5z--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/4ao2k4lejij1n4410kg3.gif\" class=\"article-body-image-wrapper\"\u003e\u003cimg src=\"https://res.cloudinary.com/practicaldev/image/fetch/s--HYsJkO5z--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/4ao2k4lejij1n4410kg3.gif\" alt=\"Squidward saying future drawn out.\" loading=\"lazy\"\u003e\u003c/a\u003e\u003c/p\u003e\n\n\u003cp\u003eWith good practices, we can create accessible applications that everyone loves to use. Once you've started down the road to accessibility, there are lots of things you can do to maintain it. \u003c/p\u003e\n\n\u003cp\u003e\u003cem\u003eContinued Diligence\u003c/em\u003e - Even with a good strategy for maintain accessibility we need to be diligent that we are introducing problems. Everyone should continue growing and learning about the topic, as well as teaching others!\u003c/p\u003e\n\n\u003cp\u003e\u003cem\u003eAccessibility, now in even more flavors!\u003c/em\u003e - Up to this point, we've talked mostly about the disabilities that people can have, but that's not the only side of this! We should be considering technological, educational, and language differences as well. Slow internet and small screens are an accessibility concern! So is access to education and other technology. Assuming our users are using the same devices as us or have had experience using web applications in the past are both bad assumptions. Things like internationalization are also awesome! \u003c/p\u003e\n\n\u003cp\u003eI hope you have enjoyed reading this and that you learned something! If you have something to add, please let me know! If you ever want to talk about accessibility, progressive web apps, inclusive design or anything else, I'd love to chat.\u003c/p\u003e\n\n\n\u003chr\u003e\n\n\u003cp\u003eCome chat with me on \u003ca href=\"https://twitter.com/CallMeWuz\"\u003eTwitter\u003c/a\u003e for more like this!\u003c/p\u003e\n\n","social_image":"https://cl.ly/66ce48ab7fe6/download/Image%202019-05-15%20at%202.23.44%20PM.png","body_markdown":"---\r\ntitle: Become an accessibility rock-star! 🤘\r\npublished: true\r\ndescription: A quick introduction to how you can start rocking at accessibility!\r\ntags: a11y, beginner,\r\n---\r\n\r\n\u003e The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect. \r\n**Tim Berners-Lee, W3C Director and inventor of the World Wide Web**\r\n\r\n\u003cfigure\u003e\r\n![Wow person](https://thepracticaldev.s3.amazonaws.com/i/veemmioyzu06m2ipl68a.gif)\r\n\u003cfigcaption\u003eHow I hope you feel after reading this!\u003c/figcaption\u003e\r\n\u003c/figure\u003e\r\n\r\nThis is an article I originally wrote as a lesson for some folks where I work. Accesibility is super important to me and this was a guide to help people at the company get to a good level on it.\r\n\r\nI think a large part of the battle is turning on the accessibility focus in your brain - start thinking about it from time to time, and when you are creating new features implement some tiny changes that can have a big impact. I hope that by the end of this I can get us all thinking a little more about accessibility, why it's important, and how it applies to the goals of a company.\r\n\r\nFirst, I want to give a little introduction to what accessibility even means.\r\n\r\n## Accessibility is...\r\n\r\n1. Advocacy: For the most part, accessibility involves advocating for those who may not have the ability to advocate for themselves. Think of it this way: If a website is not accessible and the only means of finding contact information or getting in touch with the website maintainers is through the website, how would you ever let them know you want to use their site but can't?\r\n\r\n2. Education: Often times, accessibility issues in a web platform arise from a lack of understanding, not a lack of empathy. By educating ourselves, we can greatly reduce future accessibility problems.\r\n\r\n3. Lazy: This is good news! The web was built with accessibility in mind! If you were to create a website using nothing but built in HTML elements and minimal CSS, it would be accessible by default! Often times, not doing extra work is the best way to make your site accessible. Score one for slackers!\r\n\r\n4. Pervasive: We tend to think of accessibility in narrow terms - someone who is blind or physically disabled. In truth, it is much more pervasive and encompassing than we think. How many of you have ever broken an arm? How did that slow down your work? According to Microsoft, there are 3 types of disability: \r\n\r\n\u003cfigure\u003e\r\n![Kinds of disability: Permanent, Temporary, Situation](https://thepracticaldev.s3.amazonaws.com/i/7dvorvmzipkijc440zj3.png)\r\n\u003cfigcaption\u003eThere are many kinds of disability and we are all affected by them!\u003c/figcaption\u003e\r\n\u003c/figure\u003e\r\n\r\n# a11y, ARIA, and WAI - oh my!\r\n\r\n\u003e If we use our own abilities as a baseline, we make things that are easy for some people to use, but difficult for everyone else. \r\n**Microsoft inclusive toolkit**\r\n\r\n\u003cfigure\u003e\r\n![A picture of a dev.to figure](https://thepracticaldev.s3.amazonaws.com/i/tglkfk9xg6z7ahdidrv3.PNG)\r\n\u003cfigcaption\u003eAdding a caption is an awesome a11y win! (so is adding an alt tag!)\u003c/figcaption\u003e\r\n\u003c/figure\u003e\r\n\r\nThere are a lot of words thrown around with regards to accessibility, which can make it confusing. Let's cover some basic terminology here.\r\n\r\n**a11Y** = \"Accessibility\". There are 11 letters between the A and the Y in accessibility. Much easier to type.\r\n\r\n**ARIA** = \"Accessible Rich Internet Applications\". ARIA is a standard for building accessible tools on the web.\r\n\r\n**WAI** = \"Web Accessibility Initiative\".\r\n\r\n**WCAG** = \"Web Content Accessibility Guidelines\".\r\n\r\n\u003cfigure\u003e\r\n![Disibility is not a personal health condition. Disibility is mismatched human interactions](https://thepracticaldev.s3.amazonaws.com/i/i4o25kahevjkkpnp97em.png)\r\n\u003cfigcaption\u003eDisabilities encompass so much more than just health conditions.\u003c/figcaption\u003e\r\n\u003c/figure\u003e\r\n\r\n# Why does this matter?\r\n\r\n\u003cfigure\u003e\r\n![Infinite high-fiving gif](https://thepracticaldev.s3.amazonaws.com/i/34b4msovb70ea0afkxdq.gif)\r\n\u003cfigcaption\u003eInfinite highfives - what we'll be doing by paying attention to a11y\u003c/figcaption\u003e\r\n\u003c/figure\u003e\r\n\r\n\r\n**For the...**\r\n\r\n**... Business**\r\n\r\nThe good news is accessibility is a win for the business. It doesn't have to cost much to implement and the benefits can be sold to many customers, large and small. More accessible tools means more people using the platform, which means more paying customers. \r\n\r\n**... Future**\r\n\r\nAccessibility is a huge concern. Already in places like Ontario, there are laws requiring companies of a certain size to provide accessible websites and tools. It should be expected that this will be the norm moving forward. \r\n\r\n\r\n**... User**\r\n\r\nNon-disabled users benefit from accessibility as well! Features like keyboard shortcuts and tabIndex support help out power users and users with disabilities alike!\r\n\r\n**... Product Team**\r\n\r\nSpeccing, designing, developing and testing with accessibility in mind all improve the empathy and skillset of the people involved with them. When we spend more time considering our users (especially the ones that don't look, act or sound like us) and their needs, we improve ourselves and our product.\r\n\r\n# Tiny actions, Big results\r\n\r\nThe good news is, there are a lot of easy wins that you can get by making simple changes.\r\n\r\nFirst, stop breaking default functionality. This means using the right kind of elements for the right kind of things. `\u003cdiv\u003e`'s shouldn't have click events, `\u003cimg\u003e` tags should have alt text, and instructional text shouldn't be needlessly complicated. [Here is a more comprehensive list](https://medium.com/valtech-design/inclusive-design-dd4e03f82094).\r\n\r\nNext, installing some basic rules around accessibility. Eslint provides an a11y configuration that helps prevent you from making future mistakes and can help you correct old ones. There are lots of great tools out there that we can make use of. \r\n\r\nFinally, spend some time watching/reading/learning about accessibility. Here is a basic list:\r\n\r\n[A11y Project Resources](https://a11yproject.com/resources)\r\n\r\n[Deque videos on Youtube](https://www.youtube.com/channel/UCvNQ5aJllZ5Oi49jtMKeb0Q)\r\n\r\n[Empathy-Driven Development](https://www.youtube.com/watch?v=l95VFLj3e2w)\r\n\r\n[Introduction to ARIA](https://developers.google.com/web/fundamentals/accessibility/semantics-aria/)\r\n\r\n[ARIA on MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques)\r\n\r\n[AODA Act Compliance](https://www.essentialaccessibility.com/blog/aoda-compliance/)\r\n\r\n[Section 508 Compliance](https://www.section508.gov/)\r\n\r\n[WebAIM Resources](https://webaim.org/resources/)\r\n\r\n[Free Accessibility Posters](https://github.com/UKHomeOffice/posters)\r\n\r\n[Bulb Inclusive Design Audit](https://bulbenergy.github.io/bulb-audit/)\r\n\r\n\r\n# Beyond a11y\r\n\r\n![Squidward saying future drawn out.](https://thepracticaldev.s3.amazonaws.com/i/4ao2k4lejij1n4410kg3.gif)\r\n\r\nWith good practices, we can create accessible applications that everyone loves to use. Once you've started down the road to accessibility, there are lots of things you can do to maintain it. \r\n\r\n*Continued Diligence* - Even with a good strategy for maintain accessibility we need to be diligent that we are introducing problems. Everyone should continue growing and learning about the topic, as well as teaching others!\r\n\r\n*Accessibility, now in even more flavors!* - Up to this point, we've talked mostly about the disabilities that people can have, but that's not the only side of this! We should be considering technological, educational, and language differences as well. Slow internet and small screens are an accessibility concern! So is access to education and other technology. Assuming our users are using the same devices as us or have had experience using web applications in the past are both bad assumptions. Things like internationalization are also awesome! \r\n\r\nI hope you have enjoyed reading this and that you learned something! If you have something to add, please let me know! If you ever want to talk about accessibility, progressive web apps, inclusive design or anything else, I'd love to chat.\r\n\r\n---\r\n\r\nCome chat with me on [Twitter](https://twitter.com/CallMeWuz) for more like this!","canonical_url":null,"show_comments":true,"main_image_background_hex_color":"#dddddd","published_from_feed":false,"comments_count":1,"video":null,"video_code":null,"video_source_url":null,"video_thumbnail_url":null,"video_closed_caption_track_url":null,"feed_source_url":null,"edited_at":null,"crossposted_at":null,"language":"en","cached_tag_list":"a11y, beginners","path":"/wuz/become-an-accessibility-rock-star-4h0c","cached_user_name":"Conlin Durbin","cached_user_username":"wuz","last_comment_at":"2019-05-15T15:21:07.734Z","public_reactions_count":48},{"title":"Getting started with Deno","slug":"getting-started-with-deno-e1m","created_at":"2019-04-18T13:21:04.760Z","main_image":"https://i.giphy.com/media/l6O086UCmNZcc/giphy.gif","description":"A new runtime for Javascript and Typescript from the founder of Node","published":true,"published_at":"2019-04-18T13:21:04.000Z","processed_html":"\u003cblockquote\u003e\n\u003cp\u003e\u003cstrong\u003eEdit:\u003c/strong\u003e Deno has hit 1.0 and with it, there has been some major discussion around whether the project needs an explicit CoC. The original maintainer seems to think it doesn't and I can't recommend that you use Deno until they do. \u003cbr\u003e\n\u003cstrong\u003eA Code of Conduct is a necessary part of any open source project.\u003c/strong\u003e\u003c/p\u003e\n\u003c/blockquote\u003e\n\n\u003cp\u003eIn case you missed it, the new Javascript and Typescript runtime from Ryan Dahl, the creator of Node, \u003ca href=\"https://deno.land/\"\u003ehas been released\u003c/a\u003e! It's got some really cool features and is ready for public use! Let's look at a few of the neat features and get started with a simple hello world!\u003c/p\u003e\n\n\u003ch2\u003e\n  \u003ca name=\"what-is-deno\" href=\"#what-is-deno\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  What is Deno?\n\u003c/h2\u003e\n\n\u003cp\u003eDeno is a new runtime for Typescript (and Javascript) written mostly in Rust. It has some \u003ca href=\"https://deno.land/manual.html#goals\"\u003egreat goals\u003c/a\u003e and some very interesting \"Non-Goals\", like not using \u003ccode\u003enpm\u003c/code\u003e and not having a package.json.\u003c/p\u003e\n\n\u003ch2\u003e\n  \u003ca name=\"getting-it-installed\" href=\"#getting-it-installed\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  Getting it installed\n\u003c/h2\u003e\n\n\u003cp\u003eInstalling deno is as easy as running this command:\u003c/p\u003e\n\n\u003cp\u003e\u003ccode\u003ecurl -fsSL https://deno.land/x/install/install.sh | sh\u003c/code\u003e\u003c/p\u003e\n\n\u003cp\u003eThen copy the \u003ccode\u003eexport\u003c/code\u003e line and add it to your \u003ccode\u003e~/bashrc\u003c/code\u003e or \u003ccode\u003e~/bash_profile\u003c/code\u003e.\u003c/p\u003e\n\n\u003cp\u003eOpen a new terminal and run \u003ccode\u003edeno\u003c/code\u003e. You should get a \u003ccode\u003e\u0026gt;\u003c/code\u003e prompt. Type \u003ccode\u003eexit\u003c/code\u003e and let's dig into some features!\u003c/p\u003e\n\n\u003ch2\u003e\n  \u003ca name=\"cool-features-in-deno\" href=\"#cool-features-in-deno\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  Cool features in Deno\n\u003c/h2\u003e\n\n\u003ch3\u003e\n  \u003ca name=\"typescript-by-default\" href=\"#typescript-by-default\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  Typescript by default\n\u003c/h3\u003e\n\n\u003cp\u003eDeno is integrated to run Typescript files by default. It basically makes types in Javascript a first-class citizen. No more compiling through Babel to use Typescript in server-side Javascript.\u003c/p\u003e\n\n\u003ch3\u003e\n  \u003ca name=\"importing-from-a-url\" href=\"#importing-from-a-url\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  Importing from a URL\n\u003c/h3\u003e\n\n\u003cp\u003eDeno lets you import from the web, just like you can in the browser. Just add a URL where you would usually name a module:\u003cbr\u003e\n\u003c/p\u003e\n\n\u003cdiv class=\"highlight\"\u003e\u003cpre class=\"highlight typescript\"\u003e\u003ccode\u003e\u003cspan class=\"k\"\u003eimport\u003c/span\u003e \u003cspan class=\"p\"\u003e{\u003c/span\u003e \u003cspan class=\"nx\"\u003ebgBlue\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e \u003cspan class=\"nx\"\u003ered\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e \u003cspan class=\"nx\"\u003ebold\u003c/span\u003e \u003cspan class=\"p\"\u003e}\u003c/span\u003e \u003cspan class=\"k\"\u003efrom\u003c/span\u003e \u003cspan class=\"dl\"\u003e\"\u003c/span\u003e\u003cspan class=\"s2\"\u003ehttps://deno.land/std/colors/mod.ts\u003c/span\u003e\u003cspan class=\"dl\"\u003e\"\u003c/span\u003e\u003cspan class=\"p\"\u003e;\u003c/span\u003e\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\n\n\n\n\u003ch3\u003e\n  \u003ca name=\"a-standard-library\" href=\"#a-standard-library\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  A Standard Library\n\u003c/h3\u003e\n\n\u003cp\u003eFurthermore, Deno has a standard library that is easy to import and use. There are modules that do a couple of different things, like HTTP handling, datetime work, and file system work. You can check it out \u003ca href=\"https://github.com/denoland/deno_std\"\u003ehere\u003c/a\u003e.\u003c/p\u003e\n\n\u003ch3\u003e\n  \u003ca name=\"uses-es-modules\" href=\"#uses-es-modules\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  Uses ES modules\n\u003c/h3\u003e\n\n\u003cp\u003eFinally, Deno only supports ES module syntax, which means no more \u003ccode\u003erequire()\u003c/code\u003e statements, just good ole' \u003ccode\u003eimport x from \"y\"\u003c/code\u003e.\u003c/p\u003e\n\n\u003ch2\u003e\n  \u003ca name=\"hello-world-example\" href=\"#hello-world-example\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  Hello World Example\n\u003c/h2\u003e\n\n\u003cp\u003eLet's look at a quick Hello World that highlights a few of those features!\u003c/p\u003e\n\n\u003cp\u003eCopy this into a \u003ccode\u003ehello-world.ts\u003c/code\u003e file.\u003cbr\u003e\n\u003c/p\u003e\n\n\u003cdiv class=\"highlight\"\u003e\u003cpre class=\"highlight javascript\"\u003e\u003ccode\u003e\u003cspan class=\"k\"\u003eimport\u003c/span\u003e \u003cspan class=\"p\"\u003e{\u003c/span\u003e \u003cspan class=\"nx\"\u003ebgBlue\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e \u003cspan class=\"nx\"\u003ered\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e \u003cspan class=\"nx\"\u003ebold\u003c/span\u003e \u003cspan class=\"p\"\u003e}\u003c/span\u003e \u003cspan class=\"k\"\u003efrom\u003c/span\u003e \u003cspan class=\"dl\"\u003e\"\u003c/span\u003e\u003cspan class=\"s2\"\u003ehttps://deno.land/std/colors/mod.ts\u003c/span\u003e\u003cspan class=\"dl\"\u003e\"\u003c/span\u003e\u003cspan class=\"p\"\u003e;\u003c/span\u003e\n\n\u003cspan class=\"kd\"\u003econst\u003c/span\u003e \u003cspan class=\"nx\"\u003esayHello\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"nx\"\u003ename\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e \u003cspan class=\"nx\"\u003estring\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"dl\"\u003e\"\u003c/span\u003e\u003cspan class=\"s2\"\u003eworld\u003c/span\u003e\u003cspan class=\"dl\"\u003e\"\u003c/span\u003e\u003cspan class=\"p\"\u003e)\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u0026gt;\u003c/span\u003e \u003cspan class=\"p\"\u003e{\u003c/span\u003e\n  \u003cspan class=\"nx\"\u003econsole\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003elog\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"nx\"\u003ebgBlue\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"nx\"\u003ered\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"nx\"\u003ebold\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"s2\"\u003e`Hello \u003c/span\u003e\u003cspan class=\"p\"\u003e${\u003c/span\u003e\u003cspan class=\"nx\"\u003ename\u003c/span\u003e\u003cspan class=\"p\"\u003e}\u003c/span\u003e\u003cspan class=\"s2\"\u003e!`\u003c/span\u003e\u003cspan class=\"p\"\u003e))));\u003c/span\u003e\n\u003cspan class=\"p\"\u003e}\u003c/span\u003e\n\n\n\u003cspan class=\"nx\"\u003esayHello\u003c/span\u003e\u003cspan class=\"p\"\u003e();\u003c/span\u003e\n\n\u003cspan class=\"nx\"\u003esayHello\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"dl\"\u003e\"\u003c/span\u003e\u003cspan class=\"s2\"\u003eConlin\u003c/span\u003e\u003cspan class=\"dl\"\u003e\"\u003c/span\u003e\u003cspan class=\"p\"\u003e);\u003c/span\u003e\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\n\n\n\n\u003cp\u003eYou can now run that with \u003ccode\u003edeno hello-world.ts\u003c/code\u003e and it should print out some stuff.\u003c/p\u003e\n\n\u003cp\u003eChange one of the \u003ccode\u003esayHello\u003c/code\u003e calls to \u003ccode\u003esayHello(15);\u003c/code\u003e and rerun it. You should see a type error since 15 isn't a string! That's pretty cool!\u003c/p\u003e\n\n\u003cp\u003eYou'll also notice how to import from a URL - it's getting some console color stuff from the standard library!\u003c/p\u003e\n\n\u003ch1\u003e\n  \u003ca name=\"final-thoughts\" href=\"#final-thoughts\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  Final thoughts\n\u003c/h1\u003e\n\n\u003cp\u003eDeno isn't quite ready for the production use - there are a couple \u003ca href=\"https://deno.land/benchmarks.html#req-per-sec\"\u003ebugs\u003c/a\u003e, but development is moving forward quickly! This is definitely a cool new open source project and one to keep an eye on!\u003c/p\u003e\n\n","social_image":"https://cl.ly/4daf59e43df9/download/Image%202019-04-18%20at%202.51.59%20PM.png","body_markdown":"---\r\ntitle: Getting started with Deno\r\npublished: true\r\ndescription: A new runtime for Javascript and Typescript from the founder of Node\r\ntags: javascript, beginner, typescript, deno\r\ncover_image: https://i.giphy.com/media/l6O086UCmNZcc/giphy.gif\r\n---\r\n\r\n\u003e **Edit:** Deno has hit 1.0 and with it, there has been some major discussion around whether the project needs an explicit CoC. The original maintainer seems to think it doesn't and I can't recommend that you use Deno until they do. \r\n\u003e **A Code of Conduct is a necessary part of any open source project.**\r\n\r\nIn case you missed it, the new Javascript and Typescript runtime from Ryan Dahl, the creator of Node, [has been released](https://deno.land/)! It's got some really cool features and is ready for public use! Let's look at a few of the neat features and get started with a simple hello world!\r\n\r\n## What is Deno?\r\n\r\nDeno is a new runtime for Typescript (and Javascript) written mostly in Rust. It has some [great goals](https://deno.land/manual.html#goals) and some very interesting \"Non-Goals\", like not using `npm` and not having a package.json.\r\n\r\n## Getting it installed\r\n\r\nInstalling deno is as easy as running this command:\r\n\r\n`curl -fsSL https://deno.land/x/install/install.sh | sh`\r\n\r\nThen copy the `export` line and add it to your `~/bashrc` or `~/bash_profile`.\r\n\r\nOpen a new terminal and run `deno`. You should get a `\u003e` prompt. Type `exit` and let's dig into some features!\r\n\r\n## Cool features in Deno\r\n\r\n### Typescript by default\r\n\r\nDeno is integrated to run Typescript files by default. It basically makes types in Javascript a first-class citizen. No more compiling through Babel to use Typescript in server-side Javascript.\r\n\r\n### Importing from a URL\r\n\r\nDeno lets you import from the web, just like you can in the browser. Just add a URL where you would usually name a module:\r\n\r\n```ts\r\nimport { bgBlue, red, bold } from \"https://deno.land/std/colors/mod.ts\";\r\n```\r\n\r\n### A Standard Library\r\n\r\nFurthermore, Deno has a standard library that is easy to import and use. There are modules that do a couple of different things, like HTTP handling, datetime work, and file system work. You can check it out [here](https://github.com/denoland/deno_std).\r\n\r\n### Uses ES modules\r\n\r\nFinally, Deno only supports ES module syntax, which means no more `require()` statements, just good ole' `import x from \"y\"`.\r\n\r\n## Hello World Example\r\n\r\nLet's look at a quick Hello World that highlights a few of those features!\r\n\r\nCopy this into a `hello-world.ts` file.\r\n\r\n```js\r\nimport { bgBlue, red, bold } from \"https://deno.land/std/colors/mod.ts\";\r\n\r\nconst sayHello = (name: string = \"world\") =\u003e {\r\n  console.log(bgBlue(red(bold(`Hello ${name}!`))));\r\n}\r\n\r\n\r\nsayHello();\r\n\r\nsayHello(\"Conlin\");\r\n```\r\n\r\nYou can now run that with `deno hello-world.ts` and it should print out some stuff.\r\n\r\nChange one of the `sayHello` calls to `sayHello(15);` and rerun it. You should see a type error since 15 isn't a string! That's pretty cool!\r\n\r\nYou'll also notice how to import from a URL - it's getting some console color stuff from the standard library!\r\n\r\n# Final thoughts\r\n\r\nDeno isn't quite ready for the production use - there are a couple [bugs](https://deno.land/benchmarks.html#req-per-sec), but development is moving forward quickly! This is definitely a cool new open source project and one to keep an eye on!","canonical_url":null,"show_comments":true,"main_image_background_hex_color":"#dddddd","published_from_feed":false,"comments_count":29,"video":"","video_code":"","video_source_url":"","video_thumbnail_url":"","video_closed_caption_track_url":"","feed_source_url":null,"edited_at":"2020-05-11T15:05:05.378Z","crossposted_at":null,"language":"en","cached_tag_list":"javascript, beginners, typescript, deno","path":"/wuz/getting-started-with-deno-e1m","cached_user_name":"Conlin Durbin","cached_user_username":"wuz","last_comment_at":"2020-06-01T06:54:13.328Z","public_reactions_count":161},{"title":"Where to find hosting?","slug":"where-to-find-hosting-1ni4","created_at":"2019-05-16T02:05:14.909Z","main_image":null,"description":"New site, new series   I just released a new personal website and I wanted to write up a gui...","published":true,"published_at":"2019-05-15T11:49:00.000Z","processed_html":"\u003ch1\u003e\n  \u003ca name=\"new-site-new-series\" href=\"#new-site-new-series\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  New site, new series\n\u003c/h1\u003e\n\n\u003cp\u003eI just released a \u003ca href=\"https://wuz.fyi\"\u003enew personal website\u003c/a\u003e and I wanted to write up a guide to creating a personal website in 2019. Here is what we will be covering:\u003c/p\u003e\n\n\u003col\u003e\n\u003cli\u003e\u003ca href=\"https://dev.to/wuz/where-to-find-hosting-1ni4\"\u003eHosting your personal site\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003eWriting your copy (Coming Soon)\u003c/li\u003e\n\u003cli\u003eLaying down some HTML (Coming Soon)\u003c/li\u003e\n\u003cli\u003eAdding some style (Coming Soon)\u003c/li\u003e\n\u003cli\u003eInteractive Personal Sites (Coming Soon)\u003c/li\u003e\n\u003cli\u003eGetting a domain name (Coming Soon)\u003c/li\u003e\n\u003c/ol\u003e\n\n\u003cp\u003eLet's dive in!\u003c/p\u003e\n\n\u003ch1\u003e\n  \u003ca name=\"choosing-the-right-hosting\" href=\"#choosing-the-right-hosting\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  Choosing the right hosting\n\u003c/h1\u003e\n\n\u003cp\u003eThe hosting you choose for your site comes down to a few important factors. First, you need to decide what kind of site you are going to host. Is it a simple HTML site? React/Gatsby? Or maybe you want a full Wordpress installation? Those choices will help dictate what host you want to go with. This site is running on Gatsby, so I want a host that makes deploying and updating my site easy.\u003c/p\u003e\n\n\u003ch1\u003e\n  \u003ca name=\"some-different-options\" href=\"#some-different-options\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  Some different options\n\u003c/h1\u003e\n\n\u003ch2\u003e\n  \u003ca name=\"netlify\" href=\"#netlify\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  Netlify\n\u003c/h2\u003e\n\n\u003cp\u003eNetlify is the webhost that I use for this site - its easy to set up, works really well with Gatsby and doesn't cost me anything! In addition, they have some really interesting addons that you can use to build out login systems, AWS lambda functions, and large media hosting. I am investigating some of these things to build out some tools in conjunction with this site and some React courses I am working on.\u003c/p\u003e\n\n\u003cp\u003e\u003ca href=\"https://netlify.com\"\u003eLink to Netlify\u003c/a\u003e\u003c/p\u003e\n\n\u003ch2\u003e\n  \u003ca name=\"nearlyfreespeech\" href=\"#nearlyfreespeech\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  NearlyFreeSpeech\n\u003c/h2\u003e\n\n\u003cp\u003eFor a good, free as in speech option, I'd highly recommend NearlyFreeSpeech. They cost very little and provide a great service with support for Ruby, Node, Python and more for like 25 cents a month. I use them to host a few personal services, like my calendar. I used to run my personal site on them, but Netlify was just too great and worked too well with Gatsby.\u003c/p\u003e\n\n\u003cp\u003e\u003ca href=\"https://www.nearlyfreespeech.net/\"\u003eLink to NearlyFreeSpeech\u003c/a\u003e\u003c/p\u003e\n\n\u003ch2\u003e\n  \u003ca name=\"digitalocean\" href=\"#digitalocean\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  DigitalOcean\n\u003c/h2\u003e\n\n\u003cp\u003eDigitalOcean is another great option if you want a lot of customization. It's almost more like running your site through AWS, but their backend is a lot more user friendly. This option costs a bit more, but is a great solution if you need what they provide. I use DigitalOcean to host a few side projects and the analytics engine for my personal site.\u003c/p\u003e\n\n\u003cp\u003e\u003ca href=\"https://www.digitalocean.com/\"\u003eLink to DigitalOcean\u003c/a\u003e\u003c/p\u003e\n\n\u003ch2\u003e\n  \u003ca name=\"wordpresscom\" href=\"#wordpresscom\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  Wordpress.com\n\u003c/h2\u003e\n\n\u003cp\u003eWordpress.com is a great option if you want to run a Wordpress site - the pricing is fair and they will handle basically everything for you. If you are getting started in tech and don't want to have to worry about building your blog, this is a \u003cem\u003egreat\u003c/em\u003e choice.\u003c/p\u003e\n\n\u003cp\u003e\u003ca href=\"https://www.wordpress.com/\"\u003eLink to Wordpress.com\u003c/a\u003e\u003c/p\u003e\n\n\u003ch2\u003e\n  \u003ca name=\"bluehost\" href=\"#bluehost\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  Bluehost\n\u003c/h2\u003e\n\n\u003cp\u003eBluehost (and many other more traditional hosts out there) offer one-click installation of all sorts of tools like Wordpress, Drupal, and more! These hosts have tons of documentation around them and can be a really good, low-cost option. They will support all kinds of sites and typically have really good tech to handle a lot of website load.\u003c/p\u003e\n\n\u003cp\u003e\u003ca href=\"https://www.bluehost.com/\"\u003eLink to Bluehost\u003c/a\u003e\u003c/p\u003e\n\n\u003ch1\u003e\n  \u003ca name=\"conclusion\" href=\"#conclusion\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  Conclusion\n\u003c/h1\u003e\n\n\u003cp\u003eAll in all, I would highly recommend using Netlify - its a great way to learn a bit about backends without getting too in-depth and their support for various architectures is just great. You can find really good tutorials online for setting up a site with Netlify and the community around them is really great!\u003c/p\u003e\n\n","social_image":null,"body_markdown":"---\ntitle: Where to find hosting?\npublished: true\ntags: beginner, hosting, career, website\ncanonical_url: https://wuz.fyi/personal-site-hosting/\nseries: Building a Personal Site\n---\n\n# New site, new series\n\nI just released a [new personal website](https://wuz.fyi) and I wanted to write up a guide to creating a personal website in 2019. Here is what we will be covering:\n\n1. [Hosting your personal site](https://dev.to/wuz/where-to-find-hosting-1ni4)\n2. Writing your copy (Coming Soon)\n3. Laying down some HTML (Coming Soon)\n4. Adding some style (Coming Soon)\n5. Interactive Personal Sites (Coming Soon)\n6. Getting a domain name (Coming Soon)\n\nLet's dive in!\n\n# Choosing the right hosting\n\nThe hosting you choose for your site comes down to a few important factors. First, you need to decide what kind of site you are going to host. Is it a simple HTML site? React/Gatsby? Or maybe you want a full Wordpress installation? Those choices will help dictate what host you want to go with. This site is running on Gatsby, so I want a host that makes deploying and updating my site easy.\n\n# Some different options\n\n## Netlify\n\nNetlify is the webhost that I use for this site - its easy to set up, works really well with Gatsby and doesn't cost me anything! In addition, they have some really interesting addons that you can use to build out login systems, AWS lambda functions, and large media hosting. I am investigating some of these things to build out some tools in conjunction with this site and some React courses I am working on.\n\n[Link to Netlify](https://netlify.com)\n\n## NearlyFreeSpeech\n\nFor a good, free as in speech option, I'd highly recommend NearlyFreeSpeech. They cost very little and provide a great service with support for Ruby, Node, Python and more for like 25 cents a month. I use them to host a few personal services, like my calendar. I used to run my personal site on them, but Netlify was just too great and worked too well with Gatsby.\n\n[Link to NearlyFreeSpeech](https://www.nearlyfreespeech.net/)\n\n## DigitalOcean\n\nDigitalOcean is another great option if you want a lot of customization. It's almost more like running your site through AWS, but their backend is a lot more user friendly. This option costs a bit more, but is a great solution if you need what they provide. I use DigitalOcean to host a few side projects and the analytics engine for my personal site.\n\n[Link to DigitalOcean](https://www.digitalocean.com/)\n\n## Wordpress.com\n\nWordpress.com is a great option if you want to run a Wordpress site - the pricing is fair and they will handle basically everything for you. If you are getting started in tech and don't want to have to worry about building your blog, this is a _great_ choice.\n\n[Link to Wordpress.com](https://www.wordpress.com/)\n\n## Bluehost\n\nBluehost (and many other more traditional hosts out there) offer one-click installation of all sorts of tools like Wordpress, Drupal, and more! These hosts have tons of documentation around them and can be a really good, low-cost option. They will support all kinds of sites and typically have really good tech to handle a lot of website load.\n\n[Link to Bluehost](https://www.bluehost.com/)\n\n# Conclusion\n\nAll in all, I would highly recommend using Netlify - its a great way to learn a bit about backends without getting too in-depth and their support for various architectures is just great. You can find really good tutorials online for setting up a site with Netlify and the community around them is really great!","canonical_url":"https://wuz.fyi/personal-site-hosting/","show_comments":true,"main_image_background_hex_color":"#dddddd","published_from_feed":true,"comments_count":2,"video":null,"video_code":null,"video_source_url":null,"video_thumbnail_url":null,"video_closed_caption_track_url":null,"feed_source_url":"https://wuz.fyi/personal-site-hosting/","edited_at":null,"crossposted_at":"2019-05-16T02:05:56.044Z","language":"en","cached_tag_list":"beginners, hosting, career, website","path":"/wuz/where-to-find-hosting-1ni4","cached_user_name":"Conlin Durbin","cached_user_username":"wuz","last_comment_at":"2019-05-24T19:20:15.053Z","public_reactions_count":11},{"title":"Building a Country Highlighting Tool With Mapbox","slug":"building-a-country-highlighting-tool-with-mapbox-2kbh","created_at":"2019-05-25T14:36:15.780Z","main_image":"https://i.imgur.com/vINLBHg.png","description":"This is an old post I recently republished on my newly built personal site. Thanks for reading!   Fo...","published":true,"published_at":"2017-07-27T12:47:00.000Z","processed_html":"\u003cblockquote\u003e\n\u003cp\u003eThis is an old post I recently republished on my newly built \u003ca href=\"https://wuz.fyi\"\u003epersonal site\u003c/a\u003e. Thanks for reading!\u003c/p\u003e\n\u003c/blockquote\u003e\n\n\u003cp\u003eFor a recent project, we needed to create a dynamic map that highlighted the areas in which our client had done work. After evaluating the requirements and looking into our options, we decided to build this using \u003ca href=\"http://mapbox.com/\"\u003eMapbox\u003c/a\u003e. Their integration with \u003ca href=\"https://www.openstreetmap.org/\"\u003eOpenStreetMap\u003c/a\u003e and ability to easily customize the tilesets and style on our map was an instant hook.\u003c/p\u003e\n\n\u003cp\u003eLet’s see what we’re building.\u003c/p\u003e\n\n\u003cp\u003e\u003ciframe height=\"600\" src=\"https://codepen.io/wuz/embed/ayOwjY/?height=600\u0026amp;default-tab=js,result\u0026amp;embed-version=2\" scrolling=\"no\" frameborder=\"no\" allowtransparency=\"true\" loading=\"lazy\" style=\"width: 100%;\"\u003e\n\u003c/iframe\u003e\n\u003c/p\u003e\n\n\u003cp\u003eIn this example, we are going to create a pop up that shows some basic stats about the country. This method can be used for any kind of Mapbox tileset, but we're using data from \u003ca href=\"http://www.naturalearthdata.com/downloads/10m-cultural-vectors/\"\u003eNatural Earth Data\u003c/a\u003e. Below is a link for the vector tileset we are using. Click the download countries link on that page and let’s get started!\u003c/p\u003e\n\n\u003cp\u003e\u003ca href=\"///static/7f97ce40e3b7dea3a2640e7740a4ecc2/9199c/access_token.png\"\u003e\u003cimg src=\"https://res.cloudinary.com/practicaldev/image/fetch/s--9A2CZn45--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://wuz.fyi/static/7f97ce40e3b7dea3a2640e7740a4ecc2/5cc77/access_token.png\" alt=\"getting your access token\" loading=\"lazy\"\u003e\u003c/a\u003e\u003c/p\u003e\n\n\u003cp\u003eTo begin building, you’ll need to create a \u003ca href=\"http://mapbox.com/studio\"\u003eMapbox Studio account\u003c/a\u003e. Once you get signed up, you’ll need to get your API access token. Login to your Mapboxaccount and click into the Account button on the bottom left of the dashboard. Then on API access tokens on the top right. Look for your Default Public Token.\u003c/p\u003e\n\n\u003cblockquote\u003e\n\u003cp\u003eThe next couple steps assume that you are using local files to run this code. If you want to play around with it in Codepen, \u003ca href=\"https://codepen.io/wuz/pen/Mvaavy?editors=0010\"\u003ehere is a quick template\u003c/a\u003ethat has the start of the project.\u003c/p\u003e\n\u003c/blockquote\u003e\n\n\u003cp\u003eGo ahead and copy then paste it into a new Javascript file named \u003ccode\u003emain.js\u003c/code\u003e like this:\u003cbr\u003e\n\u003c/p\u003e\n\n\u003cdiv class=\"highlight\"\u003e\u003cpre class=\"highlight javascript\"\u003e\u003ccode\u003e\u003cspan class=\"nx\"\u003emapboxgl\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003eaccessToken\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e\n  \u003cspan class=\"dl\"\u003e'\u003c/span\u003e\u003cspan class=\"s1\"\u003epk.eyJ1IjoiYnlmcm9zdC1hcnRpY2xlcyIsImEiOiJjajVsZ3NwZGczMWNtMnFyeTR2cHRnajZ4In0.HOjYrueiLWlhLfhsDCa7wQ\u003c/span\u003e\u003cspan class=\"dl\"\u003e'\u003c/span\u003e\u003cspan class=\"p\"\u003e;\u003c/span\u003e \u003cspan class=\"c1\"\u003e// Replace with your token\u003c/span\u003e\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\n\n\n\n\u003cp\u003eNow we just need some basic HTML boilerplate. Create a file called index.html and add the following:\u003cbr\u003e\n\u003c/p\u003e\n\n\u003cdiv class=\"highlight\"\u003e\u003cpre class=\"highlight html\"\u003e\u003ccode\u003e\u003cspan class=\"cp\"\u003e\u0026lt;!DOCTYPE html\u0026gt;\u003c/span\u003e\n\u003cspan class=\"nt\"\u003e\u0026lt;html\u0026gt;\u003c/span\u003e\n  \u003cspan class=\"nt\"\u003e\u0026lt;head\u0026gt;\u003c/span\u003e\n    \u003cspan class=\"nt\"\u003e\u0026lt;title\u0026gt;\u003c/span\u003eMy Awesome Map\u003cspan class=\"nt\"\u003e\u0026lt;/title\u0026gt;\u003c/span\u003e\n    \u003cspan class=\"nt\"\u003e\u0026lt;link\u003c/span\u003e \u003cspan class=\"na\"\u003erel=\u003c/span\u003e\u003cspan class=\"s\"\u003e\"stylesheet\"\u003c/span\u003e \u003cspan class=\"na\"\u003ehref=\u003c/span\u003e\u003cspan class=\"s\"\u003e\"style.css\"\u003c/span\u003e \u003cspan class=\"nt\"\u003e/\u0026gt;\u003c/span\u003e\n  \u003cspan class=\"nt\"\u003e\u0026lt;/head\u0026gt;\u003c/span\u003e\n  \u003cspan class=\"nt\"\u003e\u0026lt;body\u0026gt;\u003c/span\u003e\n    \u003cspan class=\"nt\"\u003e\u0026lt;div\u003c/span\u003e \u003cspan class=\"na\"\u003eid=\u003c/span\u003e\u003cspan class=\"s\"\u003e\"map\"\u003c/span\u003e\u003cspan class=\"nt\"\u003e\u0026gt;\u0026lt;/div\u0026gt;\u003c/span\u003e\n    \u003cspan class=\"nt\"\u003e\u0026lt;script \u003c/span\u003e\u003cspan class=\"na\"\u003esrc=\u003c/span\u003e\u003cspan class=\"s\"\u003e\"https://api.mapbox.com/mapbox-gl-js/v0.38.0/mapbox-gl.js\"\u003c/span\u003e\u003cspan class=\"nt\"\u003e\u0026gt;\u0026lt;/script\u0026gt;\u003c/span\u003e\n    \u003cspan class=\"nt\"\u003e\u0026lt;script \u003c/span\u003e\u003cspan class=\"na\"\u003esrc=\u003c/span\u003e\u003cspan class=\"s\"\u003e\"main.js\"\u003c/span\u003e\u003cspan class=\"nt\"\u003e\u0026gt;\u0026lt;/script\u0026gt;\u003c/span\u003e\n  \u003cspan class=\"nt\"\u003e\u0026lt;/body\u0026gt;\u003c/span\u003e\n\u003cspan class=\"nt\"\u003e\u0026lt;/html\u0026gt;\u003c/span\u003e\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\n\n\n\n\u003cp\u003eNow let’s add some styles. Create a style.css and add this:\u003cbr\u003e\n\u003c/p\u003e\n\n\u003cdiv class=\"highlight\"\u003e\u003cpre class=\"highlight css\"\u003e\u003ccode\u003e\u003cspan class=\"nf\"\u003e#map\u003c/span\u003e \u003cspan class=\"p\"\u003e{\u003c/span\u003e\n  \u003cspan class=\"nl\"\u003eheight\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e \u003cspan class=\"m\"\u003e500px\u003c/span\u003e\u003cspan class=\"p\"\u003e;\u003c/span\u003e\n  \u003cspan class=\"nl\"\u003ewidth\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e \u003cspan class=\"m\"\u003e1000px\u003c/span\u003e\u003cspan class=\"p\"\u003e;\u003c/span\u003e\n\u003cspan class=\"p\"\u003e}\u003c/span\u003e\n\u003cspan class=\"nf\"\u003e#map\u003c/span\u003e \u003cspan class=\"nc\"\u003e.mapboxgl-popup-content\u003c/span\u003e \u003cspan class=\"p\"\u003e{\u003c/span\u003e\n  \u003cspan class=\"nl\"\u003epadding\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e \u003cspan class=\"m\"\u003e10px\u003c/span\u003e\u003cspan class=\"p\"\u003e;\u003c/span\u003e\n  \u003cspan class=\"nl\"\u003emax-width\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e \u003cspan class=\"m\"\u003e300px\u003c/span\u003e\u003cspan class=\"p\"\u003e;\u003c/span\u003e\n  \u003cspan class=\"nl\"\u003epadding-top\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e \u003cspan class=\"m\"\u003e20px\u003c/span\u003e\u003cspan class=\"p\"\u003e;\u003c/span\u003e\n\u003cspan class=\"p\"\u003e}\u003c/span\u003e\n\u003cspan class=\"nf\"\u003e#map\u003c/span\u003e \u003cspan class=\"nc\"\u003e.mapboxgl-popup-content\u003c/span\u003e \u003cspan class=\"nt\"\u003eul\u003c/span\u003e \u003cspan class=\"p\"\u003e{\u003c/span\u003e\n  \u003cspan class=\"nl\"\u003elist-style\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e \u003cspan class=\"nb\"\u003enone\u003c/span\u003e\u003cspan class=\"p\"\u003e;\u003c/span\u003e\n  \u003cspan class=\"nl\"\u003emargin\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e \u003cspan class=\"m\"\u003e0\u003c/span\u003e\u003cspan class=\"p\"\u003e;\u003c/span\u003e\n  \u003cspan class=\"nl\"\u003epadding\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e \u003cspan class=\"m\"\u003e0\u003c/span\u003e\u003cspan class=\"p\"\u003e;\u003c/span\u003e\n  \u003cspan class=\"nl\"\u003efloat\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e \u003cspan class=\"nb\"\u003eleft\u003c/span\u003e\u003cspan class=\"p\"\u003e;\u003c/span\u003e\n\u003cspan class=\"p\"\u003e}\u003c/span\u003e\n\n\u003cspan class=\"nf\"\u003e#map\u003c/span\u003e \u003cspan class=\"nc\"\u003e.mapboxgl-popup-content\u003c/span\u003e \u003cspan class=\"nt\"\u003eul\u003c/span\u003e \u003cspan class=\"nt\"\u003eh3\u003c/span\u003e \u003cspan class=\"p\"\u003e{\u003c/span\u003e\n  \u003cspan class=\"nl\"\u003emargin\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e \u003cspan class=\"m\"\u003e0\u003c/span\u003e \u003cspan class=\"m\"\u003e0\u003c/span\u003e \u003cspan class=\"m\"\u003e10px\u003c/span\u003e \u003cspan class=\"m\"\u003e0\u003c/span\u003e\u003cspan class=\"p\"\u003e;\u003c/span\u003e\n\u003cspan class=\"p\"\u003e}\u003c/span\u003e\n\n\u003cspan class=\"nf\"\u003e#map\u003c/span\u003e \u003cspan class=\"nc\"\u003e.mapboxgl-popup-content\u003c/span\u003e \u003cspan class=\"nt\"\u003eimg\u003c/span\u003e \u003cspan class=\"p\"\u003e{\u003c/span\u003e\n  \u003cspan class=\"nl\"\u003efloat\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e \u003cspan class=\"nb\"\u003eleft\u003c/span\u003e\u003cspan class=\"p\"\u003e;\u003c/span\u003e\n  \u003cspan class=\"nl\"\u003ewidth\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e \u003cspan class=\"m\"\u003e30px\u003c/span\u003e\u003cspan class=\"p\"\u003e;\u003c/span\u003e\n  \u003cspan class=\"nl\"\u003emargin-right\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e \u003cspan class=\"m\"\u003e10px\u003c/span\u003e\u003cspan class=\"p\"\u003e;\u003c/span\u003e\n\u003cspan class=\"p\"\u003e}\u003c/span\u003e\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\n\n\n\n\u003cp\u003eIf you load up your page, you probably won’t see anything yet. Our next step is to add a map. Add the following code to main.js:\u003cbr\u003e\n\u003c/p\u003e\n\n\u003cdiv class=\"highlight\"\u003e\u003cpre class=\"highlight javascript\"\u003e\u003ccode\u003e\u003cspan class=\"nx\"\u003emapboxgl\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003eaccessToken\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e\n  \u003cspan class=\"dl\"\u003e'\u003c/span\u003e\u003cspan class=\"s1\"\u003epk.eyJ1IjoiYnlmcm9zdC1hcnRpY2xlcyIsImEiOiJjajVsZ3NwZGczMWNtMnFyeTR2cHRnajZ4In0.HOjYrueiLWlhLfhsDCa7wQ\u003c/span\u003e\u003cspan class=\"dl\"\u003e'\u003c/span\u003e\u003cspan class=\"p\"\u003e;\u003c/span\u003e \u003cspan class=\"c1\"\u003e// Replace with your token\u003c/span\u003e\n\n\u003cspan class=\"kd\"\u003evar\u003c/span\u003e \u003cspan class=\"nx\"\u003emap\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"k\"\u003enew\u003c/span\u003e \u003cspan class=\"nx\"\u003emapboxgl\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nb\"\u003eMap\u003c/span\u003e\u003cspan class=\"p\"\u003e({\u003c/span\u003e\n  \u003cspan class=\"na\"\u003econtainer\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e \u003cspan class=\"dl\"\u003e'\u003c/span\u003e\u003cspan class=\"s1\"\u003emap\u003c/span\u003e\u003cspan class=\"dl\"\u003e'\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e \u003cspan class=\"c1\"\u003e//this is the id of the container you want your map in\u003c/span\u003e\n  \u003cspan class=\"na\"\u003estyle\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e \u003cspan class=\"dl\"\u003e'\u003c/span\u003e\u003cspan class=\"s1\"\u003emapbox://styles/mapbox/light-v9\u003c/span\u003e\u003cspan class=\"dl\"\u003e'\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e \u003cspan class=\"c1\"\u003e// this controls the style of the map. Want to see more? Try changing 'light' to 'simple'.\u003c/span\u003e\n  \u003cspan class=\"na\"\u003eminZoom\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e \u003cspan class=\"mi\"\u003e2\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e \u003cspan class=\"c1\"\u003e// We want our map to start out pretty zoomed in to start.\u003c/span\u003e\n\u003cspan class=\"p\"\u003e});\u003c/span\u003e\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\n\n\n\n\u003cblockquote\u003e\n\u003cp\u003eIf you used the Codepen template from above, you should already have everything up to this point.\u003c/p\u003e\n\u003c/blockquote\u003e\n\n\u003cp\u003e\u003ciframe height=\"600\" src=\"https://codepen.io/wuz/embed/NvGGjQ/?height=600\u0026amp;default-tab=js,result\u0026amp;embed-version=2\" scrolling=\"no\" frameborder=\"no\" allowtransparency=\"true\" loading=\"lazy\" style=\"width: 100%;\"\u003e\n\u003c/iframe\u003e\n\u003c/p\u003e\n\n\u003cp\u003eAt this point, we need to load in our custom tileset in Mapbox Studio. If you haven’t already, download the Natural Earth Data from earlier. Open Mapbox Studio and click on Tilesets. From there click on “New tileset”\u003c/p\u003e\n\n\u003cp\u003e\u003ca href=\"///static/df1071a162ab3b23c92b230933a0045a/e198c/new_tileset.png\"\u003e\u003cimg src=\"https://res.cloudinary.com/practicaldev/image/fetch/s--D27nJ6s_--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://wuz.fyi/static/df1071a162ab3b23c92b230933a0045a/5cc77/new_tileset.png\" alt=\"the new tileset button\" loading=\"lazy\"\u003e\u003c/a\u003e\u003c/p\u003e\n\n\u003cp\u003eUpload the entire zip file you downloaded from Natural Earth Data.\u003c/p\u003e\n\n\u003cp\u003e\u003ca href=\"///static/f519c413c22958e7609e3d564f60565f/0a9c2/upload.png\"\u003e\u003cimg src=\"https://res.cloudinary.com/practicaldev/image/fetch/s--KIQCAtn3--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://wuz.fyi/static/f519c413c22958e7609e3d564f60565f/5cc77/upload.png\" alt=\"uploading the tile set\" loading=\"lazy\"\u003e\u003c/a\u003e\u003c/p\u003e\n\n\u003cp\u003eWait for it to finish uploading and processing.\u003c/p\u003e\n\n\u003cp\u003e\u003ca href=\"///static/8ad67a0f5ddb65c3a68640ff32abc3ca/fddbb/waiting.png\"\u003e\u003cimg src=\"https://res.cloudinary.com/practicaldev/image/fetch/s--vb3Oy9nh--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://wuz.fyi/static/8ad67a0f5ddb65c3a68640ff32abc3ca/fddbb/waiting.png\" alt=\"waiting for the upload to finish\" loading=\"lazy\"\u003e\u003c/a\u003e\u003c/p\u003e\n\n\u003cp\u003eOnce it’s done, click into your custom tileset.\u003c/p\u003e\n\n\u003cp\u003e\u003ca href=\"///static/13c9e42945e1f2a4e825c9b51e8624e2/232f1/custom_tileset.png\"\u003e\u003cimg src=\"https://res.cloudinary.com/practicaldev/image/fetch/s--mif-9YlJ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://wuz.fyi/static/13c9e42945e1f2a4e825c9b51e8624e2/5cc77/custom_tileset.png\" alt=\"your custom tileset\" loading=\"lazy\"\u003e\u003c/a\u003e\u003c/p\u003e\n\n\u003cp\u003eWe need to load this custom tileset into your map now. We create a function on map load. Create a custom event listener and call addLayer inside it.\u003c/p\u003e\n\n\u003cfigure\u003e\u003cp\u003e\u003ca href=\"///static/e2cf2d185ae105634fe10c988d5a98af/02744/mapid.png\"\u003e\u003cimg src=\"https://res.cloudinary.com/practicaldev/image/fetch/s--ZoN0AJWx--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://wuz.fyi/static/e2cf2d185ae105634fe10c988d5a98af/02744/mapid.png\" alt=\"mapid\" loading=\"lazy\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cfigcaption\u003eCopy your map ID\u003c/figcaption\u003e\u003c/figure\u003e\n\n\n\n\u003cp\u003eLook for the Map ID on the right hand side bar.\u003c/p\u003e\n\n\u003cfigure\u003e\u003cp\u003e\u003ca href=\"///static/ce944423236e16ad5984bce1c429a636/6ff5e/copyname.png\"\u003e\u003cimg src=\"https://res.cloudinary.com/practicaldev/image/fetch/s--C0q2UDJf--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://wuz.fyi/static/ce944423236e16ad5984bce1c429a636/5cc77/copyname.png\" alt=\"copyname\" loading=\"lazy\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cfigcaption\u003eCopy the name starting with ne_\u003c/figcaption\u003e\u003c/figure\u003e\n\n\n\n\u003cp\u003eYou’ll also need the source layer name, which is that bit starting with \u003ccode\u003ene_\u003c/code\u003e. Grab this and the Map ID and add them to your JS code.\u003cbr\u003e\n\u003c/p\u003e\n\n\u003cdiv class=\"highlight\"\u003e\u003cpre class=\"highlight javascript\"\u003e\u003ccode\u003e\u003cspan class=\"nx\"\u003emapboxgl\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003eaccessToken\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e\n  \u003cspan class=\"dl\"\u003e'\u003c/span\u003e\u003cspan class=\"s1\"\u003epk.eyJ1IjoiYnlmcm9zdC1hcnRpY2xlcyIsImEiOiJjajVsZ3NwZGczMWNtMnFyeTR2cHRnajZ4In0.HOjYrueiLWlhLfhsDCa7wQ\u003c/span\u003e\u003cspan class=\"dl\"\u003e'\u003c/span\u003e\u003cspan class=\"p\"\u003e;\u003c/span\u003e \u003cspan class=\"c1\"\u003e// Replace with your token\u003c/span\u003e\n\n\u003cspan class=\"kd\"\u003evar\u003c/span\u003e \u003cspan class=\"nx\"\u003emap\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"k\"\u003enew\u003c/span\u003e \u003cspan class=\"nx\"\u003emapboxgl\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nb\"\u003eMap\u003c/span\u003e\u003cspan class=\"p\"\u003e({\u003c/span\u003e\n  \u003cspan class=\"na\"\u003econtainer\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e \u003cspan class=\"dl\"\u003e'\u003c/span\u003e\u003cspan class=\"s1\"\u003emap\u003c/span\u003e\u003cspan class=\"dl\"\u003e'\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e \u003cspan class=\"c1\"\u003e//this is the id of the container you want your map in\u003c/span\u003e\n  \u003cspan class=\"na\"\u003estyle\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e \u003cspan class=\"dl\"\u003e'\u003c/span\u003e\u003cspan class=\"s1\"\u003emapbox://styles/mapbox/light-v9\u003c/span\u003e\u003cspan class=\"dl\"\u003e'\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e \u003cspan class=\"c1\"\u003e// this controls the style of the map. Want to see more? Try changing 'light' to 'simple'.\u003c/span\u003e\n  \u003cspan class=\"na\"\u003eminZoom\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e \u003cspan class=\"mi\"\u003e2\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e \u003cspan class=\"c1\"\u003e// We want our map to start out pretty zoomed in to start.\u003c/span\u003e\n\u003cspan class=\"p\"\u003e});\u003c/span\u003e\n\n\u003cspan class=\"nx\"\u003emap\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003eon\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"dl\"\u003e'\u003c/span\u003e\u003cspan class=\"s1\"\u003eload\u003c/span\u003e\u003cspan class=\"dl\"\u003e'\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e \u003cspan class=\"kd\"\u003efunction\u003c/span\u003e\u003cspan class=\"p\"\u003e()\u003c/span\u003e \u003cspan class=\"p\"\u003e{\u003c/span\u003e\n  \u003cspan class=\"c1\"\u003e//On map load, we want to do some stuff\u003c/span\u003e\n  \u003cspan class=\"nx\"\u003emap\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003eaddLayer\u003c/span\u003e\u003cspan class=\"p\"\u003e({\u003c/span\u003e\n    \u003cspan class=\"c1\"\u003e//here we are adding a layer containing the tileset we just uploaded\u003c/span\u003e\n    \u003cspan class=\"na\"\u003eid\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e \u003cspan class=\"dl\"\u003e'\u003c/span\u003e\u003cspan class=\"s1\"\u003ecountries\u003c/span\u003e\u003cspan class=\"dl\"\u003e'\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e \u003cspan class=\"c1\"\u003e//this is the name of our layer, which we will need later\u003c/span\u003e\n    \u003cspan class=\"na\"\u003esource\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e \u003cspan class=\"p\"\u003e{\u003c/span\u003e\n      \u003cspan class=\"na\"\u003etype\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e \u003cspan class=\"dl\"\u003e'\u003c/span\u003e\u003cspan class=\"s1\"\u003evector\u003c/span\u003e\u003cspan class=\"dl\"\u003e'\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e\n      \u003cspan class=\"na\"\u003eurl\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e \u003cspan class=\"dl\"\u003e'\u003c/span\u003e\u003cspan class=\"s1\"\u003emapbox://\u003c/span\u003e\u003cspan class=\"dl\"\u003e'\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e \u003cspan class=\"c1\"\u003e// \u0026lt;--- Add the Map ID you copied here\u003c/span\u003e\n    \u003cspan class=\"p\"\u003e},\u003c/span\u003e\n    \u003cspan class=\"dl\"\u003e'\u003c/span\u003e\u003cspan class=\"s1\"\u003esource-layer\u003c/span\u003e\u003cspan class=\"dl\"\u003e'\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e \u003cspan class=\"dl\"\u003e''\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e \u003cspan class=\"c1\"\u003e// \u0026lt;--- Add the source layer name you copied here\u003c/span\u003e\n    \u003cspan class=\"na\"\u003etype\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e \u003cspan class=\"dl\"\u003e'\u003c/span\u003e\u003cspan class=\"s1\"\u003efill\u003c/span\u003e\u003cspan class=\"dl\"\u003e'\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e\n    \u003cspan class=\"na\"\u003epaint\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e \u003cspan class=\"p\"\u003e{\u003c/span\u003e\n      \u003cspan class=\"dl\"\u003e'\u003c/span\u003e\u003cspan class=\"s1\"\u003efill-color\u003c/span\u003e\u003cspan class=\"dl\"\u003e'\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e \u003cspan class=\"dl\"\u003e'\u003c/span\u003e\u003cspan class=\"s1\"\u003e#52489C\u003c/span\u003e\u003cspan class=\"dl\"\u003e'\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e \u003cspan class=\"c1\"\u003e//this is the color you want your tileset to have (I used a nice purple color)\u003c/span\u003e\n      \u003cspan class=\"dl\"\u003e'\u003c/span\u003e\u003cspan class=\"s1\"\u003efill-outline-color\u003c/span\u003e\u003cspan class=\"dl\"\u003e'\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e \u003cspan class=\"dl\"\u003e'\u003c/span\u003e\u003cspan class=\"s1\"\u003e#F2F2F2\u003c/span\u003e\u003cspan class=\"dl\"\u003e'\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e \u003cspan class=\"c1\"\u003e//this helps us distinguish individual countries a bit better by giving them an outline\u003c/span\u003e\n    \u003cspan class=\"p\"\u003e},\u003c/span\u003e\n  \u003cspan class=\"p\"\u003e});\u003c/span\u003e\n\u003cspan class=\"p\"\u003e});\u003c/span\u003e\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\n\n\n\n\u003cp\u003eWe should now have loaded the tileset and your map should look something like this:\u003c/p\u003e\n\n\u003cp\u003e\u003ciframe height=\"600\" src=\"https://codepen.io/wuz/embed/WEQQav/?height=600\u0026amp;default-tab=js,result\u0026amp;embed-version=2\" scrolling=\"no\" frameborder=\"no\" allowtransparency=\"true\" loading=\"lazy\" style=\"width: 100%;\"\u003e\n\u003c/iframe\u003e\n\u003c/p\u003e\n\n\u003cp\u003eRight now this isn’t super helpful. All of the countries are showing, which makes it hard to distinguish anything. Let’s filter the data a bit.\u003c/p\u003e\n\n\u003cp\u003eFor this, we want to filter by \u003ca href=\"http://www.nationsonline.org/oneworld/country_code_list.htm\"\u003eISO Alpha3 Codes\u003c/a\u003e, which exist in our tileset under the ID “ADM0_A3_IS”.\u003c/p\u003e\n\n\u003cp\u003eWe add a line to the load function to start filtering:\u003cbr\u003e\n\u003c/p\u003e\n\n\u003cdiv class=\"highlight\"\u003e\u003cpre class=\"highlight plaintext\"\u003e\u003ccode\u003emapboxgl.accessToken =\n  'pk.eyJ1IjoiYnlmcm9zdC1hcnRpY2xlcyIsImEiOiJjajVsZ3NwZGczMWNtMnFyeTR2cHRnajZ4In0.HOjYrueiLWlhLfhsDCa7wQ'; // Replace with your token\n\nvar map = new mapboxgl.Map({\n  container: 'map', //this is the id of the container you want your map in\n  style: 'mapbox://styles/mapbox/light-v9', // this controls the style of the map. Want to see more? Try changing 'light' to 'simple'.\n  minZoom: 2, // We want our map to start out pretty zoomed in to start.\n});\n\nmap.on('load', function() {\n  //On map load, we want to do some stuff\n  map.addLayer({\n    //here we are adding a layer containing the tileset we just uploaded\n    id: 'countries', //this is the name of our layer, which we will need later\n    source: {\n      type: 'vector',\n      url: 'mapbox://', // \u0026lt;--- Add the Map ID you copied here\n    },\n    'source-layer': '', // \u0026lt;--- Add the source layer name you copied here\n    type: 'fill',\n    paint: {\n      'fill-color': '#52489C', //this is the color you want your tileset to have (I used a nice purple color)\n      'fill-outline-color': '#F2F2F2', //this helps us distinguish individual countries a bit better by giving them an outline\n    },\n  });\n\n  map.setFilter(\n    'countries',\n    ['in', 'ADM0_A3_IS'].concat(['USA', 'AUS', 'NGA']),\n  ); // This line lets us filter by country codes.\n});\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\n\n\n\n\u003cp\u003e\u003ciframe height=\"600\" src=\"https://codepen.io/wuz/embed/RZWWEv/?height=600\u0026amp;default-tab=js,result\u0026amp;embed-version=2\" scrolling=\"no\" frameborder=\"no\" allowtransparency=\"true\" loading=\"lazy\" style=\"width: 100%;\"\u003e\n\u003c/iframe\u003e\n\u003c/p\u003e\n\n\u003cp\u003eMuch better. Now our map highlights three countries: Nigeria, Australia, and the USA. If we want to add more countries, we can just edit the array of country codes. We could even pull these codes from an API and add them that way.\u003c/p\u003e\n\n\u003cp\u003eFinally, let’s make the map interactive. For this, we are going to use the API provided by \u003ca href=\"https://restcountries.eu/\"\u003eREST Countries\u003c/a\u003e. Luckily, they have an endpoint that accepts ISO Alpha3 codes!\u003cbr\u003e\n\u003c/p\u003e\n\n\u003cdiv class=\"highlight\"\u003e\u003cpre class=\"highlight plaintext\"\u003e\u003ccode\u003emapboxgl.accessToken =\n  'pk.eyJ1IjoiYnlmcm9zdC1hcnRpY2xlcyIsImEiOiJjajVsZ3NwZGczMWNtMnFyeTR2cHRnajZ4In0.HOjYrueiLWlhLfhsDCa7wQ'; // Replace with your token\n\nvar map = new mapboxgl.Map({\n  container: 'map', //this is the id of the container you want your map in\n  style: 'mapbox://styles/mapbox/light-v9', // this controls the style of the map. Want to see more? Try changing 'light' to 'simple'.\n  minZoom: 2, // We want our map to start out pretty zoomed in to start.\n});\n\nmap.on('load', function() {\n  //On map load, we want to do some stuff\n  map.addLayer({\n    //here we are adding a layer containing the tileset we just uploaded\n    id: 'countries', //this is the name of our layer, which we will need later\n    source: {\n      type: 'vector',\n      url: 'mapbox://byfrost-articles.74qv0xp0', // \u0026lt;--- Add the Map ID you copied here\n    },\n    'source-layer': 'ne_10m_admin_0_countries-76t9ly', // \u0026lt;--- Add the source layer name you copied here\n    type: 'fill',\n    paint: {\n      'fill-color': '#52489C', //this is the color you want your tileset to have (I used a nice purple color)\n      'fill-outline-color': '#F2F2F2', //this helps us distinguish individual countries a bit better by giving them an outline\n    },\n  });\n\n  map.setFilter(\n    'countries',\n    ['in', 'ADM0_A3_IS'].concat(['USA', 'AUS', 'NGA']),\n  ); // This line lets us filter by country codes.\n\n  map.on('click', 'countries', function(mapElement) {\n    const countryCode = mapElement.features[0].properties.ADM0_A3_IS; // Grab the country code from the map properties.\n\n    fetch(`https://restcountries.eu/rest/v2/alpha/${countryCode}`) // Using tempalate tags to create the API request\n      .then(data =\u0026gt; data.json()) //fetch returns an object with a .json() method, which returns a promise\n      .then(country =\u0026gt; {\n        //country contains the data from the API request\n        // Let's build our HTML in a template tag\n        const html = ` \n        \u0026lt;img src='${country.flag}' /\u0026gt; \n        \u0026lt;ul\u0026gt;\n          \u0026lt;li\u0026gt;\u0026lt;h3\u0026gt;${country.name}\u0026lt;/h3\u0026gt;\u0026lt;/li\u0026gt;\n          \u0026lt;li\u0026gt;\u0026lt;strong\u0026gt;Currencies:\u0026lt;/strong\u0026gt; ${country.currencies\n            .map(c =\u0026gt; c.code)\n            .join(', ')}\u0026lt;/li\u0026gt;\n          \u0026lt;li\u0026gt;\u0026lt;strong\u0026gt;Capital:\u0026lt;/strong\u0026gt; ${country.capital}\u0026lt;/li\u0026gt;\n          \u0026lt;li\u0026gt;\u0026lt;strong\u0026gt;Population:\u0026lt;/strong\u0026gt; ${country.population}\u0026lt;/li\u0026gt;\n          \u0026lt;li\u0026gt;\u0026lt;strong\u0026gt;Demonym:\u0026lt;/strong\u0026gt; ${country.demonym}\u0026lt;/li\u0026gt;\n        \u0026lt;/ul\u0026gt;\n      `; // Now we have a good looking popup HTML segment.\n        new mapboxgl.Popup() //Create a new popup\n          .setLngLat(mapElement.lngLat) // Set where we want it to appear (where we clicked)\n          .setHTML(html) // Add the HTML we just made to the popup\n          .addTo(map); // Add the popup to the map\n      });\n  });\n});\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\n\n\n\n\u003cp\u003eNow we have an interactive map with highlighted countries!\u003c/p\u003e\n\n\u003cp\u003e\u003ciframe height=\"600\" src=\"https://codepen.io/wuz/embed/ayOwjY/?height=600\u0026amp;default-tab=js,result\u0026amp;embed-version=2\" scrolling=\"no\" frameborder=\"no\" allowtransparency=\"true\" loading=\"lazy\" style=\"width: 100%;\"\u003e\n\u003c/iframe\u003e\n\u003c/p\u003e\n\n\n\u003chr\u003e\n\n\u003cp\u003eThanks for reading! I just started a new newsletter and I'd love fo you to read sign up for it! I'll be sharing a weekly update with some articles I've written, something cool I've found, and a few of my favorite links from around the web.\u003c/p\u003e\n\n\u003ch3\u003e\n  \u003ca name=\"join-the-newsletter\" href=\"#join-the-newsletter\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  \u003ccenter\u003e\u003ca href=\"https://mailchi.mp/c86513b586f3/dev\"\u003e🎉 Join the newsletter 🎉\u003c/a\u003e\u003c/center\u003e\n\u003c/h3\u003e\n\n\n\u003chr\u003e\n\n","social_image":null,"body_markdown":"---\ntitle: Building a Country Highlighting Tool With Mapbox\npublished: true\ncover_image: https://i.imgur.com/vINLBHg.png\ntags: beginner, javascript, map, tutorial\ncanonical_url: https://wuz.fyi/country-highlight-tool/\n---\n\n\u003e This is an old post I recently republished on my newly built [personal site](https://wuz.fyi). Thanks for reading!\n\nFor a recent project, we needed to create a dynamic map that highlighted the areas in which our client had done work. After evaluating the requirements and looking into our options, we decided to build this using [Mapbox](http://mapbox.com/). Their integration with [OpenStreetMap](https://www.openstreetmap.org/) and ability to easily customize the tilesets and style on our map was an instant hook.\n\nLet’s see what we’re building.\n\n{% codepen https://codepen.io/wuz/pen/ayOwjY/ default-tab=js,result %}\n\nIn this example, we are going to create a pop up that shows some basic stats about the country. This method can be used for any kind of Mapbox tileset, but we're using data from [Natural Earth Data](http://www.naturalearthdata.com/downloads/10m-cultural-vectors/). Below is a link for the vector tileset we are using. Click the download countries link on that page and let’s get started!\n\n[![getting your access token](https://wuz.fyi/static/7f97ce40e3b7dea3a2640e7740a4ecc2/5cc77/access_token.png)](/static/7f97ce40e3b7dea3a2640e7740a4ecc2/9199c/access_token.png)\n\nTo begin building, you’ll need to create a [Mapbox Studio account](http://mapbox.com/studio). Once you get signed up, you’ll need to get your API access token. Login to your Mapboxaccount and click into the Account button on the bottom left of the dashboard. Then on API access tokens on the top right. Look for your Default Public Token.\n\n\u003e The next couple steps assume that you are using local files to run this code. If you want to play around with it in Codepen, [here is a quick template](https://codepen.io/wuz/pen/Mvaavy?editors=0010)that has the start of the project.\n\nGo ahead and copy then paste it into a new Javascript file named `main.js` like this:\n\n```js\nmapboxgl.accessToken =\n  'pk.eyJ1IjoiYnlmcm9zdC1hcnRpY2xlcyIsImEiOiJjajVsZ3NwZGczMWNtMnFyeTR2cHRnajZ4In0.HOjYrueiLWlhLfhsDCa7wQ'; // Replace with your token\n```\n\nNow we just need some basic HTML boilerplate. Create a file called index.html and add the following:\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003ctitle\u003eMy Awesome Map\u003c/title\u003e\n    \u003clink rel=\"stylesheet\" href=\"style.css\" /\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003cdiv id=\"map\"\u003e\u003c/div\u003e\n    \u003cscript src=\"https://api.mapbox.com/mapbox-gl-js/v0.38.0/mapbox-gl.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"main.js\"\u003e\u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\nNow let’s add some styles. Create a style.css and add this:\n\n```css\n#map {\n  height: 500px;\n  width: 1000px;\n}\n#map .mapboxgl-popup-content {\n  padding: 10px;\n  max-width: 300px;\n  padding-top: 20px;\n}\n#map .mapboxgl-popup-content ul {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  float: left;\n}\n\n#map .mapboxgl-popup-content ul h3 {\n  margin: 0 0 10px 0;\n}\n\n#map .mapboxgl-popup-content img {\n  float: left;\n  width: 30px;\n  margin-right: 10px;\n}\n```\n\nIf you load up your page, you probably won’t see anything yet. Our next step is to add a map. Add the following code to main.js:\n\n```js\nmapboxgl.accessToken =\n  'pk.eyJ1IjoiYnlmcm9zdC1hcnRpY2xlcyIsImEiOiJjajVsZ3NwZGczMWNtMnFyeTR2cHRnajZ4In0.HOjYrueiLWlhLfhsDCa7wQ'; // Replace with your token\n\nvar map = new mapboxgl.Map({\n  container: 'map', //this is the id of the container you want your map in\n  style: 'mapbox://styles/mapbox/light-v9', // this controls the style of the map. Want to see more? Try changing 'light' to 'simple'.\n  minZoom: 2, // We want our map to start out pretty zoomed in to start.\n});\n```\n\n\u003e If you used the Codepen template from above, you should already have everything up to this point.\n\n{% codepen https://codepen.io/wuz/pen/NvGGjQ/ default-tab=js,result %}\n\nAt this point, we need to load in our custom tileset in Mapbox Studio. If you haven’t already, download the Natural Earth Data from earlier. Open Mapbox Studio and click on Tilesets. From there click on “New tileset”\n\n[![the new tileset button](https://wuz.fyi/static/df1071a162ab3b23c92b230933a0045a/5cc77/new_tileset.png)](/static/df1071a162ab3b23c92b230933a0045a/e198c/new_tileset.png)\n\nUpload the entire zip file you downloaded from Natural Earth Data.\n\n[![uploading the tile set](https://wuz.fyi/static/f519c413c22958e7609e3d564f60565f/5cc77/upload.png)](/static/f519c413c22958e7609e3d564f60565f/0a9c2/upload.png)\n\nWait for it to finish uploading and processing.\n\n[![waiting for the upload to finish](https://wuz.fyi/static/8ad67a0f5ddb65c3a68640ff32abc3ca/fddbb/waiting.png)](/static/8ad67a0f5ddb65c3a68640ff32abc3ca/fddbb/waiting.png)\n\nOnce it’s done, click into your custom tileset.\n\n[![your custom tileset](https://wuz.fyi/static/13c9e42945e1f2a4e825c9b51e8624e2/5cc77/custom_tileset.png)](/static/13c9e42945e1f2a4e825c9b51e8624e2/232f1/custom_tileset.png)\n\nWe need to load this custom tileset into your map now. We create a function on map load. Create a custom event listener and call addLayer inside it.\n\n[![mapid](https://wuz.fyi/static/e2cf2d185ae105634fe10c988d5a98af/02744/mapid.png)](/static/e2cf2d185ae105634fe10c988d5a98af/02744/mapid.png)\n\n\u003cfigcaption\u003eCopy your map ID\u003c/figcaption\u003e\n\nLook for the Map ID on the right hand side bar.\n\n[![copyname](https://wuz.fyi/static/ce944423236e16ad5984bce1c429a636/5cc77/copyname.png)](/static/ce944423236e16ad5984bce1c429a636/6ff5e/copyname.png)\n\n\u003cfigcaption\u003eCopy the name starting with ne_\u003c/figcaption\u003e\n\nYou’ll also need the source layer name, which is that bit starting with `ne_`. Grab this and the Map ID and add them to your JS code.\n\n```js\nmapboxgl.accessToken =\n  'pk.eyJ1IjoiYnlmcm9zdC1hcnRpY2xlcyIsImEiOiJjajVsZ3NwZGczMWNtMnFyeTR2cHRnajZ4In0.HOjYrueiLWlhLfhsDCa7wQ'; // Replace with your token\n\nvar map = new mapboxgl.Map({\n  container: 'map', //this is the id of the container you want your map in\n  style: 'mapbox://styles/mapbox/light-v9', // this controls the style of the map. Want to see more? Try changing 'light' to 'simple'.\n  minZoom: 2, // We want our map to start out pretty zoomed in to start.\n});\n\nmap.on('load', function() {\n  //On map load, we want to do some stuff\n  map.addLayer({\n    //here we are adding a layer containing the tileset we just uploaded\n    id: 'countries', //this is the name of our layer, which we will need later\n    source: {\n      type: 'vector',\n      url: 'mapbox://', // \u003c--- Add the Map ID you copied here\n    },\n    'source-layer': '', // \u003c--- Add the source layer name you copied here\n    type: 'fill',\n    paint: {\n      'fill-color': '#52489C', //this is the color you want your tileset to have (I used a nice purple color)\n      'fill-outline-color': '#F2F2F2', //this helps us distinguish individual countries a bit better by giving them an outline\n    },\n  });\n});\n```\n\nWe should now have loaded the tileset and your map should look something like this:\n\n{% codepen https://codepen.io/wuz/pen/WEQQav/ default-tab=js,result %}\n\nRight now this isn’t super helpful. All of the countries are showing, which makes it hard to distinguish anything. Let’s filter the data a bit.\n\nFor this, we want to filter by [ISO Alpha3 Codes](http://www.nationsonline.org/oneworld/country_code_list.htm), which exist in our tileset under the ID “ADM0\\_A3\\_IS”.\n\nWe add a line to the load function to start filtering:\n\n```\nmapboxgl.accessToken =\n  'pk.eyJ1IjoiYnlmcm9zdC1hcnRpY2xlcyIsImEiOiJjajVsZ3NwZGczMWNtMnFyeTR2cHRnajZ4In0.HOjYrueiLWlhLfhsDCa7wQ'; // Replace with your token\n\nvar map = new mapboxgl.Map({\n  container: 'map', //this is the id of the container you want your map in\n  style: 'mapbox://styles/mapbox/light-v9', // this controls the style of the map. Want to see more? Try changing 'light' to 'simple'.\n  minZoom: 2, // We want our map to start out pretty zoomed in to start.\n});\n\nmap.on('load', function() {\n  //On map load, we want to do some stuff\n  map.addLayer({\n    //here we are adding a layer containing the tileset we just uploaded\n    id: 'countries', //this is the name of our layer, which we will need later\n    source: {\n      type: 'vector',\n      url: 'mapbox://', // \u003c--- Add the Map ID you copied here\n    },\n    'source-layer': '', // \u003c--- Add the source layer name you copied here\n    type: 'fill',\n    paint: {\n      'fill-color': '#52489C', //this is the color you want your tileset to have (I used a nice purple color)\n      'fill-outline-color': '#F2F2F2', //this helps us distinguish individual countries a bit better by giving them an outline\n    },\n  });\n\n  map.setFilter(\n    'countries',\n    ['in', 'ADM0_A3_IS'].concat(['USA', 'AUS', 'NGA']),\n  ); // This line lets us filter by country codes.\n});\n```\n\n{% codepen https://codepen.io/wuz/pen/RZWWEv/ default-tab=js,result %}\n\nMuch better. Now our map highlights three countries: Nigeria, Australia, and the USA. If we want to add more countries, we can just edit the array of country codes. We could even pull these codes from an API and add them that way.\n\nFinally, let’s make the map interactive. For this, we are going to use the API provided by [REST Countries](https://restcountries.eu/). Luckily, they have an endpoint that accepts ISO Alpha3 codes!\n\n```\nmapboxgl.accessToken =\n  'pk.eyJ1IjoiYnlmcm9zdC1hcnRpY2xlcyIsImEiOiJjajVsZ3NwZGczMWNtMnFyeTR2cHRnajZ4In0.HOjYrueiLWlhLfhsDCa7wQ'; // Replace with your token\n\nvar map = new mapboxgl.Map({\n  container: 'map', //this is the id of the container you want your map in\n  style: 'mapbox://styles/mapbox/light-v9', // this controls the style of the map. Want to see more? Try changing 'light' to 'simple'.\n  minZoom: 2, // We want our map to start out pretty zoomed in to start.\n});\n\nmap.on('load', function() {\n  //On map load, we want to do some stuff\n  map.addLayer({\n    //here we are adding a layer containing the tileset we just uploaded\n    id: 'countries', //this is the name of our layer, which we will need later\n    source: {\n      type: 'vector',\n      url: 'mapbox://byfrost-articles.74qv0xp0', // \u003c--- Add the Map ID you copied here\n    },\n    'source-layer': 'ne_10m_admin_0_countries-76t9ly', // \u003c--- Add the source layer name you copied here\n    type: 'fill',\n    paint: {\n      'fill-color': '#52489C', //this is the color you want your tileset to have (I used a nice purple color)\n      'fill-outline-color': '#F2F2F2', //this helps us distinguish individual countries a bit better by giving them an outline\n    },\n  });\n\n  map.setFilter(\n    'countries',\n    ['in', 'ADM0_A3_IS'].concat(['USA', 'AUS', 'NGA']),\n  ); // This line lets us filter by country codes.\n\n  map.on('click', 'countries', function(mapElement) {\n    const countryCode = mapElement.features[0].properties.ADM0_A3_IS; // Grab the country code from the map properties.\n\n    fetch(`https://restcountries.eu/rest/v2/alpha/${countryCode}`) // Using tempalate tags to create the API request\n      .then(data =\u003e data.json()) //fetch returns an object with a .json() method, which returns a promise\n      .then(country =\u003e {\n        //country contains the data from the API request\n        // Let's build our HTML in a template tag\n        const html = ` \n        \u003cimg src='${country.flag}' /\u003e \n        \u003cul\u003e\n          \u003cli\u003e\u003ch3\u003e${country.name}\u003c/h3\u003e\u003c/li\u003e\n          \u003cli\u003e\u003cstrong\u003eCurrencies:\u003c/strong\u003e ${country.currencies\n            .map(c =\u003e c.code)\n            .join(', ')}\u003c/li\u003e\n          \u003cli\u003e\u003cstrong\u003eCapital:\u003c/strong\u003e ${country.capital}\u003c/li\u003e\n          \u003cli\u003e\u003cstrong\u003ePopulation:\u003c/strong\u003e ${country.population}\u003c/li\u003e\n          \u003cli\u003e\u003cstrong\u003eDemonym:\u003c/strong\u003e ${country.demonym}\u003c/li\u003e\n        \u003c/ul\u003e\n      `; // Now we have a good looking popup HTML segment.\n        new mapboxgl.Popup() //Create a new popup\n          .setLngLat(mapElement.lngLat) // Set where we want it to appear (where we clicked)\n          .setHTML(html) // Add the HTML we just made to the popup\n          .addTo(map); // Add the popup to the map\n      });\n  });\n});\n```\n\nNow we have an interactive map with highlighted countries!\n\n{% codepen https://codepen.io/wuz/pen/ayOwjY/ default-tab=js,result %}\n\n---\n\nThanks for reading! I just started a new newsletter and I'd love fo you to read sign up for it! I'll be sharing a weekly update with some articles I've written, something cool I've found, and a few of my favorite links from around the web.\n\n\n### \u003ccenter\u003e[🎉 Join the newsletter 🎉](https://mailchi.mp/c86513b586f3/dev)\u003c/center\u003e\n\n---","canonical_url":"https://wuz.fyi/country-highlight-tool/","show_comments":true,"main_image_background_hex_color":"#dddddd","published_from_feed":true,"comments_count":1,"video":null,"video_code":null,"video_source_url":null,"video_thumbnail_url":null,"video_closed_caption_track_url":null,"feed_source_url":"https://wuz.fyi/country-highlight-tool/","edited_at":null,"crossposted_at":"2019-05-25T17:07:58.207Z","language":"en","cached_tag_list":"beginners, javascript, map, tutorial","path":"/wuz/building-a-country-highlighting-tool-with-mapbox-2kbh","cached_user_name":"Conlin Durbin","cached_user_username":"wuz","last_comment_at":"2019-09-14T11:47:10.372Z","public_reactions_count":8},{"title":"Learning React in 2019: What is React?","slug":"learning-react-in-2019-what-is-react-5e99","created_at":"2019-05-30T13:13:29.664Z","main_image":"https://i.imgur.com/jV60xsB.png","description":"Spend any amount of time working in the Javascript ecosystem and you'll probably hear a lot about Rea...","published":true,"published_at":"2019-05-29T00:00:00.000Z","processed_html":"\u003cp\u003eSpend any amount of time working in the Javascript ecosystem and you'll probably hear a lot about React. Opinions on what the library is/does/should be are as numerous as the people working with it. Let's explore what React is and what the most important parts of the framework are.\u003c/p\u003e\n\n\u003ch2\u003e\n  \u003ca name=\"officially\" href=\"#officially\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  Officially\n\u003c/h2\u003e\n\n\u003cp\u003eIf you visit the \u003ca href=\"https://reactjs.com\"\u003eReact homepage\u003c/a\u003e, you'll find a great description of what React is. Right at the top, you will see the words \"A JavaScript library for building user interfaces\". Let's break that down a bit.\u003c/p\u003e\n\n\u003ch3\u003e\n  \u003ca name=\"javascript\" href=\"#javascript\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  \"Javascript\"\n\u003c/h3\u003e\n\n\u003cp\u003eAn important note here is that React is and probably will always be a Javascript framework. Even when you are dealing with React Native or another library, you are going to be working with Javascript code.\u003c/p\u003e\n\n\u003ch3\u003e\n  \u003ca name=\"building-user-interfaces\" href=\"#building-user-interfaces\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  \"Building user interfaces\"\n\u003c/h3\u003e\n\n\u003cp\u003eHere is the \"big idea\". React - through concepts like the virtual DOM, diffing algorithms, and fibers - is a fast, reactive way to build user interfaces. With tools like React Native, this expands to a large number of devices - React is \u003cem\u003enot\u003c/em\u003e a web-only library.\u003c/p\u003e\n\n\n\u003chr\u003e\n\n\u003ch2\u003e\n  \u003ca name=\"like-this-post\" href=\"#like-this-post\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  Like this post?\n\u003c/h2\u003e\n\n\u003cp\u003eIt is the first in a series \"Learning React in 2019\" that I am working on. If you like it, subscribe to my newsletter below - I send out weekly updates about my posts, breakdowns of what I'm learning, and some great links I found around the web.\u003c/p\u003e\n\n\u003ch3\u003e\n  \u003ca name=\"sign-up-now\" href=\"#sign-up-now\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  \u003ccenter\u003e🎉\u003ca href=\"https://mailchi.mp/c86513b586f3/dev\"\u003eSign up now!\u003c/a\u003e🎉\u003c/center\u003e\n\u003c/h3\u003e\n\n\n\u003chr\u003e\n\n\u003ch2\u003e\n  \u003ca name=\"the-important-parts-of-react\" href=\"#the-important-parts-of-react\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  The important parts of React\n\u003c/h2\u003e\n\n\u003cp\u003eLikely, you have heard a lot about different features in React - the virtual DOM, components, state, hooks, and more all make up the different tools in your toolbox. Which of these are important when you are just starting out? Where should you focus?\u003c/p\u003e\n\n\u003ch3\u003e\n  \u003ca name=\"javascript\" href=\"#javascript\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  Javascript\n\u003c/h3\u003e\n\n\u003cp\u003eThe best thing you can do to help improve your React skills is to work on your Javascript ones. React is built in Javascript and a good understanding of classes and functions will get you very far!\u003c/p\u003e\n\n\u003ch3\u003e\n  \u003ca name=\"the-virtual-dom\" href=\"#the-virtual-dom\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  The Virtual DOM\n\u003c/h3\u003e\n\n\u003cp\u003eThe Virtual DOM is one of the ways in which React is so fast. Instead of doing complex operations like swapping \u003ccode\u003ediv\u003c/code\u003e and re-rendering lists on the \u003ca href=\"https://developer.mozilla.org/en-US/docs/Glossary/DOM\"\u003eDOM\u003c/a\u003e, React uses a virtual representation of the DOM. If you think about the DOM as an object, it could have nodes like this:\u003cbr\u003e\n\u003c/p\u003e\n\n\u003cdiv class=\"highlight\"\u003e\u003cpre class=\"highlight plaintext\"\u003e\u003ccode\u003e{\n    node: 'html',\n    children: [\n        { node: 'head', ...headElements }\n        { node: 'body', ...bodyElements }\n    ]\n}\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\n\n\n\n\u003cp\u003eThat object is an example of the Virtual DOM. It's much faster to swap out an element in an array than it is to swap out an \u003ccode\u003e\u0026lt;li\u0026gt;\u003c/code\u003e rendered in the DOM. If you are doing lots of DOM updates, then React can batch them and god \u003cem\u003emuch\u003c/em\u003e faster.\u003c/p\u003e\n\n\u003cp\u003eAfter to work on your JS skills a bit, I'd highly recommend checking out a tutorial on building your own basic Virtual DOM (like \u003ca href=\"https://medium.com/@deathmood/how-to-write-your-own-virtual-dom-ee74acc13060\"\u003ethis one\u003c/a\u003e). You'll get a much better idea of what you are working with, which helps a lot when learning.\u003c/p\u003e\n\n\u003ch3\u003e\n  \u003ca name=\"state-management\" href=\"#state-management\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  State Management\n\u003c/h3\u003e\n\n\u003cp\u003eFinally, another major piece of React is state management. A great way to think about React is as a framework for presenting slices of state as a view. A component in that case is just the rendered view for a specific state. Think about this: if you have a list of items in an array stored in state, let's call it \u003ccode\u003enumbers\u003c/code\u003e, the rendered list of \u003ccode\u003eli\u003c/code\u003e's is a slice of that state, at that particular time. If you add something to the array, the \u003ccode\u003eli\u003c/code\u003e's update and you get a new slice of state.\u003c/p\u003e\n\n\u003cp\u003eLearning to manage your state in a React app is a great way to build performant web apps. We'll cover more on that in a later article!\u003c/p\u003e\n\n\n\u003chr\u003e\n\n\u003cp\u003eIt's not hard to level up quickly in React. A base understanding of the way React apps work and what React is can go a long way in helping you build great, performant front-ends. Next time, we'll cover more about JSX and how it works.\u003c/p\u003e\n\n\u003cp\u003eThanks for reading!\u003c/p\u003e\n\n","social_image":"","body_markdown":"---\ntitle: Learning React in 2019: What is React?\npublished: true\ntags: beginner, react, javascript, learning\ncover_image: https://i.imgur.com/jV60xsB.png\nseries: \"Learning React in 2019\"\ncanonical_url: https://wuz.fyi/what-is-react/\n---\n\nSpend any amount of time working in the Javascript ecosystem and you'll probably hear a lot about React. Opinions on what the library is/does/should be are as numerous as the people working with it. Let's explore what React is and what the most important parts of the framework are.\n\n## Officially\n\nIf you visit the [React homepage](https://reactjs.com), you'll find a great description of what React is. Right at the top, you will see the words \"A JavaScript library for building user interfaces\". Let's break that down a bit.\n\n### \"Javascript\"\n\nAn important note here is that React is and probably will always be a Javascript framework. Even when you are dealing with React Native or another library, you are going to be working with Javascript code.\n\n### \"Building user interfaces\"\n\nHere is the \"big idea\". React - through concepts like the virtual DOM, diffing algorithms, and fibers - is a fast, reactive way to build user interfaces. With tools like React Native, this expands to a large number of devices - React is _not_ a web-only library.\n\n---\n## Like this post?\n\nIt is the first in a series \"Learning React in 2019\" that I am working on. If you like it, subscribe to my newsletter below - I send out weekly updates about my posts, breakdowns of what I'm learning, and some great links I found around the web.\n\n### \u003ccenter\u003e🎉[Sign up now!](https://mailchi.mp/c86513b586f3/dev)🎉\u003c/center\u003e\n\n---\n\n\n## The important parts of React\n\nLikely, you have heard a lot about different features in React - the virtual DOM, components, state, hooks, and more all make up the different tools in your toolbox. Which of these are important when you are just starting out? Where should you focus?\n\n### Javascript\n\nThe best thing you can do to help improve your React skills is to work on your Javascript ones. React is built in Javascript and a good understanding of classes and functions will get you very far!\n\n### The Virtual DOM\n\nThe Virtual DOM is one of the ways in which React is so fast. Instead of doing complex operations like swapping `div` and re-rendering lists on the [DOM](https://developer.mozilla.org/en-US/docs/Glossary/DOM), React uses a virtual representation of the DOM. If you think about the DOM as an object, it could have nodes like this:\n\n```\n{\n    node: 'html',\n    children: [\n        { node: 'head', ...headElements }\n        { node: 'body', ...bodyElements }\n    ]\n}\n```\n\nThat object is an example of the Virtual DOM. It's much faster to swap out an element in an array than it is to swap out an `\u003cli\u003e` rendered in the DOM. If you are doing lots of DOM updates, then React can batch them and god _much_ faster.\n\nAfter to work on your JS skills a bit, I'd highly recommend checking out a tutorial on building your own basic Virtual DOM (like [this one](https://medium.com/@deathmood/how-to-write-your-own-virtual-dom-ee74acc13060)). You'll get a much better idea of what you are working with, which helps a lot when learning.\n\n### State Management\n\nFinally, another major piece of React is state management. A great way to think about React is as a framework for presenting slices of state as a view. A component in that case is just the rendered view for a specific state. Think about this: if you have a list of items in an array stored in state, let's call it `numbers`, the rendered list of `li`'s is a slice of that state, at that particular time. If you add something to the array, the `li`'s update and you get a new slice of state.\n\nLearning to manage your state in a React app is a great way to build performant web apps. We'll cover more on that in a later article!\n\n* * *\n\nIt's not hard to level up quickly in React. A base understanding of the way React apps work and what React is can go a long way in helping you build great, performant front-ends. Next time, we'll cover more about JSX and how it works.\n\nThanks for reading!","canonical_url":"https://wuz.fyi/what-is-react/","show_comments":true,"main_image_background_hex_color":"#dddddd","published_from_feed":true,"comments_count":0,"video":null,"video_code":null,"video_source_url":null,"video_thumbnail_url":null,"video_closed_caption_track_url":null,"feed_source_url":"https://wuz.fyi/what-is-react/","edited_at":"2019-06-04T14:30:11.496Z","crossposted_at":"2019-06-04T14:29:52.122Z","language":null,"cached_tag_list":"beginners, react, javascript, learning","path":"/wuz/learning-react-in-2019-what-is-react-5e99","cached_user_name":"Conlin Durbin","cached_user_username":"wuz","last_comment_at":"2019-05-29T00:00:00.000Z","public_reactions_count":64},{"title":"What are your favorite developer tools?","slug":"what-are-your-favorite-developer-tools-een","created_at":"2019-06-28T14:49:47.817Z","main_image":null,"description":"I'm getting a new laptop - what should I install?","published":true,"published_at":"2019-06-28T14:49:47.804Z","processed_html":"\u003cp\u003eHappy Friday!\u003c/p\u003e\n\n\u003cp\u003eWe're getting new laptops at work, which means I have a good opportunity to re-evaluate my development setup. What lesser-known tools should I check out?\u003c/p\u003e\n\n","social_image":null,"body_markdown":"---\ntitle: What are your favorite developer tools?\npublished: true\ndescription: I'm getting a new laptop - what should I install?\ntags: discuss, tools, macos, linux\n---\n\n\nHappy Friday!\n\nWe're getting new laptops at work, which means I have a good opportunity to re-evaluate my development setup. What lesser-known tools should I check out?\n","canonical_url":null,"show_comments":true,"main_image_background_hex_color":"#dddddd","published_from_feed":false,"comments_count":34,"video":null,"video_code":null,"video_source_url":null,"video_thumbnail_url":null,"video_closed_caption_track_url":null,"feed_source_url":null,"edited_at":null,"crossposted_at":null,"language":"en","cached_tag_list":"discuss, tools, macos, linux","path":"/wuz/what-are-your-favorite-developer-tools-een","cached_user_name":"Conlin Durbin","cached_user_username":"wuz","last_comment_at":"2019-08-08T14:22:19.219Z","public_reactions_count":79},{"title":"The Radar Gun Problem","slug":"the-radar-gun-problem-3jk0","created_at":"2019-07-10T23:56:11.435Z","main_image":"https://i.imgur.com/FnVk79i.png","description":"When `console.log` goes wrong","published":true,"published_at":"2019-07-10T00:00:00.000Z","processed_html":"\u003cp\u003eThe other day, I was driving home from an event and there was a massive slowdown on the highway. I assumed that there was a crash or some construction up ahead, but as I got closer to the bottleneck, I realized that the only difference was that there was a cop standing on the side of the highway with a radar gun. Just the presence of a monitor slowed down the performance of the system.\u003c/p\u003e\n\n\u003cp\u003eLater that week, I was debugging some Javascript code and ran into a problem I have hit a few times. I had a fairly intensive process looping over a lot of values. I took the standard approach to debug a JS problem and dropped in a \u003ccode\u003econsole.log\u003c/code\u003e. I refreshed the page, opened the console... and almost crashed my browser.\u003c/p\u003e\n\n\u003cp\u003eCalling a \u003ccode\u003econsole.log\u003c/code\u003e with an intensive process takes a lot of memory, it turns out. I've run into this before, but this time the traffic slowdown really made me think about it. Let's talk a bit about something I'm calling the RadarGun Problem.\u003c/p\u003e\n\n\u003cp\u003eIn many situations, the fix for the problem is changing where the observation happens. Moving the \u003ccode\u003econsole.log\u003c/code\u003e outside of the loop - either after or before -is a good option. You can also change the method of observation - drop in a\u003ccode\u003edebugger;\u003c/code\u003e and step through it, introducing a purposeful bottleneck to prevent an accidental one.\u003c/p\u003e\n\n\u003cp\u003eHave you run into this before? How have you solved it?\u003c/p\u003e\n\n","social_image":null,"body_markdown":"---\ntitle: The Radar Gun Problem\npublished: true\ntags: principles, opinion, javascript\ndescription: When `console.log` goes wrong\ncover_image: https://i.imgur.com/FnVk79i.png\ncanonical_url: https://wuz.fyi/the-radar-gun-problem/\n---\n\nThe other day, I was driving home from an event and there was a massive slowdown on the highway. I assumed that there was a crash or some construction up ahead, but as I got closer to the bottleneck, I realized that the only difference was that there was a cop standing on the side of the highway with a radar gun. Just the presence of a monitor slowed down the performance of the system.\n\nLater that week, I was debugging some Javascript code and ran into a problem I have hit a few times. I had a fairly intensive process looping over a lot of values. I took the standard approach to debug a JS problem and dropped in a `console.log`. I refreshed the page, opened the console... and almost crashed my browser.\n\nCalling a `console.log` with an intensive process takes a lot of memory, it turns out. I've run into this before, but this time the traffic slowdown really made me think about it. Let's talk a bit about something I'm calling the RadarGun Problem.\n\nIn many situations, the fix for the problem is changing where the observation happens. Moving the `console.log` outside of the loop - either after or before -is a good option. You can also change the method of observation - drop in a`debugger;` and step through it, introducing a purposeful bottleneck to prevent an accidental one.\n\nHave you run into this before? How have you solved it?","canonical_url":"https://wuz.fyi/the-radar-gun-problem/","show_comments":true,"main_image_background_hex_color":"#dddddd","published_from_feed":true,"comments_count":1,"video":null,"video_code":null,"video_source_url":null,"video_thumbnail_url":null,"video_closed_caption_track_url":null,"feed_source_url":"https://wuz.fyi/the-radar-gun-problem/","edited_at":null,"crossposted_at":"2019-07-10T23:59:42.589Z","language":"en","cached_tag_list":"principles, opinion, javascript","path":"/wuz/the-radar-gun-problem-3jk0","cached_user_name":"Conlin Durbin","cached_user_username":"wuz","last_comment_at":"2019-07-12T07:01:37.801Z","public_reactions_count":9},{"title":"5 tips for your first 5 days as a new dev","slug":"5-tips-for-your-first-5-days-as-a-new-dev-1h8l","created_at":"2019-07-29T20:57:22.909Z","main_image":"https://thepracticaldev.s3.amazonaws.com/i/tz0ybd0j4fgalpipqxx8.jpg","description":"What should you prioritize? How can you make an impact so early?","published":true,"published_at":"2019-07-29T21:32:14.982Z","processed_html":"\u003cp\u003eStarting your first developer position can be daunting. Even after a few years, switching companies can be stressful. Here are a few tips to make transitioning into a new team easier, especially focused on new developers.\u003c/p\u003e\n\n\u003ch1\u003e\n  \u003ca name=\"1-meet-people-outside-the-productengineering-team\" href=\"#1-meet-people-outside-the-productengineering-team\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  1. Meet people outside the product/engineering team\n\u003c/h1\u003e\n\n\u003cp\u003eYou're going to be siloed for a lot of your job, working closely with designers, product managers, and other engineers. One of the best ways to feel integrated and understand the larger impact you are having on the team. Reach out to some salespeople or a support person. If you are in an engineering-dominated company (like a Google or Apple), reach out to someone on a separate engineering team (preferably not another engineer).\u003c/p\u003e\n\n\u003cp\u003eAsk that person to get coffee with you or if they want to eat lunch during your first week. Chat with them about what they like best about the company, what food places they like around the area, or where there favorite quite places are around the office.\u003c/p\u003e\n\n\u003ch1\u003e\n  \u003ca name=\"2-take-some-time-to-get-your-developer-environment-set-up\" href=\"#2-take-some-time-to-get-your-developer-environment-set-up\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  2. Take some time to get your developer environment set up\n\u003c/h1\u003e\n\n\u003cp\u003eA lot of the developers I know are pretty particular about their developer environment. Joining a new team and working on a new product is a great time to get your development environment set up the way you like it. You are already going to be less productive than normal, so take some time to try out that new tool or workflow you've been wanting to check out. Worst case, you hate it and it makes you a little less productive for your first week. No harm done! \u003c/p\u003e\n\n\u003cp\u003eIf you are looking for some new tools, check out this community #discuss I put out a bit ago: \u003c/p\u003e\n\n\n\u003cdiv class=\"ltag__link\"\u003e\n  \u003ca href=\"/wuz\" class=\"ltag__link__link\"\u003e\n    \u003cdiv class=\"ltag__link__pic\"\u003e\n      \u003cimg src=\"https://res.cloudinary.com/practicaldev/image/fetch/s--Tli3n35J--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://res.cloudinary.com/practicaldev/image/fetch/s--JgH3y70b--/c_fill%2Cf_auto%2Cfl_progressive%2Ch_150%2Cq_auto%2Cw_150/https://dev-to-uploads.s3.amazonaws.com/uploads/user/profile_image/28677/97c19dd3-2c1d-4cf3-ae05-e57c6a5fb3c8.png\" alt=\"wuz image\" loading=\"lazy\"\u003e\n    \u003c/div\u003e\n  \u003c/a\u003e\n  \u003ca href=\"/wuz/what-are-your-favorite-developer-tools-een\" class=\"ltag__link__link\"\u003e\n    \u003cdiv class=\"ltag__link__content\"\u003e\n      \u003ch2\u003eWhat are your favorite developer tools?\u003c/h2\u003e\n      \u003ch3\u003eConlin Durbin ・ Jun 28 '19 ・ 1 min read\u003c/h3\u003e\n      \u003cdiv class=\"ltag__link__taglist\"\u003e\n        \u003cspan class=\"ltag__link__tag\"\u003e#discuss\u003c/span\u003e\n        \u003cspan class=\"ltag__link__tag\"\u003e#tools\u003c/span\u003e\n        \u003cspan class=\"ltag__link__tag\"\u003e#macos\u003c/span\u003e\n        \u003cspan class=\"ltag__link__tag\"\u003e#linux\u003c/span\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  \u003c/a\u003e\n\u003c/div\u003e\n\n\n\u003ch1\u003e\n  \u003ca name=\"3-write-some-code-make-a-commit\" href=\"#3-write-some-code-make-a-commit\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  3. Write some code, make a commit\n\u003c/h1\u003e\n\n\u003cp\u003eOn every team I've ever joined, I've made it my goal to have committed code in the first week. It gives you a good win in your first week and something to share if your team has Friday retros or team shares. It doesn't have to be anything too big - maybe you fix a small UI bug or pick up a little performance improvement. A good engineering team will have a way of tracking new developer work. If yours doesn't, ask another engineer for some help finding something that meets the criteria of being small and doesn't require much knowledge of the app. Then you can suggest tracking those kinds of stories in the future for when new devs come on! Double win!\u003c/p\u003e\n\n\u003ch1\u003e\n  \u003ca name=\"4-leave-on-time\" href=\"#4-leave-on-time\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  4. Leave on time\n\u003c/h1\u003e\n\n\u003cp\u003eThis is a hard one and a good team will make sure you do it. Don't stay late because you are the \"newbie\". That establishes bad habits. Unless you have a fun event to stay after for, I'd recommended leaving at the usual time. Even if there is another engineer that stays around much later, don't feel like you have to emulate that behavior. Establish a healthy balance between work and home. Make sure that working late is an exception, never the rule.\u003c/p\u003e\n\n\u003ch1\u003e\n  \u003ca name=\"5-work-hard-but-not-too-hard\" href=\"#5-work-hard-but-not-too-hard\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  5. Work hard, but not too hard\n\u003c/h1\u003e\n\n\u003cp\u003eThis final suggestion ties directly into the last one. I've heard this recommended as working at about \u003ccode\u003e60%\u003c/code\u003e effort your first week. Don't go all out. You have plenty of time to prove yourself and you definitely don't want to peak in your first week on a team. Slowly integrate yourself into the codebase, learn about the team dynamics, and spend some time just settling in. Then, once you are acquainted with the team, start ramping up your effort. It not only makes you look better, but it will help you and the team ease into you being involved. \u003c/p\u003e\n\n\u003cp\u003eThis doesn't mean that you should produce low-quality work, but instead produce a lower quantity for your first week or so. \u003c/p\u003e\n\n\n\u003chr\u003e\n\n\u003cp\u003eHopefully these tips help! I'd love to hear your thoughts in the comments or on \u003ca href=\"https://twitter.com/CallMeWuz\"\u003eTwitter\u003c/a\u003e.\u003c/p\u003e\n\n","social_image":"","body_markdown":"---\ntitle: 5 tips for your first 5 days as a new dev\npublished: true\ndescription: What should you prioritize? How can you make an impact so early?\ntags: career, beginner, engineer\ncover_image: https://thepracticaldev.s3.amazonaws.com/i/tz0ybd0j4fgalpipqxx8.jpg\n---\n\nStarting your first developer position can be daunting. Even after a few years, switching companies can be stressful. Here are a few tips to make transitioning into a new team easier, especially focused on new developers.\n\n# 1. Meet people outside the product/engineering team\n\nYou're going to be siloed for a lot of your job, working closely with designers, product managers, and other engineers. One of the best ways to feel integrated and understand the larger impact you are having on the team. Reach out to some salespeople or a support person. If you are in an engineering-dominated company (like a Google or Apple), reach out to someone on a separate engineering team (preferably not another engineer).\n\nAsk that person to get coffee with you or if they want to eat lunch during your first week. Chat with them about what they like best about the company, what food places they like around the area, or where there favorite quite places are around the office.\n\n# 2. Take some time to get your developer environment set up\n\nA lot of the developers I know are pretty particular about their developer environment. Joining a new team and working on a new product is a great time to get your development environment set up the way you like it. You are already going to be less productive than normal, so take some time to try out that new tool or workflow you've been wanting to check out. Worst case, you hate it and it makes you a little less productive for your first week. No harm done! \n\nIf you are looking for some new tools, check out this community #discuss I put out a bit ago: \n\n{% link https://dev.to/wuz/what-are-your-favorite-developer-tools-een %}\n\n# 3. Write some code, make a commit\n\nOn every team I've ever joined, I've made it my goal to have committed code in the first week. It gives you a good win in your first week and something to share if your team has Friday retros or team shares. It doesn't have to be anything too big - maybe you fix a small UI bug or pick up a little performance improvement. A good engineering team will have a way of tracking new developer work. If yours doesn't, ask another engineer for some help finding something that meets the criteria of being small and doesn't require much knowledge of the app. Then you can suggest tracking those kinds of stories in the future for when new devs come on! Double win!\n\n# 4. Leave on time\n\nThis is a hard one and a good team will make sure you do it. Don't stay late because you are the \"newbie\". That establishes bad habits. Unless you have a fun event to stay after for, I'd recommended leaving at the usual time. Even if there is another engineer that stays around much later, don't feel like you have to emulate that behavior. Establish a healthy balance between work and home. Make sure that working late is an exception, never the rule.\n\n# 5. Work hard, but not too hard\n\nThis final suggestion ties directly into the last one. I've heard this recommended as working at about `60%` effort your first week. Don't go all out. You have plenty of time to prove yourself and you definitely don't want to peak in your first week on a team. Slowly integrate yourself into the codebase, learn about the team dynamics, and spend some time just settling in. Then, once you are acquainted with the team, start ramping up your effort. It not only makes you look better, but it will help you and the team ease into you being involved. \n\nThis doesn't mean that you should produce low-quality work, but instead produce a lower quantity for your first week or so. \n\n---\n\nHopefully these tips help! I'd love to hear your thoughts in the comments or on [Twitter](https://twitter.com/CallMeWuz).","canonical_url":null,"show_comments":true,"main_image_background_hex_color":"#dddddd","published_from_feed":false,"comments_count":4,"video":null,"video_code":null,"video_source_url":null,"video_thumbnail_url":null,"video_closed_caption_track_url":null,"feed_source_url":null,"edited_at":null,"crossposted_at":null,"language":"en","cached_tag_list":"career, beginners, engineer","path":"/wuz/5-tips-for-your-first-5-days-as-a-new-dev-1h8l","cached_user_name":"Conlin Durbin","cached_user_username":"wuz","last_comment_at":"2020-01-31T16:04:30.298Z","public_reactions_count":109},{"title":"What's something you wished people would ask you about more?","slug":"what-s-something-you-wished-people-would-ask-you-about-more-4k0o","created_at":"2019-08-01T12:20:36.171Z","main_image":null,"description":"Just a fun Thursday morning question. What is one thing you wish people would ask you more?","published":true,"published_at":"2019-08-01T12:20:36.152Z","processed_html":"\u003cp\u003eJust a fun Thursday morning question. What is one thing you wish people would ask you more?\u003c/p\u003e\n\n","social_image":null,"body_markdown":"---\ntitle: What's something you wished people would ask you about more?\npublished: true\ndescription: \ntags: #discuss\n---\n\nJust a fun Thursday morning question. What is one thing you wish people would ask you more?","canonical_url":null,"show_comments":true,"main_image_background_hex_color":"#dddddd","published_from_feed":false,"comments_count":6,"video":null,"video_code":null,"video_source_url":null,"video_thumbnail_url":null,"video_closed_caption_track_url":null,"feed_source_url":null,"edited_at":null,"crossposted_at":null,"language":"en","cached_tag_list":"discuss","path":"/wuz/what-s-something-you-wished-people-would-ask-you-about-more-4k0o","cached_user_name":"Conlin Durbin","cached_user_username":"wuz","last_comment_at":"2019-08-15T07:52:29.756Z","public_reactions_count":4},{"title":"Your favorite `git` aliases?","slug":"your-favorite-git-aliases-3bd5","created_at":"2019-08-20T15:29:56.496Z","main_image":null,"description":"What is your favorite time-saving command?","published":true,"published_at":"2019-08-20T15:29:56.479Z","processed_html":"\u003cp\u003eWhat \u003ccode\u003egit\u003c/code\u003e aliases do you use? Why do you like them?\u003c/p\u003e\n\n","social_image":null,"body_markdown":"---\ntitle: Your favorite `git` aliases?\npublished: true\ndescription: What is your favorite time-saving command?\ntags: discuss, git, terminal\n---\n\nWhat `git` aliases do you use? Why do you like them?\n\n","canonical_url":null,"show_comments":true,"main_image_background_hex_color":"#dddddd","published_from_feed":false,"comments_count":16,"video":null,"video_code":null,"video_source_url":null,"video_thumbnail_url":null,"video_closed_caption_track_url":null,"feed_source_url":null,"edited_at":null,"crossposted_at":null,"language":null,"cached_tag_list":"discuss, git, terminal","path":"/wuz/your-favorite-git-aliases-3bd5","cached_user_name":"Conlin Durbin","cached_user_username":"wuz","last_comment_at":"2019-09-03T02:57:37.923Z","public_reactions_count":59},{"title":"Introducting RunCLI","slug":"introducting-runcli-m55","created_at":"2019-08-21T14:17:16.797Z","main_image":null,"description":"Easily share CLI commands","published":true,"published_at":"2019-08-21T14:17:16.785Z","processed_html":"\u003cblockquote\u003e\n\u003cp\u003eI just released the first version of a new little tool called RunCLI. \u003c/p\u003e\n\u003c/blockquote\u003e\n\n\u003cp\u003e\u003ca href=\"https://runc.li\"\u003eRunCLI\u003c/a\u003e let's you easily share commands with a URL. It's really basic right now - just paste a command in the textbox and click \"Create\". The main use case is for apps like Twitter, where sharing a medium-sized CLI command is difficult to do well.\u003c/p\u003e\n\n\u003cp\u003eHere is an example with a Git command:\u003c/p\u003e\n\n\u003cp\u003e\u003ca href=\"https://runc.li/#Z2l0IGxvZyAtLXByZXR0eT0iQCVoIiAtLW51bXN0YXQgLS1mb2xsb3cgPEZJTEVfTkFNRT4gfCBncmVwIC12IFx8IHwgIHRyICJcbiIgIiAiIHwgdHIgIkAiICJcbiIgfCBhd2sgJyQyID4gNCB7IHByaW50ICQyLCAkMywgJDEgfSc%3D\"\u003ehttps://runc.li/#Z2l0IGxvZyAtLXByZXR0eT0iQCVoIiAtLW51bXN0YXQgLS1mb2xsb3cgPEZJTEVfTkFNRT4gfCBncmVwIC12IFx8IHwgIHRyICJcbiIgIiAiIHwgdHIgIkAiICJcbiIgfCBhd2sgJyQyID4gNCB7IHByaW50ICQyLCAkMywgJDEgfSc%3D\u003c/a\u003e\u003c/p\u003e\n\n\u003cp\u003eI probably won't add a lot more to this, but I'd love to know what you would like to see it do!\u003c/p\u003e\n\n","social_image":null,"body_markdown":"---\ntitle: Introducting RunCLI\npublished: true\ndescription: Easily share CLI commands\ntags: commandline, tools, cli, showdev\n---\n\n\u003e I just released the first version of a new little tool called RunCLI. \n\n[RunCLI](https://runc.li) let's you easily share commands with a URL. It's really basic right now - just paste a command in the textbox and click \"Create\". The main use case is for apps like Twitter, where sharing a medium-sized CLI command is difficult to do well.\n\nHere is an example with a Git command:\n\nhttps://runc.li/#Z2l0IGxvZyAtLXByZXR0eT0iQCVoIiAtLW51bXN0YXQgLS1mb2xsb3cgPEZJTEVfTkFNRT4gfCBncmVwIC12IFx8IHwgIHRyICJcbiIgIiAiIHwgdHIgIkAiICJcbiIgfCBhd2sgJyQyID4gNCB7IHByaW50ICQyLCAkMywgJDEgfSc%3D\n\nI probably won't add a lot more to this, but I'd love to know what you would like to see it do!","canonical_url":null,"show_comments":true,"main_image_background_hex_color":"#dddddd","published_from_feed":false,"comments_count":9,"video":null,"video_code":null,"video_source_url":null,"video_thumbnail_url":null,"video_closed_caption_track_url":null,"feed_source_url":null,"edited_at":null,"crossposted_at":null,"language":"en","cached_tag_list":"commandline, tools, cli, showdev","path":"/wuz/introducting-runcli-m55","cached_user_name":"Conlin Durbin","cached_user_username":"wuz","last_comment_at":"2019-08-23T12:34:42.952Z","public_reactions_count":14},{"title":"Design Systems 101","slug":"design-systems-101-1ogo","created_at":"2020-01-15T17:09:55.052Z","main_image":"https://imgur.com/mkcG5lz.png","description":"Just what the heck is a design system?","published":true,"published_at":"2020-04-01T14:12:55.044Z","processed_html":"\u003cfigure\u003e\u003cp\u003e\u003ca href=\"https://res.cloudinary.com/practicaldev/image/fetch/s---TOecOHU--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://i.imgur.com/8jtaN4C.gif\" class=\"article-body-image-wrapper\"\u003e\u003cimg src=\"https://res.cloudinary.com/practicaldev/image/fetch/s---TOecOHU--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://i.imgur.com/8jtaN4C.gif\" alt=\"\" loading=\"lazy\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cfigcaption\u003e\nHow a design system speeds up page design\n\u003c/figcaption\u003e\u003c/figure\u003e\n\n\n\n\u003ch1\u003e\n  \u003ca name=\"what-the-heck-is-a-design-system\" href=\"#what-the-heck-is-a-design-system\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  What the heck is a design system?\n\u003c/h1\u003e\n\n\u003cp\u003eLet's start out with a couple quotes to set the mood:\u003c/p\u003e\n\n\u003cblockquote\u003e\n\u003cp\u003eA design system’s purpose is to provide consistent, tested and reusable solutions for a common UX problem.\u003cbr\u003e\n\u003ca href=\"https://medium.com/git-out-the-vote/pantsuit-the-hillary-clinton-ui-pattern-library-238e9bf06b54#.c6rnwv18f\"\u003e\u003cem\u003eMina Markham\u003c/em\u003e\u003c/a\u003e\u003c/p\u003e\n\u003c/blockquote\u003e\n\n\n\u003chr\u003e\n\n\u003cblockquote\u003e\n\u003cp\u003eA style guide is an artifact of the design process. A design system is a living, funded product with a roadmap \u0026amp; backlog, serving an ecosystem.\u003cbr\u003e\n\u003ca href=\"https://articles.uie.com/a-design-system-isnt-a-project-its-a-product-serving-products/\"\u003e\u003cem\u003eNathan Curtis\u003c/em\u003e\u003c/a\u003e\u003c/p\u003e\n\u003c/blockquote\u003e\n\n\u003ch2\u003e\n  \u003ca name=\"so-what-is-a-design-system\" href=\"#so-what-is-a-design-system\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  So what is a design system?\n\u003c/h2\u003e\n\n\u003cp\u003e\u003ca href=\"https://res.cloudinary.com/practicaldev/image/fetch/s--6RI8v9uJ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://imgur.com/MBiECbM.png\" class=\"article-body-image-wrapper\"\u003e\u003cimg src=\"https://res.cloudinary.com/practicaldev/image/fetch/s--6RI8v9uJ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://imgur.com/MBiECbM.png\" alt=\"A design system is...\" loading=\"lazy\"\u003e\u003c/a\u003e\u003c/p\u003e\n\n\u003cp\u003eWell, it's not a box of Legos. It's more like the Lego factory.\u003c/p\u003e\n\n\u003ch2\u003e\n  \u003ca name=\"people-tools-patterns-guidelines-values\" href=\"#people-tools-patterns-guidelines-values\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  People | Tools | Patterns | Guidelines | Values\n\u003c/h2\u003e\n\n\u003cp\u003eA good design system is a collaboration between many parts of a business and product. It is a distillation of a companies values and people into a set of guidelines, tools, and patterns that make rapid development easier and enable a team to produce accessible functional tools.\u003c/p\u003e\n\n\u003cp\u003eA design system is integrated - it's built into the product and organization/product development process, not merely a style guide you reference\u003c/p\u003e\n\n\u003cp\u003eA design system is shared - it’s actually shared and adopted across the organization, in order to cover major part of the product\u003c/p\u003e\n\n\u003cp\u003eA design system contains patterns - can be patterns and/or components. \u003c/p\u003e\n\n\u003cp\u003eA design system contains principles - there is underlying principles behind the patterns that guide the work\u003c/p\u003e\n\n\u003cblockquote\u003e\n\u003cp\u003eWe think we merely design and build websites and apps. And that’s true  for the most part. After all, that’s what our clients pay us to do, and the products we create are the vehicles that generate money and success for our organizations. It seems natural to focus on the final implementations rather than the underlying system. The live products remain the primary focus of everyone’s attention, while any pattern library exists as an offshoot that simply provides helpful documentation.\u003c/p\u003e\n\u003c/blockquote\u003e\n\n\u003ch2\u003e\n  \u003ca name=\"deliverables\" href=\"#deliverables\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  Deliverables\n\u003c/h2\u003e\n\n\u003cp\u003e\u003ca href=\"https://polaris.shopify.com/\"\u003eShopify\u003c/a\u003e has a great example of the various deliverables that might be produced from a design system. \u003c/p\u003e\n\n\u003cp\u003e\u003ca href=\"https://res.cloudinary.com/practicaldev/image/fetch/s--AWVCnD0P--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://imgur.com/OD8p6kX.png\" class=\"article-body-image-wrapper\"\u003e\u003cimg src=\"https://res.cloudinary.com/practicaldev/image/fetch/s--AWVCnD0P--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://imgur.com/OD8p6kX.png\" alt=\"an example of shopify's deliverables\" loading=\"lazy\"\u003e\u003c/a\u003e\u003c/p\u003e\n\n\u003ch3\u003e\n  \u003ca name=\"patterns\" href=\"#patterns\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  Patterns\n\u003c/h3\u003e\n\n\u003cp\u003eRules around accessibility, internationalization, layout patterns, and error messages would all be gathered in the Patterns section.\u003cbr\u003e\n\u003cstrong\u003e\u003ca href=\"https://polaris.shopify.com/patterns-and-guides/product-experience-principles#navigation\"\u003eExample\u003c/a\u003e\u003c/strong\u003e\u003c/p\u003e\n\n\u003ch3\u003e\n  \u003ca name=\"content\" href=\"#content\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  Content\n\u003c/h3\u003e\n\n\u003cp\u003eRules about website content, blog posts, and documentation all fall into the content portion of the design system. \u003cbr\u003e\n\u003cstrong\u003e\u003ca href=\"https://polaris.shopify.com/content/product-content#section-write-for-a-grade-7-reading-level\"\u003eExample\u003c/a\u003e\u003c/strong\u003e\u003c/p\u003e\n\n\u003ch3\u003e\n  \u003ca name=\"style-guide\" href=\"#style-guide\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  Style Guide\n\u003c/h3\u003e\n\n\u003cp\u003eRules about design and the creation of visual elements fall into the style guide portion.\u003cbr\u003e\n\u003cstrong\u003e\u003ca href=\"https://polaris.shopify.com/design/colors\"\u003eExample\u003c/a\u003e\u003c/strong\u003e\u003c/p\u003e\n\n\u003ch3\u003e\n  \u003ca name=\"code-style\" href=\"#code-style\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  Code Style\n\u003c/h3\u003e\n\n\u003cp\u003eCode style and formatting, stylelint rules, and CSS patterns are all part of the code style portion of a design system.\u003cbr\u003e\n\u003cstrong\u003e\u003ca href=\"https://about.lessonly.engineering/styleguide/css\"\u003eExample\u003c/a\u003e\u003c/strong\u003e\u003c/p\u003e\n\n\u003ch3\u003e\n  \u003ca name=\"component-library\" href=\"#component-library\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  Component Library\n\u003c/h3\u003e\n\n\u003cp\u003eReusable components like buttons, form fields, and grids make are part of the component library.\u003cbr\u003e\n\u003cstrong\u003e\u003ca href=\"https://polaris.shopify.com/components/forms/autocomplete#navigation\"\u003eExample\u003c/a\u003e\u003c/strong\u003e\u003c/p\u003e\n\n\n\u003chr\u003e\n\n\u003ch1\u003e\n  \u003ca name=\"benefits-of-a-design-system\" href=\"#benefits-of-a-design-system\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  Benefits of a design system:\n\u003c/h1\u003e\n\n\u003cul\u003e\n\u003cli\u003e\n\u003cstrong\u003eDesign systems bring order to chaos.\u003c/strong\u003e Everyone is kept on the same page, so the entire product remains consistent and polished throughout.\u003c/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eDesign systems improve the user experience through the repeated use of familiar and proven patterns.\u003c/strong\u003e Designing anything from scratch leaves room for error, so try to use what already works.\u003c/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eDesign systems improve workflow efficiency.\u003c/strong\u003e Product teams know exactly how components of new features should look and how to implement them.\u003c/li\u003e\n\u003c/ul\u003e\n\n\u003ch1\u003e\n  \u003ca name=\"building-a-design-system\" href=\"#building-a-design-system\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  Building a design system\n\u003c/h1\u003e\n\n\u003cp\u003e\u003ca href=\"https://res.cloudinary.com/practicaldev/image/fetch/s--D7lcZvLD--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://imgur.com/2VLKmFj.png\" class=\"article-body-image-wrapper\"\u003e\u003cimg src=\"https://res.cloudinary.com/practicaldev/image/fetch/s--D7lcZvLD--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://imgur.com/2VLKmFj.png\" alt=\"a visual representation of a design SYSTEM\" loading=\"lazy\"\u003e\u003c/a\u003e\u003c/p\u003e\n\n\u003ch2\u003e\n  \u003ca name=\"questions-to-ask\" href=\"#questions-to-ask\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  Questions to ask\n\u003c/h2\u003e\n\n\u003cul\u003e\n\u003cli\u003eHow does the system work today and in the future?\u003c/li\u003e\n\u003cli\u003eWhat is our vision?\u003c/li\u003e\n\u003cli\u003eWhat problems are we trying to solve?\u003c/li\u003e\n\u003cli\u003eWho does this problem most impact?\u003c/li\u003e\n\u003cli\u003eWhat impact do we want a design system to have on how we work?\u003c/li\u003e\n\u003c/ul\u003e\n\n\u003ch2\u003e\n  \u003ca name=\"building-on-a-smaller-team\" href=\"#building-on-a-smaller-team\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  Building on a smaller team\n\u003c/h2\u003e\n\n\u003ch3\u003e\n  \u003ca name=\"1-dont-start-from-scratch\" href=\"#1-dont-start-from-scratch\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  1. Don't start from scratch\n\u003c/h3\u003e\n\n\u003cp\u003e\"Steal like an artist\", where you can. There are lots of open design systems out there that we can borrow from. Additionally, there are lots of good tools that we can use. \u003c/p\u003e\n\n\u003cp\u003eEven things like Bootstrap can be useful to steal from - we can find common patterns that many web-apps use and build reusable components to build them out for our companies.\u003c/p\u003e\n\n\u003ch3\u003e\n  \u003ca name=\"2-uxui-audit\" href=\"#2-uxui-audit\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  2. \u003ca href=\"https://www.invisionapp.com/inside-design/guide-to-effective-ux-audit/\"\u003eUX/UI Audit\u003c/a\u003e\n\u003c/h3\u003e\n\n\u003cp\u003eWe can't know where we are going until we know where we are and where we have been. Before starting, get an idea of where you are, what pages you have, what components they use, and what makes sense to abstract into a design system.\u003c/p\u003e\n\n\u003ch3\u003e\n  \u003ca name=\"3-build-a-living-document\" href=\"#3-build-a-living-document\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  3. Build a living document\n\u003c/h3\u003e\n\n\u003cp\u003eA design system is a living breathing collaboration between designers and developers. As such, it can and should grow and evolve - which means getting started and letting it change/evolve.\u003c/p\u003e\n\n\u003cp\u003eSome ideas of sections:\u003c/p\u003e\n\n\u003col\u003e\n\u003cli\u003eColors\u003c/li\u003e\n\u003cli\u003eTypography\u003c/li\u003e\n\u003cli\u003eSizing/Spacing\u003c/li\u003e\n\u003cli\u003eImagery\u003c/li\u003e\n\u003c/ol\u003e\n\n\u003ch3\u003e\n  \u003ca name=\"4-build-a-component-library-and-document-it\" href=\"#4-build-a-component-library-and-document-it\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  4. Build a component library and document it\n\u003c/h3\u003e\n\n\u003cp\u003eOnce the audit is done, begin to build out a component library. For each component, include documentation and standards. Remember that when \u003cem\u003enot\u003c/em\u003e to use a component is just as important as when you should use it.\u003c/p\u003e\n\n\u003ch2\u003e\n  \u003ca name=\"quick-activity-for-getting-started\" href=\"#quick-activity-for-getting-started\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  Quick Activity for getting started\n\u003c/h2\u003e\n\n\u003cblockquote\u003e\n\u003cp\u003eOur design system offers ____\u003cstrong\u003e\u003cem\u003e[kit scope]\u003c/em\u003e\u003c/strong\u003e____\u003cbr\u003e\nreleased as ____\u003cstrong\u003e\u003cem\u003e[kit outputs]\u003c/em\u003e\u003c/strong\u003e__\u003cbr\u003e\nand documented at ____\u003cstrong\u003e\u003cem\u003e[kit doc site]\u003c/em\u003e\u003c/strong\u003e__\u003cbr\u003e\nproduced by ____\u003cstrong\u003e\u003cem\u003e[people]\u003c/em\u003e\u003c/strong\u003e______\u003cbr\u003e\nin order to serve ____\u003cstrong\u003e\u003cem\u003e[products]\u003c/em\u003e\u003c/strong\u003e____\u003cbr\u003e\nproducts and experiences.\u003c/p\u003e\n\u003c/blockquote\u003e\n\n\u003ch1\u003e\n  \u003ca name=\"to-infinity-and-beyond\" href=\"#to-infinity-and-beyond\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  To infinity and beyond\n\u003c/h1\u003e\n\n\u003cp\u003eAs the design system grows and evolves it enables us to work in interesting and new ways. \u003c/p\u003e\n\n\u003ch2\u003e\n  \u003ca name=\"giving-back\" href=\"#giving-back\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  Giving Back\n\u003c/h2\u003e\n\n\u003cp\u003eOne great thing about a design system is that it can live out in the open. It's a great way to represent your Product/Engineering brand and give back to the community. \u003c/p\u003e\n\n\u003ch2\u003e\n  \u003ca name=\"designops\" href=\"#designops\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  DesignOps\n\u003c/h2\u003e\n\n\u003cp\u003eDesignOps (also called div-ops!), much like DevOps, is a fast-growing field. A design system is the first step in implementing a DesignOps team.\u003c/p\u003e\n\n\u003cp\u003e\u003ca href=\"https://clearleft.com/posts/design-ops-a-new-discipline\"\u003ehttps://clearleft.com/posts/design-ops-a-new-discipline\u003c/a\u003e\u003c/p\u003e\n\n\u003ch2\u003e\n  \u003ca name=\"full-stack-design-systems\" href=\"#full-stack-design-systems\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  Full Stack Design systems\n\u003c/h2\u003e\n\n\u003cblockquote\u003e\n\u003cp\u003eWhen you’re creating a bespoke Design System for a specific product, you have the opportunity to not just group common UI elements together, but to actually represent your core product concepts at many levels. I call this a \u003cstrong\u003eFull Stack Design System.\u003c/strong\u003e\u003cbr\u003e\n\u003ca href=\"https://www.intercom.com/blog/the-full-stack-design-system/\"\u003e[Link]\u003c/a\u003e\u003c/p\u003e\n\u003c/blockquote\u003e\n\n\u003ch1\u003e\n  \u003ca name=\"tips\" href=\"#tips\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  Tips\n\u003c/h1\u003e\n\n\u003ch3\u003e\n  \u003ca name=\"any-design-system-is-better-than-no-design-system-at-all\" href=\"#any-design-system-is-better-than-no-design-system-at-all\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  Any design system is better than no design system at all.\n\u003c/h3\u003e\n\n\u003cp\u003eGet something built sooner, rather than later.\u003c/p\u003e\n\n\u003cblockquote\u003e\n\u003cp\u003eGitHub’s design system, Primer, was being revamped internally and privately. Doing so, Diana said, was in part because her team faced Imposter Syndrome comparing Primer to the systems of matured and larger organizations like AirBnb’s DLS, Shopify’s Polaris, and the US Web Design System. Primer felt unpolished in comparison. Many components were deprecated.\u003cbr\u003e\n\u003cstrong\u003e\u003ca href=\"https://medium.com/tradecraft-traction/eight-things-you-need-to-know-about-design-systems-bae8bd884b3b\"\u003e[Link]\u003c/a\u003e\u003c/strong\u003e\u003c/p\u003e\n\u003c/blockquote\u003e\n\n\u003ch3\u003e\n  \u003ca name=\"build-systems-not-pages\" href=\"#build-systems-not-pages\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  Build systems, not pages\n\u003c/h3\u003e\n\n\u003cp\u003eThe web is massive and diverse - it is no longer enough to build webpages. Instead, we need to think about responsive and adaptive design made up of components.\u003c/p\u003e\n\n\u003cp\u003e\u003ca href=\"http://www.atomicdesign.bradfrost.com/chapter-1/\"\u003ehttp://www.atomicdesign.bradfrost.com/chapter-1/\u003c/a\u003e\u003c/p\u003e\n\n\u003ch3\u003e\n  \u003ca name=\"pay-attention-to-the-teams-limits\" href=\"#pay-attention-to-the-teams-limits\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  Pay attention to the team's limits\n\u003c/h3\u003e\n\n\u003cp\u003eWe can't build a design system in a day, a sprint, or a quarter. Even starting with just a sketch file that makes the creation of new features and pages consistent is a good base. \u003c/p\u003e\n\n\u003ch3\u003e\n  \u003ca name=\"organization-is-key\" href=\"#organization-is-key\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  Organization is key\n\u003c/h3\u003e\n\n\u003cp\u003eAvoid \"quick and dirty\", you'll only bite yourself later. Make sure people know what is happening and get input from everyone that might touch the system. The worst possible timeline is some people using the design system and others not using it.\u003c/p\u003e\n\n\u003ch3\u003e\n  \u003ca name=\"have-a-single-source-of-truth\" href=\"#have-a-single-source-of-truth\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  Have a single source of truth\n\u003c/h3\u003e\n\n\u003cp\u003eHave a sharable Sketch library and component library that everyone uses while working on the design system.\u003c/p\u003e\n\n\u003ch1\u003e\n  \u003ca name=\"links-amp-tools\" href=\"#links-amp-tools\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  Links \u0026amp; Tools\n\u003c/h1\u003e\n\n\u003cul\u003e\n\u003cli\u003e\n\u003ca href=\"https://www.abstract.com/blog/category/customer-stories/\"\u003eAbstract's Customer Stories\u003c/a\u003e - Stories from Abstract's customers, who are using Abstract to build collaborative design systems\u003c/li\u003e\n\u003cli\u003e\n\u003ca href=\"https://www.designsystems.com/\"\u003eDesign Systems\u003c/a\u003e - A Figma publication for design systems\u003c/li\u003e\n\u003cli\u003e\n\u003ca href=\"https://medium.com/eightshapes-llc/getting-developers-started-with-a-design-system-d814fd390389\"\u003eGetting Developers Started with a Design System\u003c/a\u003e - A good article on ramping developers into a design system.\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://designsystemsrepo.com/tools/\"\u003eDesign Systems Repo\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://www.invisionapp.com/inside-design/getting-executive-ok-design-system/\"\u003eGetting executive buy-in for your design system | Inside Design Blog\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://medium.com/eightshapes-llc/picking-parts-products-people-a06721e81742\"\u003ePicking Parts, Products \u0026amp; People - EightShapes - Medium\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://abc.useallfive.com/?ref=producthunt\"\u003eAccessible Brand Colors\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://www.goabstract.com/\"\u003eSketch version control \u0026amp; design workflow management - Abstract\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\n","social_image":null,"body_markdown":"---\ntitle: Design Systems 101\npublished: true\ncover_image: https://imgur.com/mkcG5lz.png\ndescription: Just what the heck is a design system?\ntags: design systems, learning, beginner\n---\n\n\u003cfigure\u003e\n![](https://i.imgur.com/8jtaN4C.gif)\n\u003cfigcaption\u003e\nHow a design system speeds up page design\n\u003c/figcaption\u003e\n\u003c/figure\u003e\n\n# What the heck is a design system?\n\nLet's start out with a couple quotes to set the mood:\n\n\u003e A design system’s purpose is to provide consistent, tested and reusable solutions for a common UX problem.\n\u003e [*Mina Markham*](https://medium.com/git-out-the-vote/pantsuit-the-hillary-clinton-ui-pattern-library-238e9bf06b54#.c6rnwv18f)\n\n---\n\n\u003e A style guide is an artifact of the design process. A design system is a living, funded product with a roadmap \u0026 backlog, serving an ecosystem.\n\u003e [*Nathan Curtis*](https://articles.uie.com/a-design-system-isnt-a-project-its-a-product-serving-products/)\n\n## So what is a design system?\n\n![A design system is...](https://imgur.com/MBiECbM.png)\n\nWell, it's not a box of Legos. It's more like the Lego factory.\n\n## People | Tools | Patterns | Guidelines | Values\n\nA good design system is a collaboration between many parts of a business and product. It is a distillation of a companies values and people into a set of guidelines, tools, and patterns that make rapid development easier and enable a team to produce accessible functional tools.\n\nA design system is integrated - it's built into the product and organization/product development process, not merely a style guide you reference\n\nA design system is shared - it’s actually shared and adopted across the organization, in order to cover major part of the product\n\nA design system contains patterns - can be patterns and/or components. \n\nA design system contains principles - there is underlying principles behind the patterns that guide the work\n\n\u003e We think we merely design and build websites and apps. And that’s true  for the most part. After all, that’s what our clients pay us to do, and the products we create are the vehicles that generate money and success for our organizations. It seems natural to focus on the final implementations rather than the underlying system. The live products remain the primary focus of everyone’s attention, while any pattern library exists as an offshoot that simply provides helpful documentation.\n\n## Deliverables\n\n[Shopify](https://polaris.shopify.com/) has a great example of the various deliverables that might be produced from a design system. \n\n![an example of shopify's deliverables](https://imgur.com/OD8p6kX.png)\n\n### Patterns\nRules around accessibility, internationalization, layout patterns, and error messages would all be gathered in the Patterns section.\n**[Example](https://polaris.shopify.com/patterns-and-guides/product-experience-principles#navigation)**\n\n### Content\nRules about website content, blog posts, and documentation all fall into the content portion of the design system. \n**[Example](https://polaris.shopify.com/content/product-content#section-write-for-a-grade-7-reading-level)**\n\n### Style Guide\nRules about design and the creation of visual elements fall into the style guide portion.\n**[Example](https://polaris.shopify.com/design/colors)**\n\n### Code Style\nCode style and formatting, stylelint rules, and CSS patterns are all part of the code style portion of a design system.\n**[Example](https://about.lessonly.engineering/styleguide/css)**\n\n### Component Library\nReusable components like buttons, form fields, and grids make are part of the component library.\n**[Example](https://polaris.shopify.com/components/forms/autocomplete#navigation)**\n\n---\n\n# Benefits of a design system:\n\n- **Design systems bring order to chaos.** Everyone is kept on the same page, so the entire product remains consistent and polished throughout.\n- **Design systems improve the user experience through the repeated use of familiar and proven patterns.** Designing anything from scratch leaves room for error, so try to use what already works.\n- **Design systems improve workflow efficiency.** Product teams know exactly how components of new features should look and how to implement them.\n\n#Building a design system\n\n![a visual representation of a design SYSTEM](https://imgur.com/2VLKmFj.png)\n\n## Questions to ask\n\n- How does the system work today and in the future?\n- What is our vision?\n- What problems are we trying to solve?\n- Who does this problem most impact?\n- What impact do we want a design system to have on how we work?\n\n## Building on a smaller team\n\n### 1. Don't start from scratch\n\n\"Steal like an artist\", where you can. There are lots of open design systems out there that we can borrow from. Additionally, there are lots of good tools that we can use. \n\nEven things like Bootstrap can be useful to steal from - we can find common patterns that many web-apps use and build reusable components to build them out for our companies.\n\n### 2. [UX/UI Audit](https://www.invisionapp.com/inside-design/guide-to-effective-ux-audit/)\n\nWe can't know where we are going until we know where we are and where we have been. Before starting, get an idea of where you are, what pages you have, what components they use, and what makes sense to abstract into a design system.\n\n### 3. Build a living document\n\nA design system is a living breathing collaboration between designers and developers. As such, it can and should grow and evolve - which means getting started and letting it change/evolve.\n\nSome ideas of sections:\n\n1. Colors\n2. Typography\n3. Sizing/Spacing\n4. Imagery\n\n### 4. Build a component library and document it\n\nOnce the audit is done, begin to build out a component library. For each component, include documentation and standards. Remember that when *not* to use a component is just as important as when you should use it.\n\n## Quick Activity for getting started\n\n\u003e Our design system offers _______[kit scope]_______\n\u003e released as _______[kit outputs]_____\n\u003e and documented at _______[kit doc site]_____\n\u003e produced by _______[people]_________\n\u003e in order to serve _______[products]_______\n\u003e products and experiences.\n\n# To infinity and beyond\n\nAs the design system grows and evolves it enables us to work in interesting and new ways. \n\n## Giving Back\n\nOne great thing about a design system is that it can live out in the open. It's a great way to represent your Product/Engineering brand and give back to the community. \n\n## DesignOps\n\nDesignOps (also called div-ops!), much like DevOps, is a fast-growing field. A design system is the first step in implementing a DesignOps team.\n\n[https://clearleft.com/posts/design-ops-a-new-discipline](https://clearleft.com/posts/design-ops-a-new-discipline)\n\n## Full Stack Design systems\n\n\u003e When you’re creating a bespoke Design System for a specific product, you have the opportunity to not just group common UI elements together, but to actually represent your core product concepts at many levels. I call this a **Full Stack Design System.**\n[[Link]](https://www.intercom.com/blog/the-full-stack-design-system/)\n\n# Tips\n\n### Any design system is better than no design system at all.\n\nGet something built sooner, rather than later.\n\n\u003e GitHub’s design system, Primer, was being revamped internally and privately. Doing so, Diana said, was in part because her team faced Imposter Syndrome comparing Primer to the systems of matured and larger organizations like AirBnb’s DLS, Shopify’s Polaris, and the US Web Design System. Primer felt unpolished in comparison. Many components were deprecated.\n**[[Link]](https://medium.com/tradecraft-traction/eight-things-you-need-to-know-about-design-systems-bae8bd884b3b)**\n\n### Build systems, not pages\n\nThe web is massive and diverse - it is no longer enough to build webpages. Instead, we need to think about responsive and adaptive design made up of components.\n\n[http://www.atomicdesign.bradfrost.com/chapter-1/](http://www.atomicdesign.bradfrost.com/chapter-1/)\n\n### Pay attention to the team's limits\n\nWe can't build a design system in a day, a sprint, or a quarter. Even starting with just a sketch file that makes the creation of new features and pages consistent is a good base. \n\n### Organization is key\n\nAvoid \"quick and dirty\", you'll only bite yourself later. Make sure people know what is happening and get input from everyone that might touch the system. The worst possible timeline is some people using the design system and others not using it.\n\n### Have a single source of truth\n\nHave a sharable Sketch library and component library that everyone uses while working on the design system.\n\n# Links \u0026 Tools\n\n- [Abstract's Customer Stories](https://www.abstract.com/blog/category/customer-stories/) - Stories from Abstract's customers, who are using Abstract to build collaborative design systems\n- [Design Systems](https://www.designsystems.com/) - A Figma publication for design systems\n- [Getting Developers Started with a Design System](https://medium.com/eightshapes-llc/getting-developers-started-with-a-design-system-d814fd390389) - A good article on ramping developers into a design system.\n- [Design Systems Repo](https://designsystemsrepo.com/tools/)\n- [Getting executive buy-in for your design system | Inside Design Blog](https://www.invisionapp.com/inside-design/getting-executive-ok-design-system/)\n- [Picking Parts, Products \u0026 People - EightShapes - Medium](https://medium.com/eightshapes-llc/picking-parts-products-people-a06721e81742)\n- [Accessible Brand Colors](https://abc.useallfive.com/?ref=producthunt)\n- [Sketch version control \u0026 design workflow management - Abstract](https://www.goabstract.com/)\n","canonical_url":null,"show_comments":true,"main_image_background_hex_color":"#dddddd","published_from_feed":false,"comments_count":0,"video":null,"video_code":null,"video_source_url":null,"video_thumbnail_url":null,"video_closed_caption_track_url":null,"feed_source_url":null,"edited_at":null,"crossposted_at":null,"language":"en","cached_tag_list":"designsystems, learning, beginners","path":"/wuz/design-systems-101-1ogo","cached_user_name":"Conlin Durbin","cached_user_username":"wuz","last_comment_at":"2020-04-01T14:12:55.044Z","public_reactions_count":16},{"title":"Build Something That Makes a Difference ","slug":"build-something-that-makes-a-difference-1h6k","created_at":"2020-02-05T18:30:03.354Z","main_image":"https://i.imgur.com/85LiQLt.jpg","description":"My experience at Codeland - a conference for new and growing developers","published":true,"published_at":"2020-05-13T19:36:50.591Z","processed_html":"\u003cblockquote\u003e\n\u003cp\u003eThis was a post I wrote almost a year ago. I just now am getting around to sharing it.\u003cbr\u003e\nIf you didn't know, Codeland is online this year! \u003ca href=\"https://codelandconf.com/\"\u003eCheck it out!\u003c/a\u003e\u003c/p\u003e\n\u003c/blockquote\u003e\n\n\u003cp\u003eI’m back from Codeland, and I’ve had some time to sleep and decompress. I had an inspiring and fulfilling weekend in NYC.\u003c/p\u003e\n\n\u003cp\u003eI spent 5 days in NYC and had an absolutely fantastic time. I explored the city - hanging out with some old friends and making some great new ones.\u003c/p\u003e\n\n\u003cp\u003eThe conference, Codeland, was an exceptional experience! I met so many great people and heard talks that inspired and encouraged me.\u003c/p\u003e\n\n\u003cp\u003eThe morning started out with some talks. Luna Malbroux gave a lively introduction to EquiTable, a bill-splitting app born out of a comedy code jam. The app illustrates the intersection of comedy, technology, and inclusion. One of the big takeaways for me was that we are obligated to build inclusivity into the tools we work on. Her jokes had the crowd roaring and really hit home that this conference was going to be something different.\u003c/p\u003e\n\n\u003cp\u003ePedro Cruz gave an incredible talk on his work using drones to aid the victims of natural disasters. That talk reminded me that there are incredible things that we can be doing with technology. Unless we work to experience the wider world community, we can’t make those things inclusive and innovative.\u003c/p\u003e\n\n\u003cp\u003eAfter this, I jumped to my workshop, where I met some great devs from the Midwest and hacked on an IoT chip. I haven’t done hardware related stuff in a while, and I really enjoyed it! From there, it was off to lunch and into the next set of talks.\u003c/p\u003e\n\n\u003cp\u003eThe second set of talks kicked off with Ali Spittel, who discussed why developers should think about blogging. Her journey started last year when she began writing blog posts to help her learn new things. One of the best ways to give back to the development community is to write.\u003c/p\u003e\n\n\u003cp\u003eUp next, Omayeli Arenyeka gave a talk on building a gendered dictionary. The talk was pretty technical, covering where she got her data and how she merged it all together. The end result was a dictionary that showed which words in the English language are gendered - things like king and queen. The dictionary lives online and is an incredible look into how our language shapes our thoughts. Why do we often think that “doctor” is a “male” word? What would our world be like if we started thinking and communicating without gendered language?\u003c/p\u003e\n\n\u003cp\u003eMichael Winslow gave a fascinating talk on the challenge of programming a cross-fade. There are tons of implications to consider when fading out one song and fading in another. This talk was technical, fun, and inspiring. There are so many interesting problems out there that we could solve with technology if we give it a shot.\u003c/p\u003e\n\n\u003cp\u003eArt Meets Algorithms, given by Kristen Webster, was a fascinating look at how we can use computers to create art that would be impossible for a human to create by hand. Algorithms have an inherent structure and beauty to them, which we can use to create fascinating art.\u003c/p\u003e\n\n\u003cp\u003eThe last talk in this set was from Jo-Wayne Josephs, who spoke about her experience as an LGBTQ+ immigrant to the US. She shared her story of coming to the US, trying to find work while waiting for asylum, and finally being granted asylum here. It’s unbelievable all the things immigrants have to go through to live, work, and improve themselves here. One major takeaway I had from this is that a functional diversity and inclusion program should include resources for people looking for asylum or citizenship. There are tons of great organizations out there and even just having a list of the ones that might be helpful is a significant first step.\u003c/p\u003e\n\n\u003cp\u003eWe had a break here, where we met with the conference sponsors. I met some inspiring folks from Github, and a company called Raise.dev, who are creating an impressive way to help new developers work on real projects and learn real-world development skills.\u003c/p\u003e\n\n\u003cp\u003eFinally, we all came back into the theatre to hear a talk from Scott Hanselman about building an artificial pancreas. There were some incredible technical pieces to this talk - from Bluetooth and radio communications to building applications to help monitor glucose levels. However, to me, the most critical part of the talk was how it inspired developers to find something that seems set or unchangeable and use technology to change it. The proprietary technology that powers glucose monitors doesn’t speak to the technology that powers insulin pumps, so some intrepid hackers made a device that bridges that gap. There are so many problems out there that could be improved with technology.\u003c/p\u003e\n\n\u003cp\u003eI think my favorite takeaway from the conference was a joke line from Michael Winslow’s talk on building cross-fade technology. In talking about being a DJ and channeling a bit of Uncle Ben, he said, \u003cstrong\u003e“With great volume, comes great responsibility.”\u003c/strong\u003e \u003cbr\u003e\nI know what was meant by this line at the time, but I think it sums up the conference better than I ever could. In the world of tech, we tend to forget just how much volume we have. When Facebook “moves fast and breaks things,” they do so at the expense of those unable to be broken. When we limit our intake of immigrants through draconian immigration law, we miss out on the incredible people that want to make our country better. We exist in a noisy industry, and we have a responsibility to use that volume in the right way.\u003c/p\u003e\n\n","social_image":null,"body_markdown":"---\ntitle: Build Something That Makes a Difference \npublished: true\ndescription: My experience at Codeland - a conference for new and growing developers\ntags: codeland, general\ncover_image: https://i.imgur.com/85LiQLt.jpg\n---\n\n\u003e This was a post I wrote almost a year ago. I just now am getting around to sharing it.\n\u003e If you didn't know, Codeland is online this year! [Check it out!](https://codelandconf.com/)\n\nI’m back from Codeland, and I’ve had some time to sleep and decompress. I had an inspiring and fulfilling weekend in NYC.\n\nI spent 5 days in NYC and had an absolutely fantastic time. I explored the city - hanging out with some old friends and making some great new ones.\n\nThe conference, Codeland, was an exceptional experience! I met so many great people and heard talks that inspired and encouraged me.\n\nThe morning started out with some talks. Luna Malbroux gave a lively introduction to EquiTable, a bill-splitting app born out of a comedy code jam. The app illustrates the intersection of comedy, technology, and inclusion. One of the big takeaways for me was that we are obligated to build inclusivity into the tools we work on. Her jokes had the crowd roaring and really hit home that this conference was going to be something different.\n\nPedro Cruz gave an incredible talk on his work using drones to aid the victims of natural disasters. That talk reminded me that there are incredible things that we can be doing with technology. Unless we work to experience the wider world community, we can’t make those things inclusive and innovative.\n\nAfter this, I jumped to my workshop, where I met some great devs from the Midwest and hacked on an IoT chip. I haven’t done hardware related stuff in a while, and I really enjoyed it! From there, it was off to lunch and into the next set of talks.\n\nThe second set of talks kicked off with Ali Spittel, who discussed why developers should think about blogging. Her journey started last year when she began writing blog posts to help her learn new things. One of the best ways to give back to the development community is to write.\n\nUp next, Omayeli Arenyeka gave a talk on building a gendered dictionary. The talk was pretty technical, covering where she got her data and how she merged it all together. The end result was a dictionary that showed which words in the English language are gendered - things like king and queen. The dictionary lives online and is an incredible look into how our language shapes our thoughts. Why do we often think that “doctor” is a “male” word? What would our world be like if we started thinking and communicating without gendered language?\n\nMichael Winslow gave a fascinating talk on the challenge of programming a cross-fade. There are tons of implications to consider when fading out one song and fading in another. This talk was technical, fun, and inspiring. There are so many interesting problems out there that we could solve with technology if we give it a shot.\n\nArt Meets Algorithms, given by Kristen Webster, was a fascinating look at how we can use computers to create art that would be impossible for a human to create by hand. Algorithms have an inherent structure and beauty to them, which we can use to create fascinating art.\n\nThe last talk in this set was from Jo-Wayne Josephs, who spoke about her experience as an LGBTQ+ immigrant to the US. She shared her story of coming to the US, trying to find work while waiting for asylum, and finally being granted asylum here. It’s unbelievable all the things immigrants have to go through to live, work, and improve themselves here. One major takeaway I had from this is that a functional diversity and inclusion program should include resources for people looking for asylum or citizenship. There are tons of great organizations out there and even just having a list of the ones that might be helpful is a significant first step.\n\nWe had a break here, where we met with the conference sponsors. I met some inspiring folks from Github, and a company called Raise.dev, who are creating an impressive way to help new developers work on real projects and learn real-world development skills.\n\nFinally, we all came back into the theatre to hear a talk from Scott Hanselman about building an artificial pancreas. There were some incredible technical pieces to this talk - from Bluetooth and radio communications to building applications to help monitor glucose levels. However, to me, the most critical part of the talk was how it inspired developers to find something that seems set or unchangeable and use technology to change it. The proprietary technology that powers glucose monitors doesn’t speak to the technology that powers insulin pumps, so some intrepid hackers made a device that bridges that gap. There are so many problems out there that could be improved with technology.\n\nI think my favorite takeaway from the conference was a joke line from Michael Winslow’s talk on building cross-fade technology. In talking about being a DJ and channeling a bit of Uncle Ben, he said, **“With great volume, comes great responsibility.”** \nI know what was meant by this line at the time, but I think it sums up the conference better than I ever could. In the world of tech, we tend to forget just how much volume we have. When Facebook “moves fast and breaks things,” they do so at the expense of those unable to be broken. When we limit our intake of immigrants through draconian immigration law, we miss out on the incredible people that want to make our country better. We exist in a noisy industry, and we have a responsibility to use that volume in the right way.","canonical_url":null,"show_comments":true,"main_image_background_hex_color":"#dddddd","published_from_feed":false,"comments_count":1,"video":null,"video_code":null,"video_source_url":null,"video_thumbnail_url":null,"video_closed_caption_track_url":null,"feed_source_url":null,"edited_at":null,"crossposted_at":null,"language":"en","cached_tag_list":"codeland, general","path":"/wuz/build-something-that-makes-a-difference-1h6k","cached_user_name":"Conlin Durbin","cached_user_username":"wuz","last_comment_at":"2020-05-15T13:46:49.117Z","public_reactions_count":17},{"title":"Cantrip - ","slug":"cantrip-31ha-temp-slug-3596542","created_at":"2020-03-31T18:24:05.629Z","main_image":null,"description":"A post by Conlin Durbin","published":false,"published_at":null,"processed_html":"\u003c!DOCTYPE html PUBLIC \"-//W3C//DTD HTML 4.0 Transitional//EN\" \"http://www.w3.org/TR/REC-html40/loose.dtd\"\u003e\n\n","social_image":null,"body_markdown":"","canonical_url":null,"show_comments":true,"main_image_background_hex_color":"#dddddd","published_from_feed":false,"comments_count":0,"video":null,"video_code":null,"video_source_url":null,"video_thumbnail_url":null,"video_closed_caption_track_url":null,"feed_source_url":null,"edited_at":null,"crossposted_at":null,"language":null,"cached_tag_list":"","path":"/wuz/cantrip-31ha-temp-slug-3596542","cached_user_name":"Conlin Durbin","cached_user_username":"wuz","last_comment_at":"2017-01-01T05:00:00.000Z","public_reactions_count":0},{"title":"Supercharge your Touchbar with MTMR","slug":"supercharge-your-touchbar-with-mtmr-cb-temp-slug-2086881","created_at":"2020-05-17T20:08:15.063Z","main_image":null,"description":"If you're like me, you've probably been pretty meh on the Touchbar on the newer Macs. The base config...","published":false,"published_at":null,"processed_html":"\u003cp\u003eIf you're like me, you've probably been pretty \u003cem\u003emeh\u003c/em\u003e on the Touchbar on the newer Macs. The base config is \u003cem\u003eok\u003c/em\u003e and the dynamic layers can be useful, but most of the time are just repetitions of controls from the window you are already on.\u003c/p\u003e\n\n\u003cp\u003eRecently though, I discovered \u003ca href=\"https://github.com/toxblh/mtmr\"\u003eMTMR (My Touchbar, My Rules)\u003c/a\u003e, an open-source project making the Touchbar extremely customizable and easy to edit.\u003c/p\u003e\n\n\u003ch2\u003e\n  \u003ca name=\"what-is-it\" href=\"#what-is-it\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  What is it?\n\u003c/h2\u003e\n\n\u003cp\u003eMTMR lets you override your Touchbar using a JSON file to add custom buttons, dynamic information, and special widgets (like a dock!).\u003c/p\u003e\n\n\u003ch2\u003e\n  \u003ca name=\"how-to-install\" href=\"#how-to-install\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  How to install\n\u003c/h2\u003e\n\n\u003cp\u003eIt's easy to install and get started with! \u003cbr\u003e\nIf you're using brew and cask, it's as easy as running:\u003c/p\u003e\n\n\u003cp\u003e\u003ccode\u003ebrew cask install mtmr\u003c/code\u003e\u003c/p\u003e\n\n\u003cp\u003eIf you're not using brew, check out this medium post for instructions:\u003c/p\u003e\n\n\n\u003cdiv class=\"ltag__link\"\u003e\n  \u003ca href=\"https://medium.com/@urdigitalpulse/customise-your-macbook-pro-touch-bar-966998e606b5\" class=\"ltag__link__link\"\u003e\n    \u003cdiv class=\"ltag__link__pic\"\u003e\n      \u003cimg src=\"https://res.cloudinary.com/practicaldev/image/fetch/s--SkHuXjig--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://miro.medium.com/fit/c/96/96/1%2ARjEejMGyuSWJ_rm7gTaV0A.jpeg\" alt=\"Dario Prski\" loading=\"lazy\"\u003e\n    \u003c/div\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://medium.com/@urdigitalpulse/customise-your-macbook-pro-touch-bar-966998e606b5\" class=\"ltag__link__link\"\u003e\n    \u003cdiv class=\"ltag__link__content\"\u003e\n      \u003ch2\u003eCustomize your MacBook Pro Touch Bar - Dario Prski - Medium\u003c/h2\u003e\n      \u003ch3\u003eDario Prski ・ \u003ctime datetime=\"2019-03-05T11:34:39.433Z\"\u003eMar 5, 2019\u003c/time\u003e ・ 7 min read\n      \u003cdiv class=\"ltag__link__servicename\"\u003e\n        \u003cimg src=\"https://res.cloudinary.com/practicaldev/image/fetch/s--KBvj_QRD--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://practicaldev-herokuapp-com.freetls.fastly.net/assets/medium_icon-90d5232a5da2369849f285fa499c8005e750a788fdbf34f5844d5f2201aae736.svg\" alt=\"Medium Logo\" aria-label=\"Medium Logo\" loading=\"lazy\"\u003e\n        Medium\n      \u003c/div\u003e\n    \u003c/h3\u003e\n\u003c/div\u003e\n  \u003c/a\u003e\n\u003c/div\u003e\n\n\n\u003ch2\u003e\n  \u003ca name=\"adding-widgets\" href=\"#adding-widgets\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  Adding Widgets\n\u003c/h2\u003e\n\n\u003cp\u003eOnce you have in intalled, it's time to start adding to your config. There are \u003cem\u003etons\u003c/em\u003e of options related to this, but I'll list out a few of my favorites below. Check out the \u003ca href=\"https://github.com/Toxblh/MTMR-presets\"\u003eMTMR-presets\u003c/a\u003e repo for more examples!\u003c/p\u003e\n\n\u003cp\u003eOpen up \u003ccode\u003e~/Library/Application\\ Support/MTMR/items.json\u003c/code\u003e and we can start adding widgets!\u003c/p\u003e\n\n\u003cblockquote\u003e\n\u003cp\u003e\u003cem\u003eNote:\u003c/em\u003e A few of these widgets use a binary called \"__type\", which let's you type characters through the Mac's accessiblity features. You can download the binary from my Sourcehut \u003ca href=\"https://git.sr.ht/~wuz/.files/tree/master/bin/__type\"\u003ehere\u003c/a\u003e, then just make sure you have \u003c/p\u003e\n\u003c/blockquote\u003e\n\n\u003ch3\u003e\n  \u003ca name=\"kaomoji-toolbar-%E2%98%9E%EF%BE%9F%E3%83%AE%EF%BE%9F%E2%98%9E\" href=\"#kaomoji-toolbar-%E2%98%9E%EF%BE%9F%E3%83%AE%EF%BE%9F%E2%98%9E\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  Kaomoji toolbar (☞゚ヮ゚)☞\n\u003c/h3\u003e\n\n\u003cp\u003eI like to be able to type fun Kaomoji quickly, but a whole app for that seemed like overkill. Instead, I keep a group of Kaomoji buttons that type themselves out when you hit the button.\u003c/p\u003e\n\n\u003cp\u003e\u003ca href=\"https://res.cloudinary.com/practicaldev/image/fetch/s--HdnW9RoW--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/kz8v9npgho6cb7ttiapg.png\" class=\"article-body-image-wrapper\"\u003e\u003cimg src=\"https://res.cloudinary.com/practicaldev/image/fetch/s--HdnW9RoW--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/kz8v9npgho6cb7ttiapg.png\" alt=\"Kaomoji toolbar screenshot\" loading=\"lazy\"\u003e\u003c/a\u003e\u003cbr\u003e\n\u003c/p\u003e\n\n\u003cdiv class=\"highlight\"\u003e\u003cpre class=\"highlight json\"\u003e\u003ccode\u003e\u003cspan class=\"p\"\u003e{\u003c/span\u003e\u003cspan class=\"w\"\u003e\n    \u003c/span\u003e\u003cspan class=\"nl\"\u003e\"type\"\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"s2\"\u003e\"group\"\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e\u003cspan class=\"w\"\u003e\n    \u003c/span\u003e\u003cspan class=\"nl\"\u003e\"align\"\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"s2\"\u003e\"left\"\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e\u003cspan class=\"w\"\u003e\n    \u003c/span\u003e\u003cspan class=\"nl\"\u003e\"bordered\"\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"kc\"\u003etrue\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e\u003cspan class=\"w\"\u003e\n    \u003c/span\u003e\u003cspan class=\"nl\"\u003e\"title\"\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"s2\"\u003e\"♥(ˆ⌣ˆԅ)\"\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e\u003cspan class=\"w\"\u003e\n    \u003c/span\u003e\u003cspan class=\"nl\"\u003e\"items\"\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"p\"\u003e[\u003c/span\u003e\u003cspan class=\"w\"\u003e\n      \u003c/span\u003e\u003cspan class=\"p\"\u003e{\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"nl\"\u003e\"type\"\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"s2\"\u003e\"close\"\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"nl\"\u003e\"bordered\"\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"kc\"\u003efalse\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"nl\"\u003e\"align\"\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"s2\"\u003e\"left\"\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"p\"\u003e},\u003c/span\u003e\u003cspan class=\"w\"\u003e\n      \u003c/span\u003e\u003cspan class=\"p\"\u003e{\u003c/span\u003e\u003cspan class=\"w\"\u003e\n        \u003c/span\u003e\u003cspan class=\"nl\"\u003e\"type\"\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"s2\"\u003e\"staticButton\"\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e\u003cspan class=\"w\"\u003e\n        \u003c/span\u003e\u003cspan class=\"nl\"\u003e\"title\"\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"s2\"\u003e\"(☞゚ヮ゚)☞\"\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e\u003cspan class=\"w\"\u003e\n        \u003c/span\u003e\u003cspan class=\"nl\"\u003e\"align\"\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"s2\"\u003e\"left\"\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e\u003cspan class=\"w\"\u003e\n        \u003c/span\u003e\u003cspan class=\"nl\"\u003e\"action\"\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"s2\"\u003e\"appleScript\"\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e\u003cspan class=\"w\"\u003e\n        \u003c/span\u003e\u003cspan class=\"nl\"\u003e\"actionAppleScript\"\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"p\"\u003e{\u003c/span\u003e\u003cspan class=\"w\"\u003e\n          \u003c/span\u003e\u003cspan class=\"nl\"\u003e\"inline\"\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"s2\"\u003e\"set meme to \u003c/span\u003e\u003cspan class=\"se\"\u003e\\\"\u003c/span\u003e\u003cspan class=\"s2\"\u003e(☞゚ヮ゚)☞\u003c/span\u003e\u003cspan class=\"se\"\u003e\\\"\\r\u003c/span\u003e\u003cspan class=\"s2\"\u003edo shell script \u003c/span\u003e\u003cspan class=\"se\"\u003e\\\"\u003c/span\u003e\u003cspan class=\"s2\"\u003e'LOCATION_OF __type' \u003c/span\u003e\u003cspan class=\"se\"\u003e\\\"\u003c/span\u003e\u003cspan class=\"s2\"\u003e \u0026amp; quoted form of meme\"\u003c/span\u003e\u003cspan class=\"w\"\u003e\n        \u003c/span\u003e\u003cspan class=\"p\"\u003e}\u003c/span\u003e\u003cspan class=\"w\"\u003e\n      \u003c/span\u003e\u003cspan class=\"p\"\u003e},\u003c/span\u003e\u003cspan class=\"w\"\u003e\n      \u003c/span\u003e\u003cspan class=\"p\"\u003e{\u003c/span\u003e\u003cspan class=\"w\"\u003e\n        \u003c/span\u003e\u003cspan class=\"nl\"\u003e\"type\"\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"s2\"\u003e\"staticButton\"\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e\u003cspan class=\"w\"\u003e\n        \u003c/span\u003e\u003cspan class=\"nl\"\u003e\"title\"\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"s2\"\u003e\"♥(ˆ⌣ˆԅ)\"\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e\u003cspan class=\"w\"\u003e\n        \u003c/span\u003e\u003cspan class=\"nl\"\u003e\"align\"\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"s2\"\u003e\"left\"\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e\u003cspan class=\"w\"\u003e\n        \u003c/span\u003e\u003cspan class=\"nl\"\u003e\"action\"\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"s2\"\u003e\"appleScript\"\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e\u003cspan class=\"w\"\u003e\n        \u003c/span\u003e\u003cspan class=\"nl\"\u003e\"actionAppleScript\"\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"p\"\u003e{\u003c/span\u003e\u003cspan class=\"w\"\u003e\n          \u003c/span\u003e\u003cspan class=\"nl\"\u003e\"inline\"\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"s2\"\u003e\"set meme to \u003c/span\u003e\u003cspan class=\"se\"\u003e\\\"\u003c/span\u003e\u003cspan class=\"s2\"\u003e♥(ˆ⌣ˆԅ)\u003c/span\u003e\u003cspan class=\"se\"\u003e\\\"\\r\u003c/span\u003e\u003cspan class=\"s2\"\u003edo shell script \u003c/span\u003e\u003cspan class=\"se\"\u003e\\\"\u003c/span\u003e\u003cspan class=\"s2\"\u003e'LOCATION_OF __type' \u003c/span\u003e\u003cspan class=\"se\"\u003e\\\"\u003c/span\u003e\u003cspan class=\"s2\"\u003e \u0026amp; quoted form of meme\"\u003c/span\u003e\u003cspan class=\"w\"\u003e\n        \u003c/span\u003e\u003cspan class=\"p\"\u003e}\u003c/span\u003e\u003cspan class=\"w\"\u003e\n      \u003c/span\u003e\u003cspan class=\"p\"\u003e},\u003c/span\u003e\u003cspan class=\"w\"\u003e\n      \u003c/span\u003e\u003cspan class=\"p\"\u003e{\u003c/span\u003e\u003cspan class=\"w\"\u003e\n        \u003c/span\u003e\u003cspan class=\"nl\"\u003e\"type\"\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"s2\"\u003e\"staticButton\"\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e\u003cspan class=\"w\"\u003e\n        \u003c/span\u003e\u003cspan class=\"nl\"\u003e\"title\"\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"s2\"\u003e\"(⌐■_■)\"\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e\u003cspan class=\"w\"\u003e\n        \u003c/span\u003e\u003cspan class=\"nl\"\u003e\"align\"\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"s2\"\u003e\"left\"\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e\u003cspan class=\"w\"\u003e\n        \u003c/span\u003e\u003cspan class=\"nl\"\u003e\"action\"\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"s2\"\u003e\"appleScript\"\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e\u003cspan class=\"w\"\u003e\n        \u003c/span\u003e\u003cspan class=\"nl\"\u003e\"actionAppleScript\"\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"p\"\u003e{\u003c/span\u003e\u003cspan class=\"w\"\u003e\n          \u003c/span\u003e\u003cspan class=\"nl\"\u003e\"inline\"\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"s2\"\u003e\"set meme to \u003c/span\u003e\u003cspan class=\"se\"\u003e\\\"\u003c/span\u003e\u003cspan class=\"s2\"\u003e(•_•)  |  ( •_•)\u0026gt;⌐■-■  |  (⌐■_■)\u003c/span\u003e\u003cspan class=\"se\"\u003e\\\"\\r\u003c/span\u003e\u003cspan class=\"s2\"\u003edo shell script \u003c/span\u003e\u003cspan class=\"se\"\u003e\\\"\u003c/span\u003e\u003cspan class=\"s2\"\u003e'LOCATION_OF __type' \u003c/span\u003e\u003cspan class=\"se\"\u003e\\\"\u003c/span\u003e\u003cspan class=\"s2\"\u003e \u0026amp; quoted form of meme\"\u003c/span\u003e\u003cspan class=\"w\"\u003e\n        \u003c/span\u003e\u003cspan class=\"p\"\u003e}\u003c/span\u003e\u003cspan class=\"w\"\u003e\n      \u003c/span\u003e\u003cspan class=\"p\"\u003e}\u003c/span\u003e\u003cspan class=\"w\"\u003e\n    \u003c/span\u003e\u003cspan class=\"p\"\u003e]\u003c/span\u003e\u003cspan class=\"w\"\u003e\n  \u003c/span\u003e\u003cspan class=\"p\"\u003e}\u003c/span\u003e\u003cspan class=\"err\"\u003e,\u003c/span\u003e\u003cspan class=\"w\"\u003e\n\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\n\n\n\n\u003cp\u003eBe sure to replace \u003ccode\u003eLOCATION_OF __type\u003c/code\u003e with the file location of the binary in the note above!\u003c/p\u003e\n\n","social_image":null,"body_markdown":"If you're like me, you've probably been pretty *meh* on the Touchbar on the newer Macs. The base config is *ok* and the dynamic layers can be useful, but most of the time are just repetitions of controls from the window you are already on.\n\nRecently though, I discovered [MTMR (My Touchbar, My Rules)](https://github.com/toxblh/mtmr), an open-source project making the Touchbar extremely customizable and easy to edit.\n\n## What is it?\n\nMTMR lets you override your Touchbar using a JSON file to add custom buttons, dynamic information, and special widgets (like a dock!).\n\n## How to install\n\nIt's easy to install and get started with! \nIf you're using brew and cask, it's as easy as running:\n\n`brew cask install mtmr`\n\nIf you're not using brew, check out this medium post for instructions:\n\n{% medium https://medium.com/@urdigitalpulse/customise-your-macbook-pro-touch-bar-966998e606b5 %}\n\n## Adding Widgets\n\nOnce you have in intalled, it's time to start adding to your config. There are _tons_ of options related to this, but I'll list out a few of my favorites below. Check out the [MTMR-presets](https://github.com/Toxblh/MTMR-presets) repo for more examples!\n\nOpen up `~/Library/Application\\ Support/MTMR/items.json` and we can start adding widgets!\n\n\u003e *Note:* A few of these widgets use a binary called \"__type\", which let's you type characters through the Mac's accessiblity features. You can download the binary from my Sourcehut [here](https://git.sr.ht/~wuz/.files/tree/master/bin/__type), then just make sure you have \n\n### Kaomoji toolbar (☞゚ヮ゚)☞\n\nI like to be able to type fun Kaomoji quickly, but a whole app for that seemed like overkill. Instead, I keep a group of Kaomoji buttons that type themselves out when you hit the button.\n\n![Kaomoji toolbar screenshot](https://dev-to-uploads.s3.amazonaws.com/i/kz8v9npgho6cb7ttiapg.png)\n\n```json\n{\n    \"type\": \"group\",\n    \"align\": \"left\",\n    \"bordered\": true,\n    \"title\": \"♥(ˆ⌣ˆԅ)\",\n    \"items\": [\n      { \"type\": \"close\", \"bordered\": false, \"align\": \"left\" },\n      {\n        \"type\": \"staticButton\",\n        \"title\": \"(☞゚ヮ゚)☞\",\n        \"align\": \"left\",\n        \"action\": \"appleScript\",\n        \"actionAppleScript\": {\n          \"inline\": \"set meme to \\\"(☞゚ヮ゚)☞\\\"\\rdo shell script \\\"'LOCATION_OF __type' \\\" \u0026 quoted form of meme\"\n        }\n      },\n      {\n        \"type\": \"staticButton\",\n        \"title\": \"♥(ˆ⌣ˆԅ)\",\n        \"align\": \"left\",\n        \"action\": \"appleScript\",\n        \"actionAppleScript\": {\n          \"inline\": \"set meme to \\\"♥(ˆ⌣ˆԅ)\\\"\\rdo shell script \\\"'LOCATION_OF __type' \\\" \u0026 quoted form of meme\"\n        }\n      },\n      {\n        \"type\": \"staticButton\",\n        \"title\": \"(⌐■_■)\",\n        \"align\": \"left\",\n        \"action\": \"appleScript\",\n        \"actionAppleScript\": {\n          \"inline\": \"set meme to \\\"(•_•)  |  ( •_•)\u003e⌐■-■  |  (⌐■_■)\\\"\\rdo shell script \\\"'LOCATION_OF __type' \\\" \u0026 quoted form of meme\"\n        }\n      }\n    ]\n  },\n```\n\nBe sure to replace `LOCATION_OF __type` with the file location of the binary in the note above!\n\n","canonical_url":null,"show_comments":true,"main_image_background_hex_color":"#dddddd","published_from_feed":false,"comments_count":0,"video":null,"video_code":null,"video_source_url":null,"video_thumbnail_url":null,"video_closed_caption_track_url":null,"feed_source_url":null,"edited_at":null,"crossposted_at":null,"language":"en","cached_tag_list":"tools","path":"/wuz/supercharge-your-touchbar-with-mtmr-cb-temp-slug-2086881","cached_user_name":"Conlin Durbin","cached_user_username":"wuz","last_comment_at":"2017-01-01T05:00:00.000Z","public_reactions_count":0}]