WEBVTT 00:00:00.000 --> 00:00:02.779 Hey everyone, it's Mukundan again. Welcome back 00:00:02.779 --> 00:00:05.639 to Data and AI with Mukundan, where we explore 00:00:05.639 --> 00:00:09.980 what it really takes to build, explain and grow 00:00:09.980 --> 00:00:13.500 with your work in today's world of tech. This 00:00:13.500 --> 00:00:16.739 episode is part two of a series that I started 00:00:16.739 --> 00:00:22.460 recently and it's personal because I'm not just 00:00:22.460 --> 00:00:26.920 talking about code today, I'm talking about being 00:00:26.920 --> 00:00:32.899 seen. Understood, right? So, have you ever sent 00:00:32.899 --> 00:00:36.200 your work to someone? Let's say your manager. 00:00:37.200 --> 00:00:39.460 Maybe when you're interviewing, you sent it to 00:00:39.460 --> 00:00:43.219 your hiring manager, right? Or coming back to 00:00:43.219 --> 00:00:46.320 work, you're sending it to your teammate or your 00:00:46.320 --> 00:00:50.439 friend and gotten nothing back. No feedback, 00:00:50.780 --> 00:00:55.700 no comment, no sense that your work landed. Well, 00:00:55.820 --> 00:00:57.759 at least in case of your friend, not right away. 00:00:58.270 --> 00:01:00.210 Maybe you get it like a day later or something. 00:01:00.390 --> 00:01:03.210 And this happened to me, particularly with my 00:01:03.210 --> 00:01:07.430 friend. I think I sent him on like a Monday morning 00:01:07.430 --> 00:01:10.650 or something. And I didn't get a response until 00:01:10.650 --> 00:01:16.709 Wednesday. So no feedback, no comment. Nothing 00:01:16.709 --> 00:01:22.849 that my work reached them. And this was even 00:01:22.849 --> 00:01:27.209 after I'd sent my friend everything. clearly 00:01:27.209 --> 00:01:33.310 explaining in a blog post not yeah so in my friend's 00:01:33.310 --> 00:01:35.930 case it was a blog post in other cases that i've 00:01:35.930 --> 00:01:39.989 seen it was just like to make life easier i just 00:01:39.989 --> 00:01:43.150 write a long piece of document but try to explain 00:01:43.150 --> 00:01:47.030 it clearly even at work and again with my manager 00:01:47.030 --> 00:01:48.909 no response as well i think it would have been 00:01:48.909 --> 00:01:51.849 a seven or eight minute read and even with that 00:01:51.849 --> 00:01:55.840 it was just that you know i was waiting on this 00:01:55.840 --> 00:01:57.780 person's response like my manager's response 00:01:57.780 --> 00:02:01.900 i just didn't get it right away so i was just 00:02:01.900 --> 00:02:04.840 you know distraught like i spent some time working 00:02:04.840 --> 00:02:07.159 on it and uh you know i understand that people 00:02:07.159 --> 00:02:12.520 are busy so that's when i thought like well maybe 00:02:12.520 --> 00:02:15.840 the problem is me and and it is it was in this 00:02:15.840 --> 00:02:17.740 case right i've been trying to send out this 00:02:17.740 --> 00:02:20.639 big big reads not everybody has time to read 00:02:20.639 --> 00:02:24.770 it um and so that made me think like what if 00:02:24.770 --> 00:02:26.550 i could make it quicker so i built something 00:02:26.550 --> 00:02:30.490 new so this what i built was a tool that turns 00:02:30.490 --> 00:02:35.490 your code into a visual right like a diagram 00:02:35.490 --> 00:02:41.889 something that people can understand at a glance 00:02:41.889 --> 00:02:45.689 this episode is the story behind that tool and 00:02:45.689 --> 00:02:50.330 what it taught me about being visible about having 00:02:50.330 --> 00:02:57.110 clarity and why storytelling is just not optional 00:02:57.110 --> 00:03:00.229 anymore. Well, without further ado, let's dive 00:03:00.229 --> 00:03:04.689 in. So after I launched part one of the series 00:03:04.689 --> 00:03:09.270 about five weeks ago, when I introduced the Code 00:03:09.270 --> 00:03:11.750 to Story app, I thought I'd solved the problem. 00:03:11.930 --> 00:03:16.030 Finally, I could explain what my code did. And 00:03:16.030 --> 00:03:17.909 I mentioned during that time, it's like I even 00:03:17.909 --> 00:03:21.639 wrote a blog post walking through. every part 00:03:21.639 --> 00:03:25.500 of my tone detection app but when i sent it to 00:03:25.500 --> 00:03:28.659 my friends i mean friend in this case i'll send 00:03:28.659 --> 00:03:30.479 it to other friends as well it's just you know 00:03:30.479 --> 00:03:34.340 managers check router hiring managers retiring 00:03:34.340 --> 00:03:37.000 manager it's just something that i've seen as 00:03:37.000 --> 00:03:39.060 a pattern over the years it's just not something 00:03:39.060 --> 00:03:43.560 that has happened right now um whenever you send 00:03:43.560 --> 00:03:46.129 something you think that you're summarizing that's 00:03:46.129 --> 00:03:47.729 i mean this is something that i've been observing 00:03:47.729 --> 00:03:49.370 over a period of time like you're sending a big 00:03:49.370 --> 00:03:51.449 document you would think that's like a six or 00:03:51.449 --> 00:03:53.370 seven minute read and people don't respond right 00:03:53.370 --> 00:03:56.110 away when you're you know sending them maybe 00:03:56.110 --> 00:03:58.370 in the middle of the week but then again that's 00:03:58.370 --> 00:04:00.469 when they have time to read it they don't want 00:04:00.469 --> 00:04:03.590 to be spending their weekends reading uh going 00:04:03.590 --> 00:04:06.150 through that document but you have have you ever 00:04:06.150 --> 00:04:09.110 experienced this it's basically complete silence 00:04:09.110 --> 00:04:13.560 like you can hear the sound of crickets and the 00:04:13.560 --> 00:04:15.939 response otherwise you would get would be too 00:04:15.939 --> 00:04:18.939 busy didn't get to it yet school what does it 00:04:18.939 --> 00:04:21.920 do it again so that's something usually a friend 00:04:21.920 --> 00:04:26.079 would say and that's when it kind of stings and 00:04:26.079 --> 00:04:29.300 it also got me thinking what I realized is time 00:04:29.300 --> 00:04:33.980 is the new attention and here's the thing your 00:04:33.980 --> 00:04:36.959 audience no matter how much they care and especially 00:04:36.959 --> 00:04:40.459 your friend they are busy everybody has their 00:04:40.459 --> 00:04:43.490 own life They don't want 10 minutes. I mean, 00:04:43.490 --> 00:04:44.829 they don't want 10 minutes to read something 00:04:44.829 --> 00:04:47.170 that you've sent. They don't want to be taking 00:04:47.170 --> 00:04:51.689 that out of their time. Nobody does. Yes, they 00:04:51.689 --> 00:04:54.990 want to be nice to you. They will, especially 00:04:54.990 --> 00:04:56.829 your friend, they will try to do that for you. 00:04:58.490 --> 00:05:01.329 But can you send it to them in a shorter format 00:05:01.329 --> 00:05:07.610 as well? They want 5 seconds, right? 10 seconds 00:05:07.610 --> 00:05:11.139 even. something really really quick they want 00:05:11.139 --> 00:05:15.600 something visual something they can see immediate 00:05:15.600 --> 00:05:22.240 understandable so i stopped for a brief moment 00:05:22.240 --> 00:05:26.240 to write these longer explanations yeah i mean 00:05:26.240 --> 00:05:28.459 sure like longer form content has its own value 00:05:28.459 --> 00:05:31.899 it stays forever right and it's you will find 00:05:31.899 --> 00:05:34.560 a lot of use for that long form content when 00:05:34.560 --> 00:05:38.660 people have time but when they don't writing 00:05:38.660 --> 00:05:41.060 longer explanations isn't really helping and 00:05:41.060 --> 00:05:44.279 I'm just thinking to myself how can I get it 00:05:44.279 --> 00:05:51.959 to them instantly the answer is visual storytelling 00:05:51.959 --> 00:05:55.459 so what that means something that you can see 00:05:55.459 --> 00:05:58.019 and here how the tool works so this is the tool 00:05:58.019 --> 00:06:01.620 that I built which would help you to do some 00:06:01.620 --> 00:06:05.199 visual storytelling it's a simple Python based 00:06:05.199 --> 00:06:08.819 app that uses streamlit again from the uh i say 00:06:08.819 --> 00:06:10.379 streamlit again because that's what i use for 00:06:10.379 --> 00:06:14.060 code to story as well and i've been using that 00:06:14.060 --> 00:06:16.180 for a ton of my applications streamlit is this 00:06:16.180 --> 00:06:19.339 amazing if you're if you're joined in for the 00:06:19.339 --> 00:06:21.779 first time streamlit is this amazing python based 00:06:21.779 --> 00:06:26.980 uh front -end library basically it helps to show 00:06:26.980 --> 00:06:29.720 your program helps to show your code that you've 00:06:29.720 --> 00:06:35.639 written in the back end to other people It makes 00:06:35.639 --> 00:06:38.379 it so like a web website application that you 00:06:38.379 --> 00:06:43.680 see as a first -time user. I mean as a Someone 00:06:43.680 --> 00:06:47.040 who's never understood code in their life. Let's 00:06:47.040 --> 00:06:51.839 say you are On google .com what you see in front 00:06:51.839 --> 00:06:54.800 of you. That's the front end. So basically what 00:06:54.800 --> 00:06:59.540 this does is this streamlit app Which is the 00:06:59.540 --> 00:07:02.019 front end I was telling you about it. It shows 00:07:02.019 --> 00:07:04.720 you a nice front end it takes your python file 00:07:04.720 --> 00:07:12.199 their backend code sends it to gpt4 gpt4 i'm 00:07:12.199 --> 00:07:16.899 sure everybody knows by now is open ai's uh large 00:07:16.899 --> 00:07:20.620 language model and it will ask basically it's 00:07:20.620 --> 00:07:23.139 like a prompt in a way will tell you to like 00:07:23.139 --> 00:07:26.680 summarize this code like a flow diagram like 00:07:26.680 --> 00:07:30.639 a flow chart in a way should be an input process 00:07:30.639 --> 00:07:33.430 and output and that's how a float flow chart 00:07:33.430 --> 00:07:38.709 works right and so you give a piece of code you'll 00:07:38.709 --> 00:07:42.149 get like a flow chart out of it not something 00:07:42.149 --> 00:07:45.029 that you've had to build something that it does 00:07:45.029 --> 00:07:48.389 for you the ai does for you so basically this 00:07:48.389 --> 00:07:51.670 ai turns any code into a flow chart a flow diagram 00:07:51.670 --> 00:07:55.189 right that's how it makes it visual and people 00:07:55.189 --> 00:07:57.490 don't have time to read it so they will go through 00:07:57.490 --> 00:08:00.870 the flow chart what this does this there you 00:08:00.870 --> 00:08:03.480 go uh and that's that's how it is so basically 00:08:03.480 --> 00:08:07.019 it renders that summary into a clean chart using 00:08:07.019 --> 00:08:11.040 graph wiz so you paste your code click one button 00:08:11.040 --> 00:08:14.199 and boom diagram and it's great to help visualize 00:08:14.199 --> 00:08:16.899 things so you can drop that image into your blog 00:08:16.899 --> 00:08:20.500 that you're writing for this your github readme 00:08:20.500 --> 00:08:26.019 a linkedin post or a slide deck if when you're 00:08:26.019 --> 00:08:30.540 sending it to your friend just send the um flow 00:08:30.540 --> 00:08:32.639 flow diagram also right that'll be easy for them 00:08:32.960 --> 00:08:37.039 to see in terms of real world use cases other 00:08:37.039 --> 00:08:39.179 than the ones i just spoke about here are just 00:08:39.179 --> 00:08:41.440 a few ways you can change this i mean here are 00:08:41.440 --> 00:08:43.399 a few ways this can change how you do things 00:08:43.399 --> 00:08:47.740 so let's say you're in an interview you walk 00:08:47.740 --> 00:08:50.799 someone through your logic visually that will 00:08:50.799 --> 00:08:52.879 help them your future hiring manager can understand 00:08:52.879 --> 00:08:55.899 what's going on right away show them this this 00:08:55.899 --> 00:08:58.840 this there you go and on linkedin if you want 00:08:58.840 --> 00:09:00.659 to write a post you can show your project in 00:09:00.659 --> 00:09:04.279 five slides or maybe your even for hiring manager 00:09:04.279 --> 00:09:06.740 you can do that in five slides also a lot of 00:09:06.740 --> 00:09:08.919 visuals again right and maybe you're showcasing 00:09:08.919 --> 00:09:12.480 this in your portfolio each project gets a chart 00:09:12.480 --> 00:09:17.559 right and so let's say you're also having call 00:09:17.559 --> 00:09:22.980 with your manager and you want to show how the 00:09:22.980 --> 00:09:26.200 code you have written works show them this diagram 00:09:26.200 --> 00:09:28.580 they'll instantly see how it flows and sometimes 00:09:28.580 --> 00:09:30.039 when you don't want to talk you're just tired 00:09:31.820 --> 00:09:33.879 let's say you're burnt out from the day this 00:09:33.879 --> 00:09:36.399 diagram speaks for you it's not just a dev tool 00:09:36.399 --> 00:09:39.480 it's a storytelling shortcut and that's powerful 00:09:39.480 --> 00:09:44.120 because helps you tell your story quickly people 00:09:44.120 --> 00:09:45.840 don't have time to listen to long stories all 00:09:45.840 --> 00:09:50.080 the time just to give you a sense of behind what 00:09:50.080 --> 00:09:54.500 went in building this so it wasn't just like 00:09:54.500 --> 00:09:58.379 some perfectly scoped side project it's just 00:09:58.379 --> 00:10:02.340 messy it was messy at first and failed trying 00:10:02.340 --> 00:10:06.000 to pass the logic myself try drag x pattern matching 00:10:06.000 --> 00:10:10.019 static analysis but i think gpt4's ability to 00:10:10.019 --> 00:10:13.259 summarize and interpret this code with context 00:10:13.259 --> 00:10:16.220 i don't think anything could beat it could be 00:10:16.220 --> 00:10:18.659 wrong but definitely beat what i was trying to 00:10:18.659 --> 00:10:21.860 do and graphvis gave me that ability to draw 00:10:21.860 --> 00:10:27.000 flowcharts simply and streamlit made a great 00:10:27.000 --> 00:10:30.500 way to display this app on the made the ui part 00:10:30.500 --> 00:10:33.120 easy basically and out of this you may be wondering 00:10:33.120 --> 00:10:35.500 what was the hardest part hardest part i think 00:10:35.500 --> 00:10:38.659 letting go of perfection just not because when 00:10:38.659 --> 00:10:40.100 you're trying to build something you're trying 00:10:40.100 --> 00:10:43.240 to create a flow chart also by yourself it can 00:10:43.240 --> 00:10:48.720 take a while think through the logic and this 00:10:48.720 --> 00:10:53.019 app really does it in in seconds so the goal 00:10:53.019 --> 00:10:56.120 is not to build a perfect diagram just build 00:10:56.120 --> 00:11:00.129 something that is understandable because just 00:11:00.129 --> 00:11:03.990 like them like your friend your manager your 00:11:03.990 --> 00:11:06.629 future hiring manager or whoever that is just 00:11:06.629 --> 00:11:09.649 like they don't have time you know who else doesn't 00:11:09.649 --> 00:11:13.730 have time you your time is valuable and building 00:11:13.730 --> 00:11:16.370 something understandable sometimes does the job 00:11:16.370 --> 00:11:20.750 so unless your future hiring manager wants to 00:11:20.750 --> 00:11:23.169 know i mean wants to hire you based on just this 00:11:24.260 --> 00:11:26.419 particular project side project that you did 00:11:26.419 --> 00:11:28.779 i think building some understandable one also 00:11:28.779 --> 00:11:32.740 can do the job and you should just build on if 00:11:32.740 --> 00:11:35.120 it's something that you think that would work 00:11:35.120 --> 00:11:38.899 you know building a perfect diagram yeah you 00:11:38.899 --> 00:11:41.820 know you can obviously tell give a prompt to 00:11:41.820 --> 00:11:45.299 gpt and it'll give you kind of a more perfect 00:11:45.299 --> 00:11:49.440 diagram than what i'm currently showing but for 00:11:49.440 --> 00:11:52.080 me the goal was to build an understandable one 00:11:53.179 --> 00:11:55.899 because everybody's time is valuable. And just 00:11:55.899 --> 00:11:58.620 like your hiring manager, your friend, your manager, 00:11:58.759 --> 00:12:02.740 everyone needs to value their time, including 00:12:02.740 --> 00:12:05.620 you. That's basically it. What I want to say, 00:12:05.659 --> 00:12:08.759 the turning point for me here was when I uploaded 00:12:08.759 --> 00:12:14.779 my tone detector app code and saw that like a 00:12:14.779 --> 00:12:17.639 simple diagram was coming in place for what I 00:12:17.639 --> 00:12:19.700 was trying to explain. Yes, my explanation was 00:12:19.700 --> 00:12:24.179 clear. It's just, it was long. and this diagram 00:12:24.179 --> 00:12:26.659 was quick just like it said load input analyze 00:12:26.659 --> 00:12:30.759 compare export that was the moment four steps 00:12:30.759 --> 00:12:33.659 load input analyze compare and export that was 00:12:33.659 --> 00:12:37.480 when i was thinking this is when i can say basically 00:12:37.480 --> 00:12:43.240 this is what i built and now you get it too and 00:12:43.240 --> 00:12:45.659 i didn't even have to speak so if you ever felt 00:12:45.659 --> 00:12:48.000 like your work was getting ignored like your 00:12:48.000 --> 00:12:52.370 code was invisible like You had to explain yourself 00:12:52.370 --> 00:12:57.330 over and over. I see you. That's why I built 00:12:57.330 --> 00:12:59.929 this. First for me and now for you. Let your 00:12:59.929 --> 00:13:04.710 work show itself. Let your project speak in one 00:13:04.710 --> 00:13:07.149 glance. And you can find the code screenshots 00:13:07.149 --> 00:13:10.009 and blog where I talk about all of this, including 00:13:10.009 --> 00:13:15.149 the code in the show notes. And if this helped 00:13:15.149 --> 00:13:18.590 you, let me know. Or better yet, just share your 00:13:18.590 --> 00:13:21.919 first diagram. Until next time. This is Data 00:13:21.919 --> 00:13:25.440 Nia with Mukundan. Keep building, keep showing 00:13:25.440 --> 00:13:28.899 and stop over explaining. See you in the next 00:13:28.899 --> 00:13:29.039 one.