1 00:00:00,000 --> 00:00:04,003 [MUSIC] 2 00:00:04,003 --> 00:00:05,664 Welcome to Sessions, y'all. 3 00:00:05,664 --> 00:00:07,450 I'm Toni again. 4 00:00:07,450 --> 00:00:09,940 Hope y'all are having a great time. 5 00:00:09,940 --> 00:00:15,760 Well, our next speaker is a Bay Area local, Alexandra. 6 00:00:15,760 --> 00:00:20,841 I'm sorry, Alexandra Waite, or Alex, has gotten into coding with a friend 7 00:00:20,841 --> 00:00:25,942 told her that it's possible to become a software engineer without a degree. 8 00:00:25,942 --> 00:00:28,080 And she probably said, what? 9 00:00:28,080 --> 00:00:30,837 So now she's here to tell you about her story. 10 00:00:30,837 --> 00:00:34,964 So she joined a coding boot camp to embark on a journey that led her to 11 00:00:34,964 --> 00:00:37,690 working as a software engineer at Pandora, 12 00:00:37,690 --> 00:00:41,700 where she is continuing her professional development. 13 00:00:41,700 --> 00:00:43,501 Please welcome Alex. 14 00:00:45,898 --> 00:00:47,425 >> Hi, thank you so much. 15 00:00:47,425 --> 00:00:49,709 [LAUGH] Awesome. 16 00:00:49,709 --> 00:00:53,600 So one moment while I share my screen. 17 00:00:55,380 --> 00:00:58,942 Awesome, so here we go. 18 00:00:58,942 --> 00:01:01,330 [COUGH] Hi, everyone. 19 00:01:01,330 --> 00:01:02,966 And thanks for coming today. 20 00:01:02,966 --> 00:01:07,690 My name's Alex Waite, and I'm a software engineer at Pandora Media. 21 00:01:07,690 --> 00:01:12,314 And I'm currently living in Huichin, also known as Oakland, 22 00:01:12,314 --> 00:01:16,077 California, on occupied Chochenyo Ohlone land. 23 00:01:16,077 --> 00:01:22,197 Today, I'm gonna talk about some knowledge I've picked up over the last couple 24 00:01:22,197 --> 00:01:27,788 of years working at my job and problem solving through some big projects. 25 00:01:27,788 --> 00:01:32,667 And please double tap this portion of the presentation to make it larger 26 00:01:32,667 --> 00:01:33,817 on your screen. 27 00:01:36,302 --> 00:01:38,405 So first off for the agenda, 28 00:01:38,405 --> 00:01:43,838 we're gonna go over some common architectural patterns for projects and 29 00:01:43,838 --> 00:01:50,320 then go over how you can utilize them to identify your project's pattern. 30 00:01:50,320 --> 00:01:54,028 Then we'll go over the importance of reading code, 31 00:01:54,028 --> 00:01:58,918 how to best navigate code, some problem-solving techniques, and 32 00:01:58,918 --> 00:02:03,260 common pitfalls leading to problems in projects. 33 00:02:03,260 --> 00:02:06,544 And then at the end, we're gonna have some time for Q&A. 34 00:02:09,390 --> 00:02:13,852 All right, so let's start with application architecture and 35 00:02:13,852 --> 00:02:18,156 how knowing it can really help you out with problem solving. 36 00:02:21,069 --> 00:02:24,515 App architecture is used to define the skeleton, 37 00:02:24,515 --> 00:02:29,610 the high-level components of a system, and how they all work together. 38 00:02:31,000 --> 00:02:34,681 An architectural pattern is a general reusable solution for 39 00:02:34,681 --> 00:02:37,650 a commonly occurring problem in your software. 40 00:02:38,750 --> 00:02:43,994 Identifying and understanding your project's architectural pattern will help 41 00:02:43,994 --> 00:02:49,400 you to navigate the project and allow you to work more quickly with more confidence. 42 00:02:50,520 --> 00:02:52,285 As new features are added, 43 00:02:52,285 --> 00:02:56,751 it will be clear which part of the architecture needs to be modified. 44 00:02:56,751 --> 00:03:01,718 And you and your teammates will then be able to work together on different parts 45 00:03:01,718 --> 00:03:04,665 of application at the same time and with ease. 46 00:03:07,462 --> 00:03:11,075 And here's some common architectural patterns. 47 00:03:11,075 --> 00:03:14,280 Up first we have MVC, or Model-View-Controller, and 48 00:03:14,280 --> 00:03:18,585 it's probably the most well-known architectural pattern. 49 00:03:18,585 --> 00:03:23,740 Because of this, we're gonna go into more detail in this pattern in the next slide. 50 00:03:23,740 --> 00:03:28,070 But in your own time, check out some of these other architectural patterns and 51 00:03:28,070 --> 00:03:31,808 read more about them, as you're likely going to encounter various 52 00:03:31,808 --> 00:03:34,121 flavors of them throughout your career. 53 00:03:37,909 --> 00:03:42,838 So Model-View-Controller, or MVC, one of the most widely 54 00:03:42,838 --> 00:03:47,500 used architectural patterns in web and app development. 55 00:03:49,190 --> 00:03:53,470 Here, the model represents the structure of the data in your project and 56 00:03:53,470 --> 00:03:54,603 how it's stored. 57 00:03:56,608 --> 00:04:01,271 On a client-side project, the model can be a Redux store. 58 00:04:01,271 --> 00:04:08,550 This code can hold raw data or define the essential components of your application. 59 00:04:08,550 --> 00:04:13,632 So for example, if you're building a to-do app, the model would define what 60 00:04:13,632 --> 00:04:18,730 a task is, and what a list is, since those are the main components of that app. 61 00:04:20,230 --> 00:04:21,399 And then the view. 62 00:04:21,399 --> 00:04:25,336 The view is the user interface, and it makes up components and 63 00:04:25,336 --> 00:04:28,150 functionality that a user interacts with. 64 00:04:29,480 --> 00:04:33,910 Views utilize the model and present data in a form that the user wants. 65 00:04:35,580 --> 00:04:37,419 And finally, the controller. 66 00:04:37,419 --> 00:04:42,310 The controller acts as a connector between the view and the model. 67 00:04:42,310 --> 00:04:47,098 It receives user input via this user action from the view and 68 00:04:47,098 --> 00:04:51,598 then translates that input to grab data from the model, 69 00:04:51,598 --> 00:04:55,256 which then passes that data back to the view. 70 00:05:00,679 --> 00:05:05,155 And here's an example file structure we can break down to determine its 71 00:05:05,155 --> 00:05:06,805 architectural pattern. 72 00:05:08,005 --> 00:05:12,006 I found this nicely organized project on goodfirstissue.dev, 73 00:05:12,006 --> 00:05:17,110 which is a site that provides easy issues for your first open source contribution. 74 00:05:18,350 --> 00:05:22,480 So this example is an app called Guppy that helps beginners build 75 00:05:22,480 --> 00:05:24,790 React applications. 76 00:05:24,790 --> 00:05:28,643 It provides a graphical user interface for common React tasks, 77 00:05:28,643 --> 00:05:32,440 like creating new projects and running a development server. 78 00:05:33,770 --> 00:05:38,552 It's an electron app, meaning it's a desktop application written 79 00:05:38,552 --> 00:05:41,860 with web technologies such as React and Redux. 80 00:05:43,090 --> 00:05:47,295 I really like how the directories in this project are clearly named and 81 00:05:47,295 --> 00:05:48,370 grouped by type. 82 00:05:49,650 --> 00:05:53,540 All of the app code lives in this source directory. 83 00:05:53,540 --> 00:05:57,914 Then, within this source directory, there's a directory for 84 00:05:57,914 --> 00:06:01,160 components, reducers, services, and etc. 85 00:06:03,140 --> 00:06:08,070 But here we don't see files or folders specifically named model, 86 00:06:08,070 --> 00:06:09,840 view, or controller. 87 00:06:10,850 --> 00:06:15,725 And this goes to show that it's often not immediately clear what a project's 88 00:06:15,725 --> 00:06:20,000 architectural pattern is based off the names of the directories and 89 00:06:20,000 --> 00:06:21,130 the files alone. 90 00:06:22,330 --> 00:06:25,788 But with some knowledge of React and Redux, 91 00:06:25,788 --> 00:06:30,752 we're able to work out how these translate to the MVC pattern. 92 00:06:30,752 --> 00:06:35,285 In this project, the actions serve as a controller, and 93 00:06:35,285 --> 00:06:39,441 they fire actions here in this actions directory and 94 00:06:39,441 --> 00:06:43,516 handle that logic here in the reducers directory. 95 00:06:45,650 --> 00:06:48,801 And then the Redux store is the model in this project, 96 00:06:48,801 --> 00:06:52,738 since it holds all of the app's data here in this store directory. 97 00:06:55,228 --> 00:06:59,240 Finally, React is the view layer of this project. 98 00:06:59,240 --> 00:07:04,180 And React views are generally gonna be located in a components directory here. 99 00:07:05,890 --> 00:07:10,497 So with this understanding of the various components of our project and 100 00:07:10,497 --> 00:07:12,492 how they relate to each other, 101 00:07:12,492 --> 00:07:17,119 it helps us in developing our understanding of the codebase as a whole. 102 00:07:20,480 --> 00:07:25,471 Once we've identified the architectural pattern of the project to use as a guide, 103 00:07:25,471 --> 00:07:29,036 the next important piece that will help us problem solve big 104 00:07:29,036 --> 00:07:31,479 projects is actually reading the code. 105 00:07:34,112 --> 00:07:38,530 Reading code is the vast majority of a software engineer's job. 106 00:07:38,530 --> 00:07:43,136 And being able to read code is just as important, if not more important, 107 00:07:43,136 --> 00:07:45,110 than being able to write code. 108 00:07:45,110 --> 00:07:49,310 It fosters familiarity and comfort with a codebase. 109 00:07:49,310 --> 00:07:50,504 When reading code, 110 00:07:50,504 --> 00:07:55,281 you start to pick up on the styles of the developers working within that project, 111 00:07:55,281 --> 00:08:00,840 allowing you to adopt and then continue that style when contributing to the code. 112 00:08:00,840 --> 00:08:03,640 Making it easier for the next contributor to follow. 113 00:08:05,170 --> 00:08:10,028 The more code you read, the easier it gets to understand other people's code. 114 00:08:10,028 --> 00:08:12,364 You also get faster at it, and 115 00:08:12,364 --> 00:08:17,790 this makes the entire process of coding more fun and more enjoyable. 116 00:08:19,530 --> 00:08:21,597 Trust that understanding and 117 00:08:21,597 --> 00:08:26,233 skill will develop over time with continued practice and effort. 118 00:08:29,635 --> 00:08:33,793 And now here's some tips for some more constructive code reading. 119 00:08:36,270 --> 00:08:41,370 Tip number one, just concentrate on a general understanding in the beginning. 120 00:08:42,460 --> 00:08:45,752 Skim the project at first to get a rough overview, but 121 00:08:45,752 --> 00:08:50,287 if you try to understand each and every piece before moving on to the next, 122 00:08:50,287 --> 00:08:53,310 you'll get lost and bogged down in the details. 123 00:08:54,350 --> 00:08:57,830 So don't focus too much on the implementation details early on. 124 00:08:58,860 --> 00:09:01,529 The first thing you wanna get is a high-level 125 00:09:01,529 --> 00:09:04,840 general understanding of what the code is trying to do. 126 00:09:06,120 --> 00:09:09,868 A text editor feature that I use to make this process easier and 127 00:09:09,868 --> 00:09:12,110 less overwhelming is code folding. 128 00:09:13,160 --> 00:09:18,233 By folding the code within a function or a method, I'm able to hide all of 129 00:09:18,233 --> 00:09:23,240 the nitty-gritty details and only show the names of those functions. 130 00:09:24,430 --> 00:09:29,330 This way, I'm taking in only the relevant information that I need to get an idea of 131 00:09:29,330 --> 00:09:30,830 what the code's doing. 132 00:09:32,000 --> 00:09:36,090 I can always expand code when I wanna go in more depth. 133 00:09:36,090 --> 00:09:40,322 But this process helps me to stay conscious of not going down a rabbit hole, 134 00:09:40,322 --> 00:09:42,419 since that can be really easy for me. 135 00:09:44,981 --> 00:09:48,300 And tip number two, run your project and 136 00:09:48,300 --> 00:09:52,690 interact with it as a user to see how it behaves. 137 00:09:52,690 --> 00:09:56,770 And to better inform your understanding of how the code is functioning. 138 00:09:57,880 --> 00:10:01,350 Try out different use cases and explore all of its features. 139 00:10:02,380 --> 00:10:06,700 Then choose a part of that project, and then dig into that part of the code. 140 00:10:08,050 --> 00:10:10,890 Many start with the project's entry point. 141 00:10:10,890 --> 00:10:13,858 This could be a main function, or a controller, and 142 00:10:13,858 --> 00:10:16,700 then follow how the code branches out from there. 143 00:10:17,950 --> 00:10:21,050 For me, I generally start with the view portion of the code. 144 00:10:22,170 --> 00:10:25,810 I pick a user action, or a view that interests me. 145 00:10:25,810 --> 00:10:30,618 And then I find it in the code, and see how it's implemented there, and 146 00:10:30,618 --> 00:10:33,120 figure out how it displays the data. 147 00:10:34,420 --> 00:10:38,910 Then from there, I'll see how the controllers are manipulating that data. 148 00:10:38,910 --> 00:10:41,215 And then I can move on to the model layer. 149 00:10:44,488 --> 00:10:48,555 Tip number three, while digging in and exploring code, 150 00:10:48,555 --> 00:10:52,270 just try to focus on one piece at a time. 151 00:10:52,270 --> 00:10:57,310 Make it a goal to understand one piece, just enough before moving on to the next. 152 00:10:58,810 --> 00:11:03,533 Utilize documentation to improve your understanding of the code as you're 153 00:11:03,533 --> 00:11:04,350 reading it. 154 00:11:05,720 --> 00:11:10,103 In addition to documentation, you should pay special attention to the comments in 155 00:11:10,103 --> 00:11:12,050 the code whenever you run into them. 156 00:11:13,070 --> 00:11:15,180 Comments are there for a reason. 157 00:11:15,180 --> 00:11:19,382 And it's usually because it isn't immediately clear what the code is doing, 158 00:11:19,382 --> 00:11:21,240 and it needs additional context. 159 00:11:22,880 --> 00:11:26,915 Git commits are another extremely helpful way, and 160 00:11:26,915 --> 00:11:32,730 form a documentation explaining why each line of code was added. 161 00:11:32,730 --> 00:11:36,133 So make good use of git blame as you're reading through code, 162 00:11:36,133 --> 00:11:37,580 through better insight. 163 00:11:42,040 --> 00:11:45,714 And reading and processing code drains a lot of mental energy, 164 00:11:45,714 --> 00:11:49,400 so it's important to be cautious conscious of taking breaks. 165 00:11:50,740 --> 00:11:55,160 Too often, I find myself hitting a wall in my understanding hours into working, and 166 00:11:55,160 --> 00:11:58,780 then I reach a point where I realize I've just hit my limit. 167 00:11:58,780 --> 00:12:00,799 And I'm not gonna do my best work, or 168 00:12:00,799 --> 00:12:05,240 improve my understanding by reading a line of code over and over with a headache. 169 00:12:06,370 --> 00:12:08,800 So please remember to take breaks throughout the day. 170 00:12:10,010 --> 00:12:16,021 For me, breaks could look like having a snack, doing a workout, going outside, 171 00:12:16,021 --> 00:12:21,610 or listening to music, whatever feels like it fills me up and recharges me. 172 00:12:22,770 --> 00:12:27,289 These may vary in length, but generally, the longer the break, or the more 173 00:12:27,289 --> 00:12:31,825 fulfilling the activity, the fresher I feel when I come back to the screen. 174 00:12:35,614 --> 00:12:39,508 And if you don't take my word for it on the importance of reading code, 175 00:12:39,508 --> 00:12:43,870 you can take software expert Robert C Martin's, the author of Reading Code. 176 00:12:45,130 --> 00:12:48,520 Reading code isn't always the most fun activity. 177 00:12:48,520 --> 00:12:50,928 But it gets easier over time. 178 00:12:50,928 --> 00:12:55,914 And we can take solace in knowing reading code makes it easier to write, 179 00:12:55,914 --> 00:13:00,250 in turn, making us better programmers and problem solvers. 180 00:13:01,330 --> 00:13:06,052 Keeping these tips in mind, and using them as a guide, please don't feel bad 181 00:13:06,052 --> 00:13:09,700 when you find yourself in the weeds, or down a rabbit hole. 182 00:13:10,770 --> 00:13:13,360 Don't expect it to be a linear process, and 183 00:13:13,360 --> 00:13:16,230 don't expect to understand everything fully. 184 00:13:17,430 --> 00:13:20,568 Remember, code bases can take months, or 185 00:13:20,568 --> 00:13:24,500 even years to become familiar with, so give it time. 186 00:13:28,590 --> 00:13:32,160 Now, let's go over some ways to best navigate code. 187 00:13:35,710 --> 00:13:40,651 It's important to dedicate time to learning how to quickly and efficiently 188 00:13:40,651 --> 00:13:45,762 navigate large projects to help you problem solve them, and level up in them. 189 00:13:45,762 --> 00:13:50,710 We'll cover some tools for optimizing productivity while doing this work. 190 00:13:54,187 --> 00:13:59,127 Learn and implement shortcuts for common development tasks in your editor, 191 00:13:59,127 --> 00:14:03,388 or any other applications related to your projects development. 192 00:14:06,327 --> 00:14:09,340 These are some of my favorite shortcuts and snippets on a Mac. 193 00:14:10,340 --> 00:14:15,382 For Windows, you can generally replace the CMD key with the CTRL key. 194 00:14:15,382 --> 00:14:19,258 In VS Code, I use Shift+CMD+K to delete an entire line, or 195 00:14:19,258 --> 00:14:23,670 highlighted section without having to hold down the backspace key. 196 00:14:24,880 --> 00:14:29,544 CMD+P opens an input box for me to type in the name of the file, 197 00:14:29,544 --> 00:14:31,805 and go straight to that file. 198 00:14:31,805 --> 00:14:37,914 Shift option up or down copies whatever line your cursor is currently on, 199 00:14:37,914 --> 00:14:43,939 and places that above or below the code without having to copy and paste. 200 00:14:43,939 --> 00:14:47,365 Ctrl+G takes you to a specific line. 201 00:14:47,365 --> 00:14:52,202 CMD+D lets you select the variable name or a piece of code, 202 00:14:52,202 --> 00:14:56,579 and then find every match of that selection in a file. 203 00:14:56,579 --> 00:15:00,170 CMD+Shift+F allows you to search an entire project. 204 00:15:01,530 --> 00:15:03,190 And then we have one of my favorite snippets. 205 00:15:04,200 --> 00:15:07,494 And a snippet is essentially an alias you create for 206 00:15:07,494 --> 00:15:11,100 any code you want to run, without having to type it out. 207 00:15:12,130 --> 00:15:15,710 So I use this one a lot, clo tab. 208 00:15:15,710 --> 00:15:18,759 It creates this pre-written console log statement, 209 00:15:18,759 --> 00:15:22,744 allowing me to type what I wanna log, and then a message describing it. 210 00:15:25,603 --> 00:15:31,293 I also updated my OS keyboard settings, this key repeat and delete until repeat, 211 00:15:31,293 --> 00:15:36,159 so that my cursor travels extremely fast when I navigate an editor, or 212 00:15:36,159 --> 00:15:37,898 a terminal with my keys. 213 00:15:41,704 --> 00:15:44,540 Here's some ways to implement shortcuts or snippets. 214 00:15:45,590 --> 00:15:51,290 Shortcutfoo was something I used when I started programming to practice shortcuts. 215 00:15:51,290 --> 00:15:57,060 It gamifies learning shortcuts for various text editors, apps, and the commandline. 216 00:15:58,700 --> 00:16:02,688 You can also search for extensions in your editor for whatever language or 217 00:16:02,688 --> 00:16:04,500 framework that you use the most. 218 00:16:05,950 --> 00:16:10,893 I google shortcut cheat sheets for all of the applications that I use, and 219 00:16:10,893 --> 00:16:13,776 then I bookmark those for easy reference. 220 00:16:13,776 --> 00:16:18,786 Workspace organization applications offer a great way to utilize shortcuts, 221 00:16:18,786 --> 00:16:20,590 and to boost productivity. 222 00:16:21,630 --> 00:16:25,890 You can use apps to organize your workspace, like Spectacle or Magnet. 223 00:16:27,490 --> 00:16:31,040 You can also make your own shortcuts and snippets in your editor, or 224 00:16:31,040 --> 00:16:32,360 your operating system. 225 00:16:33,430 --> 00:16:37,416 I use Hammerspoon, which allows you to create shortcuts for 226 00:16:37,416 --> 00:16:41,572 window organization, and lots of other OS automation tasks. 227 00:16:46,676 --> 00:16:48,210 Now problem solving. 228 00:16:50,380 --> 00:16:54,038 Now that we've identified some architectural patterns, and 229 00:16:54,038 --> 00:16:56,108 how to best read and navigate code, 230 00:16:56,108 --> 00:17:00,329 we can dive deeper into the logistics of actually problem solving code. 231 00:17:04,116 --> 00:17:08,100 When coding, you're inevitably going to run into errors. 232 00:17:08,100 --> 00:17:10,867 This will happen at all stages of your career, so 233 00:17:10,867 --> 00:17:13,440 it's crucial to get comfortable with them. 234 00:17:14,460 --> 00:17:17,390 This is something I struggled a lot with starting out, 235 00:17:17,390 --> 00:17:19,950 because it felt like every error was a failure. 236 00:17:21,090 --> 00:17:24,990 It seemed like the majority of my coding time was spent hitting errors, 237 00:17:24,990 --> 00:17:28,120 rather than having my code actually runs successfully. 238 00:17:29,250 --> 00:17:34,660 But over time, you realize that this is expected and totally normal. 239 00:17:34,660 --> 00:17:38,194 So getting comfortable with errors makes the process of coding a lot 240 00:17:38,194 --> 00:17:39,250 less frustrating. 241 00:17:40,420 --> 00:17:42,905 Let's get more familiar with errors, and 242 00:17:42,905 --> 00:17:46,434 then go over how we can utilize them to help us problem solve. 243 00:17:49,748 --> 00:17:54,345 The two types of errors you're likely to encounter are compile time and 244 00:17:54,345 --> 00:17:56,240 runtime errors. 245 00:17:56,240 --> 00:17:59,030 Compile time errors are caught early. 246 00:17:59,030 --> 00:18:04,581 And they're often syntax errors, like missing a parentheses call in a function, 247 00:18:04,581 --> 00:18:09,060 IDs, and some text editors with syntax highlighting. 248 00:18:09,060 --> 00:18:10,107 Highlighting and 249 00:18:10,107 --> 00:18:14,230 linters will often alert you of compile time errors as you write code. 250 00:18:15,330 --> 00:18:17,650 Otherwise, they'll get triggered when you try to run the code. 251 00:18:19,050 --> 00:18:22,960 Runtime errors are errors your code encounters when the code is running. 252 00:18:24,370 --> 00:18:28,668 You'll know you've had a runtime error when you encounter an error message and 253 00:18:28,668 --> 00:18:30,500 a stack trace. 254 00:18:30,500 --> 00:18:35,368 This can show up in your browser console, in your terminal, your IDE, or 255 00:18:35,368 --> 00:18:36,320 in your logs. 256 00:18:39,500 --> 00:18:44,185 An error stack trace is a printout of information about the call stack 257 00:18:44,185 --> 00:18:46,381 at the time the error occurred. 258 00:18:46,381 --> 00:18:50,998 Since our errors will often show up with a message and a stack trace, 259 00:18:50,998 --> 00:18:54,320 we wanna be sure we understand their structure. 260 00:18:56,650 --> 00:18:58,295 So what is a call stack? 261 00:19:00,302 --> 00:19:05,770 You can think of a program as pushing and popping methods from a stack. 262 00:19:05,770 --> 00:19:08,060 This stack is known as the call stack. 263 00:19:09,450 --> 00:19:11,487 Whenever there's a function call, 264 00:19:11,487 --> 00:19:14,450 you can visualize it being pushed on top of the stack. 265 00:19:15,450 --> 00:19:20,750 And after it finishes running, it then gets removed, or popped from the stack. 266 00:19:20,750 --> 00:19:23,620 When no methods are left in the call stack, 267 00:19:23,620 --> 00:19:26,745 that means the program has finished running. 268 00:19:26,745 --> 00:19:32,534 And understanding code as a stack helps us make sense of an error stack trace. 269 00:19:35,730 --> 00:19:40,100 An error stack trace shows you each line of code that your program's called. 270 00:19:41,500 --> 00:19:45,006 Somewhere in that stack of calls, an error was triggered, and 271 00:19:45,006 --> 00:19:48,660 the system was unable to continue popping items off of the stack. 272 00:19:50,150 --> 00:19:51,510 So let's take an example. 273 00:19:52,580 --> 00:19:56,453 Here, we can start by reading the error message this provides. 274 00:19:56,453 --> 00:19:59,810 Type error dB101 is not a function. 275 00:20:01,910 --> 00:20:04,490 Now we can move into the stack trace. 276 00:20:04,490 --> 00:20:08,957 Generally, the cause of the error is going to be coming from this first line in 277 00:20:08,957 --> 00:20:10,000 the stack trace. 278 00:20:11,000 --> 00:20:14,551 A lot of the information below this line isn't really helpful, 279 00:20:14,551 --> 00:20:18,010 because you didn't run much of this code knowingly. 280 00:20:18,010 --> 00:20:19,370 It happens at a lower level. 281 00:20:21,140 --> 00:20:26,604 Each line includes a variable name, the file paths, and then a line number. 282 00:20:29,332 --> 00:20:34,490 So we can go and examine in our code using these to devise a solution. 283 00:20:36,530 --> 00:20:40,720 I recognize the variable name here, this getCityById. 284 00:20:40,720 --> 00:20:46,660 So I can go to the line 17 here in this cities_js actions file. 285 00:20:48,250 --> 00:20:51,760 Now that I've isolated where exactly the error is coming from, 286 00:20:51,760 --> 00:20:53,320 I can return to the message. 287 00:20:55,080 --> 00:20:58,310 I didn't write this function from scratch though. 288 00:20:58,310 --> 00:21:01,400 It's coming from this external DB library. 289 00:21:02,580 --> 00:21:05,260 Since it's complaining it's not a function, 290 00:21:05,260 --> 00:21:09,020 I can go through a checklist in my head, and figure out why that is. 291 00:21:10,060 --> 00:21:11,340 Did I misspell it somehow? 292 00:21:13,390 --> 00:21:16,050 Yep, yeah, this method, one or none. 293 00:21:17,120 --> 00:21:22,230 It's supposed to be one or none, [LAUGH] but I misspelled it here and forgot an n. 294 00:21:24,010 --> 00:21:29,500 And while this is a fairly minor error, it's a common one. 295 00:21:29,500 --> 00:21:33,150 And having a process in place helps us to solve it quickly. 296 00:21:34,310 --> 00:21:39,146 Sometimes the stack trace is referencing code you wrote, like it is here, 297 00:21:39,146 --> 00:21:41,310 but that's not always the case. 298 00:21:42,610 --> 00:21:47,069 Sometimes the most nebulous stack traces are those in which the error was caused by 299 00:21:47,069 --> 00:21:49,330 a third party library. 300 00:21:49,330 --> 00:21:54,167 If this is the case, still try to do your best to read through the stack trace, and 301 00:21:54,167 --> 00:21:57,100 reason about what part of the code broke and why. 302 00:21:58,670 --> 00:22:02,752 Now that we're familiar with errors and their stack traces, 303 00:22:02,752 --> 00:22:05,824 we can look into more tools to help debug them. 304 00:22:08,542 --> 00:22:09,680 Logging and printing. 305 00:22:10,790 --> 00:22:15,770 Logging print statements are a perfectly valid practice for debugging. 306 00:22:15,770 --> 00:22:20,840 As a JavaScript developer, adding console logs is a very common way to debug. 307 00:22:21,920 --> 00:22:26,140 Print statements can be used similarly in other languages. 308 00:22:26,140 --> 00:22:30,573 It's a good practice to add a descriptive string to the log, so 309 00:22:30,573 --> 00:22:33,511 you can easily find it among your output. 310 00:22:33,511 --> 00:22:38,356 The limitation though with log and print statements is that developers 311 00:22:38,356 --> 00:22:42,159 need to deliberately select which information to log. 312 00:22:42,159 --> 00:22:46,885 Which can result in a lot of trial and error, as well as leave out the program's 313 00:22:46,885 --> 00:22:53,520 bigger picture, Googling the error. 314 00:22:53,520 --> 00:22:58,360 Looking up the error on Google is always the go-to option that offers helpful 315 00:22:58,360 --> 00:23:00,230 results more often than not. 316 00:23:00,230 --> 00:23:03,766 When googling your error, try to keep it generalized, and 317 00:23:03,766 --> 00:23:06,180 include only the keywords in the error. 318 00:23:07,460 --> 00:23:11,795 Try to leave out specific variable names from your code, or details related to 319 00:23:11,795 --> 00:23:16,470 your local machine, as they might prevent the most useful results from appearing. 320 00:23:17,540 --> 00:23:23,711 It can also be helpful to include the framework, or the library you're using, 321 00:23:23,711 --> 00:23:28,331 and the search term, if the error is not library specific. 322 00:23:28,331 --> 00:23:32,389 I'm sure many of you have already had plenty of practice googling errors. 323 00:23:32,389 --> 00:23:36,127 And that's something you're gonna continue throughout your career, 324 00:23:36,127 --> 00:23:39,629 as you're constantly learning and keeping up with technologies. 325 00:23:39,629 --> 00:23:42,400 So refining the skill will come with time, and 326 00:23:42,400 --> 00:23:45,540 you'll develop a practice that feels best for you. 327 00:23:47,160 --> 00:23:51,281 I generally start with copying the base error message, and 328 00:23:51,281 --> 00:23:55,815 I try to keep it as short and specific to the error as possible, but 329 00:23:55,815 --> 00:23:58,630 not too specific to my particular code. 330 00:23:59,980 --> 00:24:06,129 And I include the associated language or library if necessary. 331 00:24:06,129 --> 00:24:10,892 And depending on the caliber of results, I'll continue editing that search to 332 00:24:10,892 --> 00:24:15,582 either be more or less specific, maybe adding quotations to parts of the error 333 00:24:15,582 --> 00:24:20,220 that I absolutely want to see results for until I find the most useful result. 334 00:24:21,420 --> 00:24:25,314 If the error is specific to my company's proprietary software, 335 00:24:25,314 --> 00:24:29,207 instead of googling first, I'll utilize the same process, but 336 00:24:29,207 --> 00:24:33,170 search the error in our communications channel. 337 00:24:33,170 --> 00:24:38,018 There have been plenty of times where doing this unblocked me right away, and 338 00:24:38,018 --> 00:24:43,102 then saved me from going down a googling path that likely wouldn't have helped. 339 00:24:47,346 --> 00:24:52,211 Debuggers, debuggers solve the pain points of printing and logging, 340 00:24:52,211 --> 00:24:57,643 by allowing developers to walk through a program step by step as it's running, 341 00:24:57,643 --> 00:25:03,030 and stopped to examine variables with more fine tuned control. 342 00:25:03,030 --> 00:25:08,122 Doing this allows you to see a variables are assigned to their expected values, 343 00:25:08,122 --> 00:25:13,290 and to go through the programs flow, and ensure that it's executing properly. 344 00:25:14,370 --> 00:25:17,060 There are many ways to use a debugger. 345 00:25:17,060 --> 00:25:20,664 If you're running JavaScript, you can use the inspector and 346 00:25:20,664 --> 00:25:25,180 set break points as your code runs in the browser, like in this example here. 347 00:25:26,520 --> 00:25:31,343 If you're in an IVE, or a text editor, you can set break points in 348 00:25:31,343 --> 00:25:35,749 the code before running your code to utilize the debugger. 349 00:25:39,633 --> 00:25:40,440 And tests, 350 00:25:40,440 --> 00:25:46,180 tests serve as documentation to understand the intent behind code in your project. 351 00:25:47,360 --> 00:25:52,145 Reading through existing tests in parts of the code base where your problem solving 352 00:25:52,145 --> 00:25:55,630 can help you to understand the codes expected behavior, and 353 00:25:55,630 --> 00:25:58,110 hopefully provide some clarity for a fix. 354 00:25:59,520 --> 00:26:03,326 After resolving an issue, be sure to update us to account for 355 00:26:03,326 --> 00:26:04,530 the bug you fixed. 356 00:26:06,230 --> 00:26:10,980 And if there aren't any tests, then add them for the person coming after you. 357 00:26:14,935 --> 00:26:19,478 If none of the previous methods help you, you can always ask for help, or 358 00:26:19,478 --> 00:26:24,340 request a pairing or knowledge share session with a teammate on the project. 359 00:26:25,540 --> 00:26:31,740 When asking for help, be sure to provide as much relevant information as possible. 360 00:26:31,740 --> 00:26:35,815 Include the technologies you're using, the version numbers, 361 00:26:35,815 --> 00:26:38,924 the error in the stack trace you encountered, and 362 00:26:38,924 --> 00:26:43,160 all the steps that you've exhausted already in trying to debug it. 363 00:26:44,410 --> 00:26:46,119 This is easier said than done, 364 00:26:46,119 --> 00:26:49,220 especially as a new programmer coming into this field. 365 00:26:50,380 --> 00:26:55,440 Asking for help has been one of my biggest struggles, because it requires a lot 366 00:26:55,440 --> 00:27:00,282 of vulnerability in admitting your struggles, and what you don't know. 367 00:27:00,282 --> 00:27:04,050 And it opens up the potential for judgment. 368 00:27:04,050 --> 00:27:10,280 But the reward of overcoming that fear and getting unblocked is always worth it. 369 00:27:11,580 --> 00:27:15,421 You may be surprised to learn that others more senior than you had gone through 370 00:27:15,421 --> 00:27:16,260 the same thing. 371 00:27:17,620 --> 00:27:21,628 Doing this publicly also helps those who come after you, and 372 00:27:21,628 --> 00:27:27,170 encounter the same error in the future by reducing hardship on their end. 373 00:27:27,170 --> 00:27:29,460 So you can also think of it as paying it forward. 374 00:27:34,180 --> 00:27:38,645 And finally, I'll go over some common pitfalls that I've encountered when 375 00:27:38,645 --> 00:27:41,472 working in problem solving and large projects. 376 00:27:44,430 --> 00:27:50,158 Misspellings, a very common source of error is the result of misspellings or 377 00:27:50,158 --> 00:27:52,900 small typos, especially early on. 378 00:27:54,050 --> 00:27:59,043 Like what the error stack that I shared earlier, sometimes I'll get an error, and 379 00:27:59,043 --> 00:28:01,625 then I get lost in the stack trace details. 380 00:28:01,625 --> 00:28:06,170 And I don't catch on a first glance that maybe one letter's off, 381 00:28:06,170 --> 00:28:08,910 and then causing my code to go haywire. 382 00:28:10,360 --> 00:28:14,500 And it sends out either the package that incorporates a spell check in my code to 383 00:28:14,500 --> 00:28:18,090 save me from these issues in the future, which I highly recommend. 384 00:28:19,450 --> 00:28:23,468 Also, make good use of your projects linting setup. 385 00:28:23,468 --> 00:28:26,657 Having clear style rules defined, and 386 00:28:26,657 --> 00:28:32,266 then utilizing a linter extension in your editor can save you time and 387 00:28:32,266 --> 00:28:37,696 trouble by showing you typos and syntax errors as you're coding. 388 00:28:37,696 --> 00:28:40,818 And they can fix them for you by simply saving the file. 389 00:28:44,171 --> 00:28:47,383 Version issues, when working on a project, 390 00:28:47,383 --> 00:28:53,910 be sure to thoroughly read the readme, or documentation for development setup. 391 00:28:53,910 --> 00:28:57,488 And ensure you're using the correct versions of libraries and 392 00:28:57,488 --> 00:28:59,590 packages specified in the project. 393 00:29:00,790 --> 00:29:04,759 Version issues have been one of the most common source of errors for me, and 394 00:29:04,759 --> 00:29:08,791 often trigger cryptic errors from deep within libraries that aren't clear 395 00:29:08,791 --> 00:29:10,570 about how they relate to my code. 396 00:29:11,990 --> 00:29:16,229 Usually, if I encounter errors like this, before going to Google, 397 00:29:16,229 --> 00:29:20,480 I check if all of my versions I'm on are compatible with the project. 398 00:29:21,720 --> 00:29:26,698 Many times, the versions of libraries on my local machine might have diverge 399 00:29:26,698 --> 00:29:31,300 after some subsequent installs, without my knowledge. 400 00:29:31,300 --> 00:29:36,184 Or I forgot to activate and run the project in a virtual environment. 401 00:29:36,184 --> 00:29:41,090 And that environment is the one that contains the appropriate versions. 402 00:29:44,950 --> 00:29:48,426 Undefined variables, in JavaScript, look out for 403 00:29:48,426 --> 00:29:53,040 undefined variables which can throw runtime errors. 404 00:29:53,040 --> 00:29:57,490 These are generally easy to catch, but they can happen often. 405 00:29:57,490 --> 00:30:03,190 For example, if a value didn't come back from an API call that you were expecting 406 00:30:03,190 --> 00:30:08,840 Or you're pulling data, or a property from an object that doesn't exist. 407 00:30:12,690 --> 00:30:17,213 Environment variables, sometimes you may have a bug where the environment 408 00:30:17,213 --> 00:30:21,000 variable you need to get data isn't being set. 409 00:30:21,000 --> 00:30:25,179 For example, the API key variable you need isn't set, or 410 00:30:25,179 --> 00:30:31,163 the application is maybe trying to pull a URL from a certain environment variable. 411 00:30:31,163 --> 00:30:34,648 And that's not being set, or the secret key, or 412 00:30:34,648 --> 00:30:38,820 some key you need to grab sensitive data isn't being set. 413 00:30:40,200 --> 00:30:44,806 Missing these values in your environment variables, or having them change, and 414 00:30:44,806 --> 00:30:47,990 then being out of date with them can cause errors. 415 00:30:47,990 --> 00:30:52,510 So if you're running into errors making API calls, or trying to retrieve data, 416 00:30:52,510 --> 00:30:56,565 checking the state of your environment variables is always a good call, 417 00:30:56,565 --> 00:31:01,100 especially if you've been scratching your head and trying to debug for a while. 418 00:31:05,300 --> 00:31:11,263 To wrap up, we've gone over identifying a project's architectural pattern, 419 00:31:11,263 --> 00:31:15,308 the importance of reading code, and how to read code. 420 00:31:15,308 --> 00:31:19,553 Code navigation, some debugging techniques, and 421 00:31:19,553 --> 00:31:22,254 common culprits for errors, and 422 00:31:22,254 --> 00:31:28,046 apply these guides in a way that feels best for you in any order you wish. 423 00:31:28,046 --> 00:31:32,330 None of these are set in stone, but they're all useful for 424 00:31:32,330 --> 00:31:37,600 leveling up your knowledge in a project and problem-solving skills. 425 00:31:37,600 --> 00:31:42,502 It's important to acknowledge that coding is a journey with ups and downs, 426 00:31:42,502 --> 00:31:45,190 and developing these skills takes time. 427 00:31:46,280 --> 00:31:49,810 Please be gentle with yourselves when it gets hard. 428 00:31:49,810 --> 00:31:53,824 Trust that you'll get more comfortable with the unknowns over time, 429 00:31:53,824 --> 00:31:56,760 and take solace in the fact that you're not alone. 430 00:31:57,870 --> 00:32:00,320 We're all on the same journey together. 431 00:32:00,320 --> 00:32:04,090 And there's guaranteed someone is in those same position as you are right now. 432 00:32:06,070 --> 00:32:09,730 Wherever you are right now is perfect, and it's exactly where you need to be. 433 00:32:11,220 --> 00:32:15,260 Thank you so much for coming to my talk, and thank you to treehouse for having me. 434 00:32:15,260 --> 00:32:17,530 It's an honor to be here. 435 00:32:17,530 --> 00:32:21,200 And I'll now open it up to some questions, if there are any. 436 00:32:24,170 --> 00:32:31,760 Okay, great, pulling up Q&A. 437 00:32:31,760 --> 00:32:37,180 Okay, from Prashant, can you please explain that last snippet part? 438 00:32:38,610 --> 00:32:39,884 How would I do that? 439 00:32:39,884 --> 00:32:48,098 Let's go back here to the snippets slide. 440 00:32:48,098 --> 00:32:53,109 Yeah, so again, depending on your IDE, or a text editor, 441 00:32:53,109 --> 00:32:58,426 it's likely to have a lot of extensions where you can search for 442 00:32:58,426 --> 00:33:01,454 either an extension, or a plugin. 443 00:33:01,454 --> 00:33:03,895 And just search whatever language. 444 00:33:03,895 --> 00:33:06,735 Or maybe if you're using react, 445 00:33:06,735 --> 00:33:12,113 the framework that you're using in a project, essentially, 446 00:33:12,113 --> 00:33:17,287 you can just search any of the technologies in your project in 447 00:33:17,287 --> 00:33:23,940 an extension search, and then look for any snippet applications. 448 00:33:23,940 --> 00:33:29,058 So for me, I don't remember the exact name of the extension package, 449 00:33:29,058 --> 00:33:31,920 but I just looked up JavaScript. 450 00:33:31,920 --> 00:33:36,641 And it was one of the first extension results, and 451 00:33:36,641 --> 00:33:40,803 they have so many useful snippets like clo, 452 00:33:40,803 --> 00:33:46,200 where you just hit this with tab, and then it puts a cursor 453 00:33:46,200 --> 00:33:51,820 on both the log message, and whatever you want to log. 454 00:33:51,820 --> 00:33:54,798 And you can just go right in there, 455 00:33:54,798 --> 00:33:59,934 plus lots of other useful ones, like just a console log, or 456 00:33:59,934 --> 00:34:05,900 importing a file once to react, just to set up a component. 457 00:34:05,900 --> 00:34:06,445 There's so many. 458 00:34:06,445 --> 00:34:11,420 But yeah, they have ones that are premade for you like this. 459 00:34:11,420 --> 00:34:17,850 Or you can dig in more into your text editor settings, and be able to update. 460 00:34:17,850 --> 00:34:22,974 There should be a snippets file where you can create your own shortcuts, 461 00:34:22,974 --> 00:34:25,500 or snippets even similar to these. 462 00:34:25,500 --> 00:34:30,727 You can essentially make a short cutter snippet for anything you do in a project. 463 00:34:30,727 --> 00:34:35,583 And it will generally be in some sort of settings, or configuration file, and 464 00:34:35,583 --> 00:34:38,020 there are plenty of tutorials online. 465 00:34:38,020 --> 00:34:43,900 I literally Google [LAUGH] how do I create my own snippet in my text editor? 466 00:34:43,900 --> 00:34:51,970 And there's plenty of tutorials that step by step walk you through how to do it. 467 00:34:51,970 --> 00:34:56,030 So yeah, hopefully that provides more insight there. 468 00:34:58,040 --> 00:35:05,538 And let's see, from Roberto, does stack tracing run top bottom or bottom top? 469 00:35:05,538 --> 00:35:08,566 Excellent question. 470 00:35:08,566 --> 00:35:17,110 So yes, for stack traces, you're gonna look at them from top to bottom. 471 00:35:17,110 --> 00:35:24,014 The error, whenever the stack trace appears, and your program's in error, 472 00:35:24,014 --> 00:35:30,180 the top line is where the error was encountered in your code. 473 00:35:30,180 --> 00:35:32,694 So here, it ran the code, and 474 00:35:32,694 --> 00:35:38,425 then when it got to this get city by a D function in my travel project, 475 00:35:38,425 --> 00:35:42,970 it encountered the error here within that function. 476 00:35:44,020 --> 00:35:48,660 And again, gives you all of this useful info, like the line number, 477 00:35:48,660 --> 00:35:53,320 the character count on that line where exactly it happened. 478 00:35:53,320 --> 00:35:55,378 So always start with the top. 479 00:35:55,378 --> 00:36:02,643 And then if it's useful, sometimes it's useful to continue reading below. 480 00:36:02,643 --> 00:36:07,994 Essentially, the stack trace gives you a better 481 00:36:07,994 --> 00:36:13,091 idea of the program when this error occurred. 482 00:36:13,091 --> 00:36:16,534 So it ran this function, and 483 00:36:16,534 --> 00:36:22,780 this function was called within this function. 484 00:36:22,780 --> 00:36:27,531 And again, kind of having this visual helps me a lot, 485 00:36:27,531 --> 00:36:32,820 cuz you can think of as okay, this program is the main call. 486 00:36:34,230 --> 00:36:36,859 And then after the program is called, 487 00:36:36,859 --> 00:36:40,930 the first function called is this print square. 488 00:36:40,930 --> 00:36:42,753 Then that gets on top. 489 00:36:42,753 --> 00:36:49,620 And then inside print square, we called square n, so that gets put on top. 490 00:36:49,620 --> 00:36:55,881 And so you can just think the concept of call stacks use Last In, 491 00:36:55,881 --> 00:37:02,750 First Out, so whatever call is on top was the last call that was made. 492 00:37:04,200 --> 00:37:07,820 And then once that call finishes, it gets popped off. 493 00:37:08,910 --> 00:37:13,988 So that might be a little helpful visual to keep in mind when you 494 00:37:13,988 --> 00:37:20,370 run into an error stack trace, can be okay, this is the top of the stack. 495 00:37:20,370 --> 00:37:24,132 So this was the last function called in my program. 496 00:37:24,132 --> 00:37:29,179 And if this program were to have continued running without 497 00:37:29,179 --> 00:37:34,180 any errors, then this would have been popped off. 498 00:37:34,180 --> 00:37:38,696 And then these functions would all continue getting popped off until there 499 00:37:38,696 --> 00:37:43,810 aren't any more left, and that means your program ran successfully. 500 00:37:43,810 --> 00:37:47,240 So yeah, hopefully that was a bit useful. 501 00:37:48,490 --> 00:37:51,620 And then Paula asked, 502 00:37:51,620 --> 00:37:56,730 do you import or install a debugger? 503 00:37:56,730 --> 00:37:59,264 This generally varies. 504 00:37:59,264 --> 00:38:07,120 But I'm not sure if you necessarily need to install the debugger. 505 00:38:07,120 --> 00:38:11,799 I believe it's generally accessible within whatever environment 506 00:38:11,799 --> 00:38:15,290 that you're developing your project in. 507 00:38:15,290 --> 00:38:20,630 So for example, again, yeah, if you're working 508 00:38:20,630 --> 00:38:25,349 on a web application, or using JavaScript, 509 00:38:25,349 --> 00:38:30,934 an easy not having to get two set up in a debugger option 510 00:38:30,934 --> 00:38:36,150 is exploring your console in the web browser. 511 00:38:36,150 --> 00:38:43,800 And if you open up the developer tools, oops, this is Firefox. 512 00:38:43,800 --> 00:38:44,909 But Chrome and 513 00:38:44,909 --> 00:38:51,024 other browsers have debugger located somewhere within the developer tools. 514 00:38:51,024 --> 00:38:54,974 And can easily Google how to utilize them, and 515 00:38:54,974 --> 00:39:00,550 there's usually plenty of step-by-step tutorials for that. 516 00:39:01,810 --> 00:39:06,840 But yeah, they live somewhere in your developer tools in the browser. 517 00:39:06,840 --> 00:39:12,105 And then from here, you can just step into your code, 518 00:39:12,105 --> 00:39:18,892 and then set these breakpoints, wherever you want the code to stop, 519 00:39:18,892 --> 00:39:23,806 and then be able to sort of analyze each variable in 520 00:39:23,806 --> 00:39:28,504 this call stack as you run the code on a browser. 521 00:39:28,504 --> 00:39:37,140 But yeah, there's also a debugger available in node that you get for free. 522 00:39:37,140 --> 00:39:40,600 So I don't believe you necessarily have to install it. 523 00:39:40,600 --> 00:39:43,550 It's just a matter of finding a tutorial, and 524 00:39:43,550 --> 00:39:49,540 figuring out how to get that set up, and configured for your specific project. 525 00:39:49,540 --> 00:39:51,005 And I use VS Code. 526 00:39:51,005 --> 00:39:56,480 VS Code has the debugger built in as well. 527 00:39:56,480 --> 00:40:02,472 So no importing necessary, I just again There may be some things 528 00:40:02,472 --> 00:40:08,240 you have to connect to that are specific to your project to make best use of it. 529 00:40:08,240 --> 00:40:10,360 And they're available. 530 00:40:10,360 --> 00:40:14,650 And I think, most if not every other text editor, 531 00:40:14,650 --> 00:40:19,666 definitely available and IDEs like IntelliJ, Eclipse. 532 00:40:19,666 --> 00:40:23,821 And then, full disclosure, [LAUGH]. 533 00:40:23,821 --> 00:40:28,163 I'm definitely not a debugger expert, I use them occasionally. 534 00:40:28,163 --> 00:40:33,556 But honestly, I'm able to get by mostly from using console log or 535 00:40:33,556 --> 00:40:37,784 print statements when developing and debugging. 536 00:40:37,784 --> 00:40:43,357 Awesome, and then, Paula again. 537 00:40:43,357 --> 00:40:46,751 How long should you wait for until you ask for help? 538 00:40:46,751 --> 00:40:51,587 This is a good one, definitely subjective. 539 00:40:51,587 --> 00:40:58,605 I've had mentors or people recommend, waiting a super short time, 540 00:40:58,605 --> 00:41:03,687 even 20 to 40 minutes before asking for help. 541 00:41:03,687 --> 00:41:07,911 For me, that's 542 00:41:07,911 --> 00:41:13,045 a goal to strive to. 543 00:41:13,045 --> 00:41:20,690 But I guess, especially coming from a self-taught coding boot camp. 544 00:41:20,690 --> 00:41:25,405 We're so reliance on ourselves for 545 00:41:25,405 --> 00:41:31,702 learning and having to figure it out on our own. 546 00:41:31,702 --> 00:41:36,505 I still can have those stubborn tendencies where I'm just like, 547 00:41:36,505 --> 00:41:38,607 no, I need to figure it out. 548 00:41:38,607 --> 00:41:39,323 I got this. 549 00:41:39,323 --> 00:41:44,568 And then where as the time goes, suddenly it's been a few hours. 550 00:41:44,568 --> 00:41:47,901 And that can be a workday sort of lost. 551 00:41:47,901 --> 00:41:55,076 So I try to keep it within an hour or two. 552 00:41:55,076 --> 00:42:00,815 But yeah, these things, they ebb and flow over time, and again are subjective. 553 00:42:00,815 --> 00:42:06,677 I know some coworkers who, they encounter an error and it's very immediate. 554 00:42:06,677 --> 00:42:11,558 [LAUGH] Post in the channel, has someone encountered this? 555 00:42:11,558 --> 00:42:13,577 Could someone help me? 556 00:42:13,577 --> 00:42:18,407 So yeah, definitely, kind of just feel it out for 557 00:42:18,407 --> 00:42:21,629 yourself, see what feels best. 558 00:42:21,629 --> 00:42:26,324 But like I said, I generally keep it within an hour to 559 00:42:26,324 --> 00:42:29,647 a couple hours before I ask for help. 560 00:42:29,647 --> 00:42:33,439 But also depends on the urgency, 561 00:42:33,439 --> 00:42:39,948 if it's super time sensitive the task needs to get done. 562 00:42:39,948 --> 00:42:47,428 Then that definitely means I'll like ask within maybe 20 minutes or less. 563 00:42:47,428 --> 00:42:53,167 So yeah, can be like feeling it out for yourself. 564 00:42:53,167 --> 00:42:58,767 And then Miguel asked, how do you jump out of a tag when you're programming? 565 00:42:58,767 --> 00:43:02,739 When a auto inserts a tag, is there a way to jump out of it? 566 00:43:07,030 --> 00:43:09,011 Jump out of a tag when you're programming. 567 00:43:13,114 --> 00:43:19,846 I'm not sure if you mean maybe an HTML tag or 568 00:43:19,846 --> 00:43:24,523 something that is specific to 569 00:43:24,523 --> 00:43:29,762 your text editor that's popping 570 00:43:29,762 --> 00:43:33,891 up to try to help you code. 571 00:43:33,891 --> 00:43:36,711 But [LAUGH] is it necessarily helpful? 572 00:43:40,340 --> 00:43:41,103 Yeah, I'm not sure. 573 00:43:41,103 --> 00:43:44,793 Cuz I don't know if I've encountered this issue myself. 574 00:43:44,793 --> 00:43:50,096 But if it is something that's like some sort of autocomplete in your 575 00:43:50,096 --> 00:43:55,688 text editor as you're coding, that you're having some issues with. 576 00:43:55,688 --> 00:44:03,212 I would definitely just try to dig into exactly why that's happening. 577 00:44:03,212 --> 00:44:08,477 Is it some default setting that's configured on your 578 00:44:08,477 --> 00:44:13,391 editor that is just kind of continuing to pop up and 579 00:44:13,391 --> 00:44:16,206 be annoying and not useful? 580 00:44:16,206 --> 00:44:21,539 Then I would try to figure out why exactly that's popping 581 00:44:21,539 --> 00:44:26,549 up as you're coding and figure out how to disable it. 582 00:44:26,549 --> 00:44:30,401 Or how to change wherever that rule or 583 00:44:30,401 --> 00:44:35,135 setting is defined in your editor settings. 584 00:44:35,135 --> 00:44:41,099 And either get rid of it or make it more useful for, 585 00:44:41,099 --> 00:44:44,081 what would be helpful for 586 00:44:44,081 --> 00:44:48,917 you to have something appear like that? 587 00:44:48,917 --> 00:44:50,505 I hope I understood that [LAUGH] properly. 588 00:44:50,505 --> 00:44:56,267 But I haven't encountered myself, so I am not 100% clear. 589 00:44:56,267 --> 00:45:03,636 And then, again, I sometimes have trouble with pulling data from an API. 590 00:45:03,636 --> 00:45:06,769 What are some simple best practices when encountering errors? 591 00:45:08,210 --> 00:45:10,155 Having trouble in pulling data from API. 592 00:45:10,155 --> 00:45:11,030 That's a good one. 593 00:45:11,030 --> 00:45:17,266 So again, kind of like I mentioned towards the end, 594 00:45:17,266 --> 00:45:23,931 one common culprit for errors being variables not being 595 00:45:23,931 --> 00:45:29,920 assigned the values that you're expecting. 596 00:45:29,920 --> 00:45:35,392 This is a common one for API calls, where maybe something 597 00:45:35,392 --> 00:45:42,008 isn't necessarily set properly with how you're using the API key. 598 00:45:42,008 --> 00:45:47,460 At least for me, with API calls, I first kinda isolate, 599 00:45:47,460 --> 00:45:52,870 well, here is my API key, what I expect it to be. 600 00:45:52,870 --> 00:46:01,610 And I also try calling it in different environments to test it as well. 601 00:46:01,610 --> 00:46:07,490 I could think of maybe a pep project they did recently where 602 00:46:07,490 --> 00:46:14,450 I was making an API call with the provided API key just in the browser, 603 00:46:14,450 --> 00:46:20,344 and was getting the data I expected back from the browser. 604 00:46:20,344 --> 00:46:23,248 But when I tried doing it in my project, 605 00:46:23,248 --> 00:46:27,040 outside of the browser in a different text editor. 606 00:46:27,040 --> 00:46:30,203 Then for some reason, 607 00:46:30,203 --> 00:46:36,203 I was getting an error code response back. 608 00:46:36,203 --> 00:46:40,930 I don't remember exactly, it was just something, maybe a 500 error, 609 00:46:40,930 --> 00:46:43,046 something wasn't authorized. 610 00:46:43,046 --> 00:46:50,262 And so for me, check the API key. 611 00:46:50,262 --> 00:46:54,221 Clearly that was good because it was working in the browser. 612 00:46:54,221 --> 00:47:01,740 So honestly, at that point, it can just be useful to sorta Google the error. 613 00:47:01,740 --> 00:47:08,558 And again, similar to what I mentioned when googling, 614 00:47:08,558 --> 00:47:13,498 including the error that you received. 615 00:47:13,498 --> 00:47:18,448 Maybe the API that you're using, where you're using it, 616 00:47:18,448 --> 00:47:23,010 and how you're using it, what library are you using? 617 00:47:23,010 --> 00:47:24,720 Is it the Axios library? 618 00:47:24,720 --> 00:47:28,420 Are you using a fetch library? 619 00:47:28,420 --> 00:47:33,207 And yeah, the exact error you're getting, can add the error and 620 00:47:33,207 --> 00:47:37,710 quotation marks just to get a specific result back. 621 00:47:37,710 --> 00:47:42,505 And, for me, that resolved my problem by 622 00:47:42,505 --> 00:47:47,849 including the fetch library that I was using. 623 00:47:47,849 --> 00:47:53,340 It turned out that I was missing some of the request 624 00:47:53,340 --> 00:47:58,180 parameters that were necessary in order for 625 00:47:58,180 --> 00:48:04,354 the API that I was trying to hit, to accept my response. 626 00:48:04,354 --> 00:48:11,531 And be like, okay, I have the proper request that I need. 627 00:48:11,531 --> 00:48:15,620 So I was able to get a response after that. 628 00:48:15,620 --> 00:48:20,753 So a lot of times it's missing certain keys on your request 629 00:48:20,753 --> 00:48:25,364 within the library where you're making that call, 630 00:48:25,364 --> 00:48:31,570 can be a good place to start after you're sure that the key is working. 631 00:48:34,670 --> 00:48:38,158 Is that error stacktrace in the terminal? 632 00:48:38,158 --> 00:48:42,505 That can vary depending on the project, but, 633 00:48:42,505 --> 00:48:46,190 well, in terms of where exactly it is. 634 00:48:46,190 --> 00:48:52,277 If you're running code in your terminal, then yes, it'll appear there. 635 00:48:52,277 --> 00:48:54,772 But if it's a web application, 636 00:48:54,772 --> 00:48:59,585 sometimes it'll just appear inside of the browser console. 637 00:48:59,585 --> 00:49:05,903 So if you go to your dev tools in the console within your browser, 638 00:49:05,903 --> 00:49:10,589 that's one thing I always do when developing. 639 00:49:10,589 --> 00:49:16,099 I'll run code in a terminal, but on the browser, I'll also always have my 640 00:49:16,099 --> 00:49:22,063 developer tools up with that console app as well, just so I can catch any errors. 641 00:49:22,063 --> 00:49:25,763 Because they can vary depending on where they show up. 642 00:49:25,763 --> 00:49:30,332 So just having both your developer tools and your console up, and 643 00:49:30,332 --> 00:49:34,167 then a terminal, and then just keeping an eye on both. 644 00:49:34,167 --> 00:49:37,609 And they can show up in either. 645 00:49:37,609 --> 00:49:43,616 Sylvester asked, at my work, we don't use any testing tools for our front end code, 646 00:49:43,616 --> 00:49:50,250 and mostly checked by running the website locally and test for expected behavior. 647 00:49:50,250 --> 00:49:53,020 Is this normal for front end web developers? 648 00:49:53,020 --> 00:49:56,317 Or do you have any advice on testing tools? 649 00:49:56,317 --> 00:50:01,706 I don't believe that's normal. 650 00:50:01,706 --> 00:50:08,880 [LAUGH] From what I know especially in our company, we're pretty big on testing. 651 00:50:08,880 --> 00:50:13,813 And so, while behavioral testing on a browser is 652 00:50:13,813 --> 00:50:18,158 absolutely important, and we do as well. 653 00:50:18,158 --> 00:50:22,975 We try to do our best anytime we can. 654 00:50:22,975 --> 00:50:28,491 And I do believe most companies are like this, 655 00:50:28,491 --> 00:50:31,182 we should be the goal. 656 00:50:31,182 --> 00:50:36,148 Because like I mentioned, tester, super useful when you're going 657 00:50:36,148 --> 00:50:41,554 through debugging and coding, because they serve as a document, right? 658 00:50:41,554 --> 00:50:45,080 As to why code is set up a certain way. 659 00:50:45,080 --> 00:50:46,741 So definitely recommend. 660 00:50:46,741 --> 00:50:50,660 And for front-end code, it depends on the library. 661 00:50:50,660 --> 00:50:56,123 But for our code at Pandora, we use React and Redux. 662 00:50:56,123 --> 00:51:03,150 And so we'll use, Jest is a great testing library for unit tests in React. 663 00:51:03,150 --> 00:51:07,582 And we also use Airbnb's test library, Enzyme, for 664 00:51:07,582 --> 00:51:12,240 testing specific functionality within the browser. 665 00:51:12,240 --> 00:51:18,800 And ensuring that the CSS and everything looks the way it should. 666 00:51:18,800 --> 00:51:22,017 But whatever languages you use in your project, 667 00:51:22,017 --> 00:51:25,399 I would highly recommend Google searching those. 668 00:51:25,399 --> 00:51:30,566 And then getting the initiative going on implementing those for 669 00:51:30,566 --> 00:51:34,312 every portion of your project, absolutely. 670 00:51:34,312 --> 00:51:36,800 Okay, awesome. 671 00:51:36,800 --> 00:51:40,100 So I think that's time for the presentation. 672 00:51:40,100 --> 00:51:43,217 But thank you all so much for coming and 673 00:51:43,217 --> 00:51:47,905 offering me the space to share what I've learned today. 674 00:51:47,905 --> 00:51:54,931 And also have my contact info here, please feel free to reach out to me anytime. 675 00:51:54,931 --> 00:52:00,124 I am happy to go into more detail of this presentation or just any questions 676 00:52:00,124 --> 00:52:04,870 about software engineering or career development in general. 677 00:52:04,870 --> 00:52:06,320 Happy to connect. 678 00:52:06,320 --> 00:52:07,020 So, thank you. 679 00:52:07,020 --> 00:52:08,320 Thank you. 680 00:52:08,320 --> 00:52:13,360 And I'll go ahead and stop sharing. 681 00:52:14,800 --> 00:52:15,520 Thank you so much. 682 00:52:15,520 --> 00:52:16,200 Take care.