title
My Code Editor: Atom, Setup & Packages

description
I've gotten this question so much lately that it's time to make a video about it. Let's look at my current favorite code editor, my setup and packages that I use. - - - This video was sponsored by the DevTips Patron Community - https://www.patreon.com/DevTips Listen to Travis' Podcast - http://www.travandlos.com/ Get awesomeness emailed to you every thursday - http://travisneilson.com/notes You should follow DevTips on Twitter - https://twitter.com/DevTipsShow

detail
{'title': 'My Code Editor: Atom, Setup & Packages', 'heatmap': [{'end': 157.729, 'start': 94.419, 'weight': 0.77}, {'end': 496.414, 'start': 477.788, 'weight': 0.718}], 'summary': 'Tutorial provides a comprehensive guide to setting up the atom code editor, covering essential settings, troubleshooting processes, theme installation, and package management, emphasizing the importance of tools usage and demonstrating the value of the pigments package in optimizing project styles.', 'chapters': [{'end': 318.221, 'segs': [{'end': 37.213, 'src': 'embed', 'start': 0.109, 'weight': 6, 'content': [{'end': 1.271, 'text': 'Hello, my name is Travis.', 'start': 0.109, 'duration': 1.162}, {'end': 4.855, 'text': "This is Dev Tips, and today we're getting stupid nerdy.", 'start': 1.511, 'duration': 3.344}, {'end': 10.722, 'text': "You know, I've long held that it doesn't really matter what tools you're using.", 'start': 6.557, 'duration': 4.165}, {'end': 18.492, 'text': 'An expensive paintbrush in the hand of a novice will never be as good as a cheap paintbrush in the hand of a master.', 'start': 11.423, 'duration': 7.069}, {'end': 23.024, 'text': 'So bring your dream weavers, bring your notepad plus pluses.', 'start': 19.201, 'duration': 3.823}, {'end': 26.005, 'text': "It's not the tools you use, it's how you use it.", 'start': 23.224, 'duration': 2.781}, {'end': 28.827, 'text': "And now that we've got that out of the way, let's talk about our tools.", 'start': 26.025, 'duration': 2.802}, {'end': 37.213, 'text': 'A few of you have asked, a few of you have asked me about, okay, no, just wait, wait for me to do it, okay.', 'start': 29.027, 'duration': 8.186}], 'summary': 'Tools matter less than skill. focus on mastery, not expensive tools.', 'duration': 37.104, 'max_score': 0.109, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hPC6keUUiTA/pics/hPC6keUUiTA109.jpg'}, {'end': 161.21, 'src': 'heatmap', 'start': 78.53, 'weight': 0, 'content': [{'end': 80.171, 'text': 'Also, if you have some time, watch this video.', 'start': 78.53, 'duration': 1.641}, {'end': 83.273, 'text': "It's particularly funny and quick humored.", 'start': 80.211, 'duration': 3.062}, {'end': 84.393, 'text': "All right, it's downloaded.", 'start': 83.453, 'duration': 0.94}, {'end': 88.676, 'text': "Now I'm just going to drag that Adam into my applications folder and launch Adam.", 'start': 84.413, 'duration': 4.263}, {'end': 90.177, 'text': 'Cool We get the welcome screen here.', 'start': 88.756, 'duration': 1.421}, {'end': 93.939, 'text': 'And now what I want to do is go through and talk about how I set up Adam.', 'start': 90.317, 'duration': 3.622}, {'end': 98.981, 'text': "So let me just open a project that we've used before sites.", 'start': 94.419, 'duration': 4.562}, {'end': 100.923, 'text': "Here's designing code.", 'start': 99.882, 'duration': 1.041}, {'end': 107.555, 'text': "So we've got our project here on the left and You should read these welcomes.", 'start': 102.043, 'duration': 5.512}, {'end': 109.356, 'text': "They're particularly helpful.", 'start': 107.836, 'duration': 1.52}, {'end': 110.737, 'text': 'I want to start with the settings.', 'start': 109.516, 'duration': 1.221}, {'end': 113.597, 'text': "So I'm going to hit Command, comma, and we're going to get the settings.", 'start': 110.757, 'duration': 2.84}, {'end': 117.399, 'text': "The first thing I do is I'm going to use the font that I want to use.", 'start': 113.918, 'duration': 3.481}, {'end': 118.339, 'text': "I don't know.", 'start': 117.959, 'duration': 0.38}, {'end': 121.36, 'text': 'I think the default is Monaco, which is a good one.', 'start': 118.359, 'duration': 3.001}, {'end': 127.142, 'text': "What I've been using lately is Roboto Mono.", 'start': 124.041, 'duration': 3.101}, {'end': 128.88, 'text': 'which is nice.', 'start': 128.359, 'duration': 0.521}, {'end': 129.539, 'text': 'I like that one.', 'start': 129.02, 'duration': 0.519}, {'end': 132.083, 'text': 'I use 16 for the default font size.', 'start': 129.66, 'duration': 2.423}, {'end': 133.024, 'text': "It's a little bit bigger.", 'start': 132.163, 'duration': 0.861}, {'end': 134.986, 'text': 'Let me show you here in assets.', 'start': 133.064, 'duration': 1.922}, {'end': 144.115, 'text': "Let's open functions and split left.", 'start': 135.246, 'duration': 8.869}, {'end': 147.138, 'text': "So now that I've split this, you'll see it live update.", 'start': 144.856, 'duration': 2.282}, {'end': 149.986, 'text': 'So the default is 14.', 'start': 147.178, 'duration': 2.808}, {'end': 153.907, 'text': "And then I just changed it to 16 because it's a little bit more comfortable for me to read.", 'start': 149.986, 'duration': 3.921}, {'end': 155.388, 'text': "And it's definitely easier for you guys to see.", 'start': 153.987, 'duration': 1.401}, {'end': 157.729, 'text': "In fact, when I'm doing the videos, I'll, I'll bump this up.", 'start': 155.428, 'duration': 2.301}, {'end': 161.21, 'text': "But when I'm coding, um, 16 is nice.", 'start': 157.869, 'duration': 3.341}], 'summary': 'Demonstration of setting up adam with roboto mono font at 16pt for better visibility and comfort.', 'duration': 82.68, 'max_score': 78.53, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hPC6keUUiTA/pics/hPC6keUUiTA78530.jpg'}, {'end': 153.907, 'src': 'embed', 'start': 124.041, 'weight': 1, 'content': [{'end': 127.142, 'text': "What I've been using lately is Roboto Mono.", 'start': 124.041, 'duration': 3.101}, {'end': 128.88, 'text': 'which is nice.', 'start': 128.359, 'duration': 0.521}, {'end': 129.539, 'text': 'I like that one.', 'start': 129.02, 'duration': 0.519}, {'end': 132.083, 'text': 'I use 16 for the default font size.', 'start': 129.66, 'duration': 2.423}, {'end': 133.024, 'text': "It's a little bit bigger.", 'start': 132.163, 'duration': 0.861}, {'end': 134.986, 'text': 'Let me show you here in assets.', 'start': 133.064, 'duration': 1.922}, {'end': 144.115, 'text': "Let's open functions and split left.", 'start': 135.246, 'duration': 8.869}, {'end': 147.138, 'text': "So now that I've split this, you'll see it live update.", 'start': 144.856, 'duration': 2.282}, {'end': 149.986, 'text': 'So the default is 14.', 'start': 147.178, 'duration': 2.808}, {'end': 153.907, 'text': "And then I just changed it to 16 because it's a little bit more comfortable for me to read.", 'start': 149.986, 'duration': 3.921}], 'summary': 'Using roboto mono font at 16pt for better readability.', 'duration': 29.866, 'max_score': 124.041, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hPC6keUUiTA/pics/hPC6keUUiTA124041.jpg'}, {'end': 193.151, 'src': 'embed', 'start': 169.592, 'weight': 2, 'content': [{'end': 176.215, 'text': 'One of the biggest ones for me to have a comfortable read is you know, when you get down to the end here, the scrolling stops, but if you click,', 'start': 169.592, 'duration': 6.623}, {'end': 180.509, 'text': "scroll past the end, you can just keep on scrolling, and that's really comfortable for me.", 'start': 176.215, 'duration': 4.294}, {'end': 186.29, 'text': 'I used to go enter, enter, enter, enter, enter, enter, when there was no scrolling past the end, and it would be like.', 'start': 180.569, 'duration': 5.721}, {'end': 188.49, 'text': "that's how I would make it a little bit more comfortable.", 'start': 186.29, 'duration': 2.2}, {'end': 193.151, 'text': "but scrolling past the end just really does that automatically and it's really comfy.", 'start': 188.49, 'duration': 4.661}], 'summary': 'Scrolling past the end allows for comfortable reading, improving user experience.', 'duration': 23.559, 'max_score': 169.592, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hPC6keUUiTA/pics/hPC6keUUiTA169592.jpg'}, {'end': 244.278, 'src': 'embed', 'start': 206.219, 'weight': 3, 'content': [{'end': 211.204, 'text': "And if you're using Jade, which is based on nesting, you know, you have like some of that going on.", 'start': 206.219, 'duration': 4.985}, {'end': 213.687, 'text': 'These indention guides are going to be extremely helpful.', 'start': 211.264, 'duration': 2.423}, {'end': 214.948, 'text': "I don't show invisibles,", 'start': 213.927, 'duration': 1.021}, {'end': 221.766, 'text': "but some people like to do that so they can make sure they don't have any like extra spaces after their line endings and things like that.", 'start': 214.948, 'duration': 6.818}, {'end': 223.767, 'text': "I don't really care that much about it.", 'start': 222.346, 'duration': 1.421}, {'end': 228.249, 'text': 'But one thing that I do think is helpful is to look at the tab length.', 'start': 223.907, 'duration': 4.342}, {'end': 229.91, 'text': 'Tab length by default is two.', 'start': 228.409, 'duration': 1.501}, {'end': 232.392, 'text': "And that's how I like to keep it as well.", 'start': 230.491, 'duration': 1.901}, {'end': 233.652, 'text': "I don't use tabs.", 'start': 232.792, 'duration': 0.86}, {'end': 236.874, 'text': "I use, when I hit a tab, it's going to be rendered as two spaces.", 'start': 233.692, 'duration': 3.182}, {'end': 239.475, 'text': 'And I think that is best for me.', 'start': 237.014, 'duration': 2.461}, {'end': 244.278, 'text': 'And the last thing in the general settings I want to show you is about ignoring the name.', 'start': 239.795, 'duration': 4.483}], 'summary': 'In jade, nesting is used, and tab length is set to two spaces for rendering tabs.', 'duration': 38.059, 'max_score': 206.219, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hPC6keUUiTA/pics/hPC6keUUiTA206219.jpg'}, {'end': 297.434, 'src': 'embed', 'start': 271.032, 'weight': 4, 'content': [{'end': 280.04, 'text': "And by default, it has .git, .svn, DSStore, Thumb, which are like the thumbnails for the previews if you're using certain operating systems.", 'start': 271.032, 'duration': 9.008}, {'end': 285.264, 'text': "I don't want these to show up in my sidebar, so I need to ignore them.", 'start': 280.12, 'duration': 5.144}, {'end': 290.789, 'text': "Here's a list of them, and you can add to them or replace them entirely.", 'start': 285.545, 'duration': 5.244}, {'end': 297.434, 'text': "And then also there's this option here, which is exclude VCS ignored paths.", 'start': 291.61, 'duration': 5.824}], 'summary': 'Ignore specific files and folders in the sidebar, including .git and .svn, and use exclude vcs ignored paths option.', 'duration': 26.402, 'max_score': 271.032, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hPC6keUUiTA/pics/hPC6keUUiTA271032.jpg'}], 'start': 0.109, 'title': 'Adam code editor setup and settings overview', 'summary': 'Emphasizes the importance of tools usage and provides a tutorial on setting up the adam code editor. additionally, it covers essential code editor settings such as scrolling past the end, indention guides, tab length, and file name and vcs ignored paths.', 'chapters': [{'end': 153.907, 'start': 0.109, 'title': 'Setting up adam code editor', 'summary': 'Discusses the importance of how you use tools over the tools themselves, followed by a tutorial on setting up the adam code editor, including downloading, installation, and customization.', 'duration': 153.798, 'highlights': ['The importance of how you use tools over the tools themselves is emphasized. None', 'Tutorial on setting up the Adam code editor, including downloading, installation, and customization. None', 'Explanation of customizing the font and font size in Adam, with specific recommendation of using Roboto Mono at font size 16 for comfort. Font size changed from default 14 to 16']}, {'end': 318.221, 'start': 153.987, 'title': 'Code editor settings overview', 'summary': 'Covers essential code editor settings including scrolling past the end for comfortable reading, using indention guides for complicated code, setting tab length to two spaces, and ignoring specific file names and vcs ignored paths.', 'duration': 164.234, 'highlights': ['Setting to scroll past the end for comfortable reading, eliminating the need to repeatedly press Enter. Scrolling past the end provides a more comfortable reading experience, eliminating the need for repetitive Enter key presses.', 'Using indention guides to assist with complex code, especially helpful for languages like Jade that involve nesting. Indention guides are particularly beneficial for managing complex code, especially in languages involving nesting such as Jade.', 'Option to ignore specific file names, such as .git, .svn, DSStore, and Thumb, from displaying in the sidebar. Ability to exclude specific file names like .git, .svn, DSStore, and Thumb from being displayed in the sidebar.', 'Setting tab length to two spaces and rendering tabs as two spaces for improved readability. Preference for setting tab length to two spaces and rendering tabs accordingly for enhanced readability.']}], 'duration': 318.112, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hPC6keUUiTA/pics/hPC6keUUiTA109.jpg', 'highlights': ['Tutorial on setting up the Adam code editor, including downloading, installation, and customization.', 'Explanation of customizing the font and font size in Adam, with specific recommendation of using Roboto Mono at font size 16 for comfort.', 'Setting to scroll past the end for comfortable reading, eliminating the need to repeatedly press Enter.', 'Using indention guides to assist with complex code, especially helpful for languages like Jade that involve nesting.', 'Option to ignore specific file names, such as .git, .svn, DSStore, and Thumb, from displaying in the sidebar.', 'Setting tab length to two spaces and rendering tabs as two spaces for improved readability.', 'The importance of how you use tools over the tools themselves is emphasized.']}, {'end': 531.478, 'segs': [{'end': 368.823, 'src': 'embed', 'start': 339.517, 'weight': 1, 'content': [{'end': 340.558, 'text': 'I just downloaded this.', 'start': 339.517, 'duration': 1.041}, {'end': 344.963, 'text': "I'm gonna do a search for tree and there's a tree view package.", 'start': 341.059, 'duration': 3.904}, {'end': 349.267, 'text': "So I'm gonna go into the settings of tree view and then there's hide ignore names.", 'start': 345.043, 'duration': 4.224}, {'end': 356.375, 'text': "I don't know, it's so bad, but hide ignore names gets rid of, you could see that get there.", 'start': 350.108, 'duration': 6.267}, {'end': 359.948, 'text': 'And then DSStore is gone.', 'start': 358.165, 'duration': 1.783}, {'end': 361.812, 'text': 'I definitely want that.', 'start': 360.309, 'duration': 1.503}, {'end': 364.617, 'text': 'And then hide VCS ignored files.', 'start': 362.213, 'duration': 2.404}, {'end': 366.922, 'text': 'Like look at underscore site at the top.', 'start': 364.677, 'duration': 2.245}, {'end': 368.823, 'text': "Now it's gone, good.", 'start': 367.762, 'duration': 1.061}], 'summary': 'Configured tree view to hide dsstore and vcs ignored files, improving visibility.', 'duration': 29.306, 'max_score': 339.517, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hPC6keUUiTA/pics/hPC6keUUiTA339517.jpg'}, {'end': 454.579, 'src': 'embed', 'start': 424.301, 'weight': 0, 'content': [{'end': 429.183, 'text': "And a theme that I've noticed recently kind of get popular is, is a pretty fun one.", 'start': 424.301, 'duration': 4.882}, {'end': 431.864, 'text': "Uh, let's look for material.", 'start': 429.203, 'duration': 2.661}, {'end': 434.445, 'text': "And the one we're looking for is the top here called Adam material.", 'start': 432.064, 'duration': 2.381}, {'end': 435.666, 'text': "So we'll just click install.", 'start': 434.485, 'duration': 1.181}, {'end': 441.708, 'text': "And once that is downloaded, I'm gonna jump back over to themes and then it'll be in the selection, dropdown, Adam material.", 'start': 435.746, 'duration': 5.962}, {'end': 444.795, 'text': 'And There it is.', 'start': 441.728, 'duration': 3.067}, {'end': 447.596, 'text': "So do I think it's cool? I think it's cool.", 'start': 445.235, 'duration': 2.361}, {'end': 449.397, 'text': 'Does it look cool? It looks cool.', 'start': 447.876, 'duration': 1.521}, {'end': 454.579, 'text': "The problem I have with it and the problem I have with general material design is that it's not that usable.", 'start': 450.017, 'duration': 4.562}], 'summary': "Recently, the popular theme 'adam material' was installed, but it's considered cool but not very usable.", 'duration': 30.278, 'max_score': 424.301, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hPC6keUUiTA/pics/hPC6keUUiTA424301.jpg'}, {'end': 512.494, 'src': 'heatmap', 'start': 477.788, 'weight': 2, 'content': [{'end': 480.549, 'text': "Let's talk about the syntax themes.", 'start': 477.788, 'duration': 2.761}, {'end': 484.83, 'text': "The syntax things that I like to use, I'm going to do a search for space here.", 'start': 480.589, 'duration': 4.241}, {'end': 490.212, 'text': 'The one that I like to use is down here, Space Gray Atom Dark Syntax by JC House.', 'start': 484.991, 'duration': 5.221}, {'end': 492.693, 'text': "There's a lot of them, but I like this one the best.", 'start': 490.232, 'duration': 2.461}, {'end': 496.414, 'text': "It's not as like in your face as the rest of them.", 'start': 493.133, 'duration': 3.281}, {'end': 497.795, 'text': "It's subdued, it's muted.", 'start': 496.595, 'duration': 1.2}, {'end': 499.383, 'text': "And it's quite pretty.", 'start': 498.402, 'duration': 0.981}, {'end': 501.024, 'text': "So let's go back over to themes.", 'start': 499.483, 'duration': 1.541}, {'end': 506.089, 'text': "And for a syntax theme, I'll choose Atom space grade dark.", 'start': 501.164, 'duration': 4.925}, {'end': 508.811, 'text': 'Now, you notice that functions has not updated.', 'start': 506.429, 'duration': 2.382}, {'end': 512.494, 'text': "So let's open functions again over here.", 'start': 508.871, 'duration': 3.623}], 'summary': 'Preference for space gray atom dark syntax theme for its subdued and pretty appearance.', 'duration': 34.706, 'max_score': 477.788, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hPC6keUUiTA/pics/hPC6keUUiTA477788.jpg'}], 'start': 318.221, 'title': 'Atom troubleshooting and themes', 'summary': "Covers troubleshooting default packages in a fresh install, resolving issues with 'tree view' package settings, discussing atom default themes and the process of installing new themes, including the popular adam material theme. it also explores usability issues with material design and preference for subdued syntax themes.", 'chapters': [{'end': 385.757, 'start': 318.221, 'title': 'Troubleshooting default packages in fresh install', 'summary': "Discusses troubleshooting the default packages in a fresh install, where the user encounters issues with default settings and resolves them by adjusting the settings of the 'tree view' package, including removing 'dsstore' and hiding 'vcs ignored files', while also discussing gitignore and default settings.", 'duration': 67.536, 'highlights': ["The user troubleshoots default packages in a fresh install, specifically addressing issues related to the 'tree view' package settings, such as removing 'DSStore' and hiding 'VCS ignored files'.", "The user explains how they adjusted the settings in the 'tree view' package to resolve issues with default settings in a fresh install.", "The user briefly mentions gitignore and default settings, stating that they do not make many changes beyond addressing issues with the 'tree view' package."]}, {'end': 444.795, 'start': 386.177, 'title': 'Atom themes overview', 'summary': 'Discusses the atom default theme, atom dark, and the updated themes one dark and one light. it also explores the process of installing new themes, highlighting the popular adam material theme.', 'duration': 58.618, 'highlights': ['The default theme, Atom Dark, was inspired by Sublime and had an aggressive look with tabs resembling those of Sublime.', 'Atom recently updated to the themes One Dark and One Light, with One Dark being the default theme upon opening Atom.', 'The process of installing new themes involves navigating to the Install tab, searching for themes, and selecting the desired theme, such as the popular Adam material theme.']}, {'end': 531.478, 'start': 445.235, 'title': 'Material design usability and syntax theme preference', 'summary': 'Discusses the usability issues with material design, particularly the findability of dropdowns and search boxes, and the preference for a subdued and muted syntax theme over brighter ones, such as atom space grade dark by jc house.', 'duration': 86.243, 'highlights': ['The findability of dropdowns and search boxes in material design is a usability issue, making it less usable despite its aesthetic appeal.', 'The preference for the subdued and muted syntax theme, Atom space grade dark by JC House, over brighter themes for its less bright and more muted appearance, making it easier to navigate and use.', 'The comparison between the default Atom theme and the preferred syntax theme, Space Gray Atom Dark Syntax by JC House, highlights the subdued and less bright nature of the preferred theme, making it a more visually appealing choice.']}], 'duration': 213.257, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hPC6keUUiTA/pics/hPC6keUUiTA318221.jpg', 'highlights': ['The process of installing new themes involves navigating to the Install tab, searching for themes, and selecting the desired theme, such as the popular Adam material theme.', "The user troubleshoots default packages in a fresh install, specifically addressing issues related to the 'tree view' package settings, such as removing 'DSStore' and hiding 'VCS ignored files'.", 'The preference for the subdued and muted syntax theme, Atom space grade dark by JC House, over brighter themes for its less bright and more muted appearance, making it easier to navigate and use.']}, {'end': 1006.612, 'segs': [{'end': 560.259, 'src': 'embed', 'start': 531.798, 'weight': 3, 'content': [{'end': 536.14, 'text': "And that's kind of all I do for themes and syntaxes and things like that.", 'start': 531.798, 'duration': 4.342}, {'end': 536.9, 'text': "It's pretty simple.", 'start': 536.24, 'duration': 0.66}, {'end': 538.421, 'text': "Next, let's talk about packages.", 'start': 537.1, 'duration': 1.321}, {'end': 541.002, 'text': 'Let me open this Jade file here.', 'start': 538.701, 'duration': 2.301}, {'end': 543.723, 'text': "And then I'll switch to packages because I want to search for packages.", 'start': 541.262, 'duration': 2.461}, {'end': 549.306, 'text': 'The package that I use to make this syntax highlighting for Jade work is called Adam, Adam Jade.', 'start': 543.763, 'duration': 5.543}, {'end': 555.332, 'text': "Okay, so I'll install this, and then immediately you see my Jade code gets highlighted.", 'start': 550.546, 'duration': 4.786}, {'end': 556.374, 'text': "And that's for Jade.", 'start': 555.673, 'duration': 0.701}, {'end': 560.259, 'text': 'Let me show you my CSS here.', 'start': 556.434, 'duration': 3.825}], 'summary': 'Demonstrates installing adam jade package for syntax highlighting in jade files.', 'duration': 28.461, 'max_score': 531.798, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hPC6keUUiTA/pics/hPC6keUUiTA531798.jpg'}, {'end': 625.092, 'src': 'embed', 'start': 595.472, 'weight': 4, 'content': [{'end': 598.594, 'text': 'And I find this one called autocomplete plus and I just disable it.', 'start': 595.472, 'duration': 3.122}, {'end': 599.775, 'text': "I don't like it.", 'start': 599.175, 'duration': 0.6}, {'end': 606.04, 'text': "So then when I'm down here, I can just write margin like a normal human and then just be done with it.", 'start': 600.136, 'duration': 5.904}, {'end': 607.581, 'text': "So that's one that I just turn off.", 'start': 606.12, 'duration': 1.461}, {'end': 609.863, 'text': 'And a lot of people will be like, well, you turn off autocomplete.', 'start': 607.661, 'duration': 2.202}, {'end': 611.244, 'text': "Well, it's just personal.", 'start': 609.903, 'duration': 1.341}, {'end': 612.185, 'text': "You don't have to do it.", 'start': 611.524, 'duration': 0.661}, {'end': 613.346, 'text': "I'm not recommending that you do it.", 'start': 612.265, 'duration': 1.081}, {'end': 613.946, 'text': "It's just for me.", 'start': 613.446, 'duration': 0.5}, {'end': 614.467, 'text': "I don't like it.", 'start': 614.046, 'duration': 0.421}, {'end': 618.45, 'text': 'It might make me faster, but it also like makes me.', 'start': 614.707, 'duration': 3.743}, {'end': 625.092, 'text': "I find that when I have it on, I have to make more fixes because it's I auto completed the wrong thing,", 'start': 618.45, 'duration': 6.642}], 'summary': 'Turned off autocomplete plus plugin for faster coding, despite potential speed benefits.', 'duration': 29.62, 'max_score': 595.472, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hPC6keUUiTA/pics/hPC6keUUiTA595472.jpg'}, {'end': 680.394, 'src': 'embed', 'start': 653.653, 'weight': 0, 'content': [{'end': 659.759, 'text': "And if I were to expand it into HTML, then I'd be editing HTML and I want to edit jade, not HTML.", 'start': 653.653, 'duration': 6.106}, {'end': 660.56, 'text': "That's just me.", 'start': 659.819, 'duration': 0.741}, {'end': 668.327, 'text': 'But one package that I do use a lot and I get a lot of questions about is something called pigments pigments,', 'start': 660.6, 'duration': 7.727}, {'end': 670.809, 'text': 'a package to display colors in project files.', 'start': 668.327, 'duration': 2.482}, {'end': 680.394, 'text': 'Now that Pigments is installed, you can see already that the colors in this file called vars.css are all highlighted in a certain way.', 'start': 671.169, 'duration': 9.225}], 'summary': 'The speaker uses the pigments package to highlight colors in project files.', 'duration': 26.741, 'max_score': 653.653, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hPC6keUUiTA/pics/hPC6keUUiTA653653.jpg'}, {'end': 814.628, 'src': 'embed', 'start': 787.452, 'weight': 2, 'content': [{'end': 793.356, 'text': "But like line number five, it'll pull out the variable and display that color.", 'start': 787.452, 'duration': 5.904}, {'end': 800.561, 'text': "But also, it'll allow you to do functions on the variable and display that color.", 'start': 794.036, 'duration': 6.525}, {'end': 801.942, 'text': "And that's pretty cool.", 'start': 801.122, 'duration': 0.82}, {'end': 808.225, 'text': "I think as you're going through and creating all these styles, that can be super helpful and handy.", 'start': 802.022, 'duration': 6.203}, {'end': 814.628, 'text': 'But then you can also right click on it and then go to pigments and then convert it to things.', 'start': 809.206, 'duration': 5.422}], 'summary': 'The tool can display colors and perform functions on variables, aiding in creating styles.', 'duration': 27.176, 'max_score': 787.452, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hPC6keUUiTA/pics/hPC6keUUiTA787452.jpg'}, {'end': 860.705, 'src': 'embed', 'start': 834.348, 'weight': 1, 'content': [{'end': 838.751, 'text': "If I do a command shift P and I find pigments, this one's really cool.", 'start': 834.348, 'duration': 4.403}, {'end': 840.192, 'text': 'Pigments show palette.', 'start': 838.871, 'duration': 1.321}, {'end': 848.097, 'text': "It'll open up a new tab and show me every color that's in my project, which is awesome.", 'start': 840.552, 'duration': 7.545}, {'end': 850.719, 'text': "And you can see I've got a lot of blues.", 'start': 848.918, 'duration': 1.801}, {'end': 856.662, 'text': 'Like if this was my project, I would be like, Oh wait, like, This blue is similar to this blue.', 'start': 850.919, 'duration': 5.743}, {'end': 860.705, 'text': "Can't I just compile them and that way have less definitions of colors and stuff like that?", 'start': 856.702, 'duration': 4.003}], 'summary': 'Using command shift p and pigments tool to view and manage project colors, aiming to reduce color definitions.', 'duration': 26.357, 'max_score': 834.348, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hPC6keUUiTA/pics/hPC6keUUiTA834348.jpg'}], 'start': 531.798, 'title': 'Package management, syntax highlighting, and using pigments package', 'summary': "Covers package management for syntax highlighting, including the installation of the 'adam jade' package and the disabling of the 'autocomplete plus' package. it also explores the features of the pigments package for color display, such as customizing marker type and finding/converting colors, demonstrating its value in optimizing project styles.", 'chapters': [{'end': 653.313, 'start': 531.798, 'title': 'Package management and syntax highlighting', 'summary': "Discusses package management for syntax highlighting, demonstrating the installation of the 'adam jade' package for jade syntax highlighting and the disabling of the 'autocomplete plus' package due to its inefficiency and personal preference.", 'duration': 121.515, 'highlights': ["The chapter highlights the installation of the 'Adam Jade' package for Jade syntax highlighting, showcasing its immediate effect on the code (quantifiable data: immediate syntax highlighting).", "It emphasizes the decision to disable the 'autocomplete plus' package due to its inefficiency in suggesting the wrong elements and functions, affecting the author's productivity (quantifiable data: increased productivity).", "The author expresses personal preference against using the widely recommended 'Emmett' auto completer for text expansion, citing the compact nature of Jade as a reason for its exclusion."]}, {'end': 1006.612, 'start': 653.653, 'title': 'Using pigments package for color display', 'summary': 'Introduces the pigments package, explaining its features such as displaying colors in project files, customizing marker type, pulling and displaying colors from variables, and finding and converting colors, showcasing its usefulness in optimizing and organizing project styles.', 'duration': 352.959, 'highlights': ['Pigments package displays colors in project files and allows customization of marker types, such as outline, underline, and dot. The Pigments package highlights colors in project files and offers customization options for marker types, such as outline, underline, and dot.', 'Pigments can pull and display colors from variables and perform functions on the variables to display resulting colors, aiding in creating and optimizing project styles. Pigments can pull and display colors from variables and perform functions on the variables to display resulting colors, aiding in creating and optimizing project styles.', 'Pigments facilitates finding and converting colors, including showing a palette of all project colors and finding where specific colors are defined in project files, contributing to efficient color management. Pigments facilitates finding and converting colors, including showing a palette of all project colors and finding where specific colors are defined in project files, contributing to efficient color management.', 'The Pigments package allows direct editing of elements on the page within the editor itself, enabling real-time adjustments for visual elements. The Pigments package allows direct editing of elements on the page within the editor itself, enabling real-time adjustments for visual elements.']}], 'duration': 474.814, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hPC6keUUiTA/pics/hPC6keUUiTA531798.jpg', 'highlights': ['The Pigments package allows direct editing of elements on the page within the editor itself, enabling real-time adjustments for visual elements.', 'Pigments facilitates finding and converting colors, including showing a palette of all project colors and finding where specific colors are defined in project files, contributing to efficient color management.', 'Pigments can pull and display colors from variables and perform functions on the variables to display resulting colors, aiding in creating and optimizing project styles.', "The chapter highlights the installation of the 'Adam Jade' package for Jade syntax highlighting, showcasing its immediate effect on the code.", "It emphasizes the decision to disable the 'autocomplete plus' package due to its inefficiency in suggesting the wrong elements and functions, affecting the author's productivity."]}], 'highlights': ['The Pigments package allows direct editing of elements on the page within the editor itself, enabling real-time adjustments for visual elements.', 'Pigments facilitates finding and converting colors, including showing a palette of all project colors and finding where specific colors are defined in project files, contributing to efficient color management.', 'Pigments can pull and display colors from variables and perform functions on the variables to display resulting colors, aiding in creating and optimizing project styles.', "The chapter highlights the installation of the 'Adam Jade' package for Jade syntax highlighting, showcasing its immediate effect on the code.", 'The process of installing new themes involves navigating to the Install tab, searching for themes, and selecting the desired theme, such as the popular Adam material theme.', "The user troubleshoots default packages in a fresh install, specifically addressing issues related to the 'tree view' package settings, such as removing 'DSStore' and hiding 'VCS ignored files'.", 'The preference for the subdued and muted syntax theme, Atom space grade dark by JC House, over brighter themes for its less bright and more muted appearance, making it easier to navigate and use.', 'Tutorial on setting up the Adam code editor, including downloading, installation, and customization.', 'Explanation of customizing the font and font size in Adam, with specific recommendation of using Roboto Mono at font size 16 for comfort.', 'Setting to scroll past the end for comfortable reading, eliminating the need to repeatedly press Enter.', 'Using indention guides to assist with complex code, especially helpful for languages like Jade that involve nesting.', 'Option to ignore specific file names, such as .git, .svn, DSStore, and Thumb, from displaying in the sidebar.', 'Setting tab length to two spaces and rendering tabs as two spaces for improved readability.', 'The importance of how you use tools over the tools themselves is emphasized.', "It emphasizes the decision to disable the 'autocomplete plus' package due to its inefficiency in suggesting the wrong elements and functions, affecting the author's productivity."]}