In this video, I'm gonna show you how I learned to
code from scratch in just one year. I'm gonna show you the exact path, learning resources, tools, and
most importantly, the learning hacks that I used to go from a complete beginner to a self-taught
programmer building and shipping complex apps and workflows that are now used by thousands of
people, so you can do the same thing if you want to, or maybe even get a job as a programmer if
that's a goal you have. We're also gonna talk about two secret weapons that I use both to learn
faster and to build and ship things much more quickly as well, and one of those has even become
a surprisingly good source of side income for me, and I think represents a pretty interesting
side hustle opportunity even for people who are not expert level coders, but I'll talk about that
later on in the video. First, here's an outline of everything we're gonna cover here. I'm gonna try
to make this as comprehensive as possible so it's a jumping off point that you can use if you want
to learn how to code, and we're gonna talk about how I picked my language, how I got started, the
exact learning resources that I used, all of which are completely free, by the way. We're gonna talk
about those two secret weapons I mentioned, a few learning hacks I used to learn even faster, and
some of my favorite programming tools. Feel free to skip around this video all you like. I have
timestamps in the description down below. We're gonna start off with a bit of a discussion on
how I got started and how I chose my programming language because one of the most common questions
people have when they want to learn how to code is what language should I start with? So personally,
I started with JavaScript, and I focused specifically on what's called backend programming,
and backend programming has to do with everything that happens sort of under the hood or behind the
scenes, whereas front-end programming has to do with the actual interfaces and controls that you
actually interact with on websites and apps. So think of backend coding kind of like designing or
building a car engine, whereas front-end coding would be like designing the car body itself, but
also the controls like the steering wheel or the ejector seat button. So for example, my favorite
project that I built so far, also vastly the most complex project I built so far, is called Notion
Voice Notes, and it's a few thousand lines of code that essentially take an audio file like a lecture
recording or voice note or a podcast, transcribes it to text, summarizes that text with AI into
lists like the main points and the action items, and then creates a brand new page in my Notion
note-taking system with all of that detail. So I can basically take notes with my voice. And
to interact with that system, all I have to do is upload an audio file to Google Drive, and
then everything happens automatically in the background. That's what I mean by backend coding.
And I'm telling this story because that workflow, taking notes with my voice, is actually one of the
primary inspirations I had to learn how to code in the first place. I have wanted to be able to take
notes with my voice for years. I go for a lot of long walks, and I've always wished I could just
record a voice note and then get like a perfect transcription later on that I could read through,
skim, add highlights to, all that good stuff. And then literally in the airport on the way to
my honeymoon after getting married last year, I came across a blog post in line for coffee by
somebody who was using JavaScript and a few other free tools to transcribe podcast episodes to text.
And as I was scrolling through that blog post, I couldn't understand any of the code in it at
the time, but I was confident that if I could come to learn enough JavaScript to understand that
code, I would be able to modify it and I would be able to build my voice note-taking workflow. So
the choice for me was clear. I needed to learn JavaScript. There was another reason as well. I
wanted to send my notes to Notion and the Notion API is primarily use the JavaScript. That made the
choice clear for me. And if you're watching this, if you're confused about what language you
should start with note that I'm not telling you, you should start with JavaScript, but I am
telling you, you should start with the same kind of inspiration. You should pick a language that
will let you build something that is interesting to you personally, because at the end of the day,
programming languages are just tools. So if you're just saying, I want to learn how to code, it's
kind of like saying, I want to learn how to use a hammer and yeah, I can get a loose piece of two
by four and have some nails sticking out of it. I can teach you how to swing a hammer, but you're
going to have a lot more success if you start with something that you actually want to build.
Like I want to build a house or I want to build a computer, because once you have the project
in mind, you're going to know what tools you actually need for it. So once you understand the
project, you're going to understand what tool you should pick, but you're also going to learn a lot
faster for a couple of different reasons. First, having a goal in mind, having something that
you're interested to build is going to focus your attention because programming languages are
full of tons of different subskills and methods and classes, and you kind of have to know which
ones to learn and focus on at first. Otherwise, you're going to be very, very scatterbrained.
The other thing, the more important thing is when you have an end goal in mind, your brain is
going to understand that what you're learning, even if it's kind of boring in the moment or
on its own, is relevant to something you care about. So it's going to be stickier. You're
going to retain it much more easily. Now, there are some other factors that go into language
selection, like the popularity of the language, how competitive it is in the job market if
you are trying to get a job as a programmer, the difficulty of learning language in general.
And there's a whole great post on Free Code Camp's website that goes through these considerations
and talks about them. I'll link to that in the description below. But the really nice thing
about starting with a language that's going to help you build something interesting in the short
term is once you learn that language, if you have to learn a second language in the future, it's
going to be much, much easier. And the reason for that is that we can break programming down
into two general categories of sub-skills. We have language-specific sub-skills, so things
like the syntax of the language, its quirks, maybe the frameworks or tools that you use to
work with that language. But then we have a much bigger category of universal programming
skills, so things like data structures, working with functions, just the logical practice
of solving problems with code. And once you kind of hone your skills in this category with your
first language, you take those skills into your second language and all you have to do is kind of
apply them to the syntax and the quirks of the new language. So learning a new language, if you have
to for a job or anything else, is going to go way, way, way faster than learning your first language.
And speaking of learning, let's now talk about the learning resources that I use to learn JavaScript.
So the main one that I'm going to recommend for anybody who does want to learn JavaScript,
which I think is a great first choice if you are interested in building web apps or doing backend
programming like I do or building websites, is this JavaScript algorithms and data structures
course on freecodecamp.org. Like I said, everything in this learning resources section
is completely free and as the name in free code camp implies, this is a completely free course.
I also think it is absolutely the best beginner resource for anybody trying to learn JavaScript.
And the reason for that is there are tons and tons of mini lessons in this course. There's a whole
bunch of modules here and every one of them has a bunch of different mini lessons. Each one of
those mini lessons is kind of a self-contained challenge. So you're immediately having to write
code while you're learning. So for example, we have understanding uninitialized variables
right here. It gives you a little bit of a lesson on what it's trying to teach you. And then it
immediately asks you to write code and it has a button where you can run tests and see if your
code is actually right or if there's a bug in it. So this immediately gets you writing code instead
of just like reading theory or going through a book. And I think that is the best way to learn
any programming language, not just JavaScript. If you can get your hands dirty and start coding
right away, you're going to learn a lot faster and you're going to be a lot more motivated to
keep learning. Now, before I go on to the next learning resource that I want to recommend here, I
have two little tips, things that I did with this course that I think are worth mentioning. First
and foremost, alongside this course, I had a little test folder in my own programming editor. I
use VS code right here. And basically when I would run across a particularly interesting lesson,
I would try to take the lesson and remix it and challenge myself to go do something different
with it. So for example, if the lesson was teaching me how to write a really basic for loop,
or just prints out one, two, three, four, five, et cetera, I would go into my editor and challenge
myself to kind of up the ante a little bit instead of going one, two, three, four, five. What if I
skipped every third number or what if I went just the even numbers in doing that is a great way to
take a challenge that's just a tutorial challenge, something that someone else has laid out for
you and turn it into something that you have more ownership over and something that you care
about more. In business, there's this idea called the Ikea effect where people have more affinity.
They're more proud of the furniture they own from Ikea because they had to actually go through the
process of building it themselves. This is also applied really successfully in video games like
Minecraft, even in software like notion. I think a big reason people love notion is they get to build
stuff and be proud of it. And when you're learning programming, you can use this concept to your
advantage. You can take the tutorials and take the concepts they're trying to teach you, remix them
a little bit and kind of turn it into play almost. The second thing, and this is going to be kind of
controversial that I did here is I went through, if I go back to the free code camp course, I
went to the basic JavaScript module, which is 113 lessons. Then I went through the ES6 module, which
is 29. And then I actually quit the course. I didn't go through this regular expressions module,
the debugging. I didn't go through any of these because ES6 and basic JavaScript taught me enough
to go off and build the thing I wanted to build at the time. I had two kind of main inspirations.
The first we already covered, which was me wanting to build a voice notes workflow. The other one
is I really wanted to teach the notion API over my second channel, Thomas Frank explains.
And I had this really fun project idea that I wanted to build. I wanted to make an automated
Pokedex generator where I would pull Pokemon from an API and bring them in automagically. And
after going through those first two modules, I felt that I had enough knowledge and I had
enough tools in my tool belt to go off and start building that. I also had enough knowledge
to now go out and look through references, look through kind of like reference resources
and figure out things that I didn't know without having to go through a structured course. So one
thing that I would recommend that you follow, something that I do all the time is no matter what
kind of educational resource you're going through, don't feel that you have to complete it 100%
before you can go off and try doing your own stuff. Instead, think of the educational resource
as a reference. Maybe you need to go through the first few modules to sort of just get your
feet wet and understand the basic language of the skill you're learning. But then if you get
inspiration, if you want to go build something, don't feel that you have to complete the entire
course before you can go do that. Let the inspiration carry you. Okay, so I went through the
JavaScript algorithms and data structures course. That is the main resource I would recommend here.
The next one is the modern JavaScript tutorial, which you can find over at JavaScript.info. So
this I think is a great compliment to that free code camp course because where that one is a
little bit light on explanation and heavy on exercises and actual coding, this is the exact
opposite. So let's say I searched for arrays here. I think they'll probably have an article on
arrays within this. Here it is. This is basically a really well-written online free book that
basically can teach you everything that the other course isn't teaching you. So if you're going
through an exercise in the course and you want to kind of understand the concept that's teaching
a bit more, the modern JavaScript tutorial is my number one resource recommendation for going
through it. There's also an actual reference guide, which I'm going to cover next, but I think
the modern JavaScript tutorial is a bit easier to read. It's a bit more fun to read. So consider
that to be an important tool in your programming, especially JavaScript-focused tool belt. And
the third one that I'm going to mention, which I think makes up the trifecta of the ultimate
JavaScript learning resources, in my opinion, is the MDN Web Docs. So these are basically like
the de facto official documentation for JavaScript and for a lot of web technologies actually, but
they have this whole JavaScript kind of guide you can go through. I think you could actually
learn JavaScript going through just this website, but the real strength here is any sort of
function that you're trying to use or piece of language you're trying to understand, there
is comprehensive documentation on it on this website. So for example, there is a function
I use all the time called map, and right here, array prototype map, they have a whole article
on it. They have a demo, they have syntax, they have parameters, and most importantly,
they have examples right here. So if you want to understand how to use a function like this, you
would go to the MDN Web Docs. And for that reason, I would recommend keeping this in particular as
a bookmark resource on your computer. A couple others that are worth mentioning. First, there is
a weird JavaScript course by Fireship on YouTube, which I think is really, really fun. It's kind
of like a high level overview of JavaScript and all of these videos are super entertaining to
watch. Highly recommend watching those and also just subscribing to Fireship in general. He has
some of the best programming content on YouTube. And then the last learning resource I want to
talk about here isn't anything in particular, it's more of a general recommendation to kind of
just let yourself get obsessed with coding. If you feel the interest, just sort of like start
learning by osmosis. So this is something that I definitely did as I was watching through videos
like Fireship here on YouTube, I started to notice that my recommendations had more and more stuff
about JavaScript. And so a lot of times if I was like eating dinner or lunch or something, instead
of going to Netflix or watching a movie, I would watch programming content on YouTube instead and
just sort of learn by osmosis. For example, when I was going through this Fireship course, my YouTube
algorithm took notice and started recommending me lots and lots of JavaScript related content on
my home feed. One of those videos was this video right here on what the heck is the event loop
anyway by Philip Roberts. And I just watched that while eating dinner one night. And now I have
a much better understanding of how asynchronous code works in JavaScript. I probably wouldn't have
even thought to look that up in the first place, but it was just recommended to me and I watched
it and I'm really glad that I did. Okay, so it's now time to go into secret weapon number one in
this video. And that secret weapon is chat GPT, but probably not in the way that you think,
because a lot of people, especially a lot of people that I follow on Twitter or that end up in
my feed will say chat GPT can write code for you. We have GitHub copilot, which uses chat GPT
to basically generate code on the fly. And if you're already a professional programmer, that
can be a great way to boost your productivity. But if you're trying to learn how to code, letting
chat GPT write code for you is actually a bad idea because you are not going to come to understand
how that code is actually working. You have to write it yourself. So what I did instead was I
use chat GPT as a learning tool. And I came to discover that it has two major strengths that the
courses and reference materials that I was using primarily kind of lack. The first one is that chat
GPT can tailor the level of the material that it's generating for you on the fly to your specific
needs. Something like a course or a reference guide can't do that because it's written for
lots and lots of people. Whereas with chat GPT, you can say, Hey, I didn't quite understand that.
Could you give me some more examples? Could you bring this down to say like a 10th grade level,
something like that. So for example, I have a one piece of history here where I was asking, what
is a set? Can you teach me about it? And how running the has function in it is more efficient
than some alternative. I can't remember what the context was, but here it basically generates a
mini article for me. And if this wasn't enough, I could ask for more examples or more guidance
just to make sure that my understanding was clear. The other thing that I've learned with chat GPT
is it is fantastic for eliminating what's called a second order incompetence, which are basically
the things that you don't know that you don't know literally the stuff in a skill that you just
don't even know exists yet. And I found that if you prompt it right, chat GPT is really good
at helping you discover these kinds of things. So just to give you an example here, here's one of
the prompts I gave it. I gave it a function that I wrote myself and I said, here's a function I wrote
that fetches Pokemon from the Poke API, creates an array of objects with their data. You don't have
to worry about what this code does in this video. This isn't a technical level video, but this
is key. How would a senior JS developer improve this code? And then I said, for each suggested
improvement, please explain why you've suggested it as if I'm a student unaware of it. So I pasted
my code below the prompt here as context. And then it gives me a whole list of suggestions here.
Use promise.all for concurrent requests, refactor error handling, separation of concerns. And a lot
of these concepts, the first time that I wrote a prompt like this, I had no idea existed. For
example, this concurrent requests suggestion here, I didn't know what that was. And it turned out to
be one of the most useful concepts I ever learned as a programmer. And I'll just take a little
bit of an aside here to explain it. So a lot of what I do with my programming is I write code
that reaches out to APIs and then gets responses. So for example, if I want to get a Pokemon from
the Poke API, I have to make a request and then I have to get the response. So if I wanted to
get say a hundred Pokemon, I might write a loop, which is one of the first things you learn about
as a programmer. And it would do it as many times as as needed, reach out, get the response, then
kick off the next iteration, reach out, get the response, and do that a hundred times. When I
learned about concurrency, I learned that you can basically write code that will reach out and it
doesn't have to actually wait to get the response before it will send the next request. And just to
show you an example of how powerful this is, over on a platform called Pipe Dream, which spoilers is
my next secret weapon, but I'm going to show you here. I wrote some code to show just how much
faster concurrency can be than what's called serial programming, where we're just waiting
for the response before we kick off the next iteration of our loop here. So I wrote some code
that grabs the first 50 Pokemon, both in serial and using concurrent code. And we can see here
to get these 50 Pokemon names with serial calls, it took seven seconds or 7,000 milliseconds here.
Whereas the concurrent calls doing the exact same thing only took 530 milliseconds, just over half a
second. So we get this massive speed increase just by implementing concurrency. And again, I didn't
know about that at all. I didn't know it existed as a concept until I asked that magic question.
How would a senior JavaScript developer improve this code? And then please explain the suggested
improvements. Now I could probably do a whole video in the future on Chat GBT. I've used it for
a lot more beyond coding. What I will say to wrap up this section is still realize that Chat GBT can
get things wrong. So it is really important not to lean entirely on Chat GBT as a teaching tool. I
truly believe you should go through courses and get very familiar with the official documentation
at the MDN Web Docs, and then use Chat GBT as a support tool that supports those official
resources. That brings us to secret weapon number two, which I've already showed you a little
bit in this video, but the tool is called Pipe Dream. And it's kind of like Zapier or make.com.
It's like a no code automation tool that allows you to sort of hook up different tools together.
But the real difference between Pipe Dream and something like Zapier is Pipe Dream makes it super
easy to write JavaScript code that can actually support your workflows. And you can even bring in
packages that make your code even more powerful. And the reason that I'm listing this as a secret
weapon is I have found Pipe Dream allows me to build and ship really useful workflows incredibly
quickly. And that actually encourages me to go off and do it. One of the biggest blockers that kept
me from learning programming for a very long time was all the infrastructure and all the extra
stuff around the actual code that you want to write. Traditionally, if you want to ship an
app, you got to write your code for the app, but you also have to get servers. You have to
think about authentication. You have to think about OAuth for APIs and all kinds of stuff like
that. And the beautiful thing about Pipe Dream is it's a platform that basically takes care of all
of that for you. So if you're like me and you're very focused on backend programming, where
you're sort of like building little machines that automate work between different tools, Pipe
Dream makes that incredibly fast. And I want to show you an example in this video, just to show
you how powerful this tool can actually be. So here I have a very simple workflow set up, which
is called audio to Notion. This is basically the exact same thing I talked about in the intro where
we are uploading an audio file to Google Drive, and then we're transcribing it and sending the
transcript to Notion. And currently I'm using only no code components. So we have a trigger
here. It's going to then download the file to what's called temp storage. We're going to connect
with OpenAI to transcribe the audio file to text, and then we're going to create a brand new page
and a note-taking system in Notion that has that transcript. So here I've got that note-taking
system, I'm just calling it voice notes. And if I go ahead and test this workflow right here, we
get a success message after a couple of seconds. And if I go back over to Notion, we see voice
sample.mp3. I can open that up and you can see we have a full transcript of an audio file that I
recorded. And you could do this in a traditional no code automation builder like Zapier or
make.com. But there's one problem that I see with this transcript. It's a wall of text. There's just
so many lines of text here. I would love if this was broken up into paragraphs, but unfortunately
the no code components in Pipedream don't have an option to do that. So that is where adding code
into the mix becomes really, really useful. And the way we can do that in Pipedream is just by
adding a step and choosing the node step right here. So node JS, if you don't know about it, is
what's called a backend runtime for JavaScript. It basically lets you run JavaScript outside of
just the browser. You can run it on servers, almost like a true backend language like PHP.
And here we can use it to basically write code that acts as glue to do extra stuff within our
workflows in Pipedream. So I'm just going to grab a hello world component right here. And I've
prepared some code that I'm just going to copy and paste directly into the step. Again, this is not
meant to be a technical video, so you don't have to worry about what this code is doing or how it
works. But basically, we're importing a really powerful library called natural, which can split
our transcript into sentences. And then I have some simple code here that is going to basically
make groups of two sentences per paragraph. So if I test this out, you can see what it does.
And you can see here on the return value area, we now have our transcript, but we have some
line breaks between these groups of paragraphs. So if I copy this path here and I come down into
our create page from database, no code action, and I basically replace this page content call
with that variable, we can test it one more time. And once again, we get a success message. We can
go back over to Notion and now we can check out this brand new page. And would you look at that?
We have actual paragraphs and each paragraph is an individual block inside of Notion. So that
is really what code can allow you to do. Once you kind of come up against the limits of no code
platforms, a platform like Pipe Dream basically says, "Hey, write your own code, work around
those limitations, and you can build a workflow that does pretty much exactly what you want." So
I started using Pipe Dream in that capacity. I was building no code workflows and then adding little,
little snippets of code just to sort of add things that I wanted. And over time, I got more and more
involved in the platform to the point now where my Notion voice notes automation actually works
on Pipe Dream. That is where it lives, but it is entirely based on code. Nothing is using a no
code component at this point. And I wrote probably 2,500 lines of code over several months to make
this entire thing work. And that's actually the reason that I am listing Pipe Dream in this video,
even if you are not a backend focused developer, because it represents a concept that I think is
very important for learning how to code. And that is the removal of friction. Like I said before, I
was originally intimidated by all the extra stuff you have to do around coding, like authentication,
security, servers. Finding a platform like Pipe Dream basically gave me a tool where I could just
write simple code, write the code that I knew how to write, and get something that actually worked
and did something interesting. And that gave me enough momentum. It gave me a result that pushed
me to keep improving my scripts until eventually I was coding entirely code-based scripts that
weren't using no code components. And now I'm to the point where I actually do understand things
like authentication and servers. So if I wanted to go ahead and turn this into a non-Pipe Dream based
workflow, if I wanted to build a full stack app on it, I'm now much better equipped to do that. And
I don't think I would have gotten to that point quite as quickly without an interim tool like
Pipe Dream. Now in the intro, I also mentioned that one of those secret weapons has become a
source of side income for me and represents a pretty interesting side hustle opportunity. That
actually is Pipe Dream as well. And I want to show you exactly why. So first and foremost, Pipe Dream
has a feature that a lot of other no-code tools do not have that I think is super useful. And that
is this little share link feature right here. Essentially I can create this, I can choose some
settings and I can generate a little link that when anyone clicks it, it's going to automatically
rebuild this entire workflow in their Pipe Dream account. So it's almost like a Notion template.
And the other thing Pipe Dream has is an affiliate program and a pretty darn good one at that because
when people click through and actually upgrade to a paid account, the affiliate gets 33% of their
payments for an entire year. Now Pipe Dream is also incredibly powerful on its free tier. So I've
been working with their affiliate program for the past few months. And I think only 1% of the people
who have clicked my affiliate link have actually converted to a paid account. But just that 1%
of people, about a hundred customers so far, has generated $4,000 in commissions over the past
few months. And that number is only growing every single month. So it's this really cool thing
that I get to do where I get to basically build free software, share it with my audience,
which I mainly do over on my second channel, Thomas Frank Explains, and a small portion of the
people who use that software eventually upgrade to paid accounts, maybe their teams, or just have
a lot of automation needs. And I'm able to earn some income that way without having to actually
sell anything. But if you're following along, you might be getting an idea here because these
share links are kind of like Notion templates in a way. They're just links that kind of help you
duplicate something that I've built. And if you've been following me on Twitter, you might know
that a large part of my business these days is selling paid Notion templates over on my website.
Well, I think you could do the exact same thing with Pipe Dream. You could either build bespoke
workflows for clients. In fact, I've done that for Nebula. Or you could build workflow templates
like the Notion voice notes template that I made, or Notion voice tasks template that I made.
And you can actually sell those as useful paid software. I don't have the capacity to do that
right now because I would want to offer support for it. It's just one of my values. But I think
somebody who had a bit more time and a little bit of programming skill could really deliver value by
putting together workflows in Pipe Dream and then selling them. So keep that in mind as a potential
source of side income. At this point in the video, we are now going to move on to the next section,
which is three of my top learning hacks for learning programming even faster. The first one is
the simplest. Write code often. Write code as much as you can. And I'm saying this explicitly because
a lot of people when they try to learn programming get caught up in tutorials and they get caught up
in watching learning materials. That's important, but it's much more important that you actually go
write code and try to build things. And anything you can do to make the process of writing code
easier for yourself, anything you can do to remove friction from that process, you should
do. It is one of the main reasons I chose to feature Pipe Dream so prominently in this video
because it's the tool that allows me to just spin up useful workflows really quickly where
otherwise I might say, "Oh, that's too much of a hassle right now. I'm too busy. I'm not going
to do it." For example, a few months ago, I was on a Discord with some people and one person was
like, "Man, I really wish I could pull Magic the Gathering card art into my Notion database." And I
was like, "There's a Magic the Gathering API. It's called the Scryfall API. I think I could whip up
something really quickly in Pipe Dream that would pull the cards this person wants from Scryfall
and put them into Notion." So I built that in just about 20 minutes using Pipe Dream, gave them
the share link and they were able to use it. And I learned a whole bunch of cool code tricks along
the way because it was a new and novel challenge. If I didn't have a tool like Pipe Dream, I might
not have taken that on because I only had about an hour of time worth in that evening to do it. And I
will recommend another tool aside from Pipe Dream for this purpose and that's called Replit. So Pipe
Dream is really about building automations between APIs. Replit is actually almost like a full coding
platform in the cloud. You can write code in tons of different languages. You can actually run that
code. You can deploy full apps. I've used it. I've even embedded some Replit embeds in some of my
coding tutorials on my blog and you can literally run code in them. So definitely check that out
because it's yet another platform that will allow you to spin up something very quickly. And
again, it removes that friction from the process of trying something out or starting a quick
project. Learning hack number two is once you start building projects that get pretty sizable,
you want to have a testing folder aside from that project where you can write specific functions in
isolation and test them. And I want to show you kind of an example here. So once again, to jog
your memory, this is my biggest project. It's called Notion Voice Notes and it is absolutely
massive. Now typically you probably wouldn't write code files this long in normal modern projects
that use modern design patterns. My code is in one gigantic file here because I started on Pipe
Dream and initially I was writing in the actual Pipe Dream app where you kind of have to have
everything in one file. So I could split this up, but still this is a gigantic project and it
has a lot of moving parts. And if I want to test something in the middle of the project, then
the testing process can get really, really tedious and lengthy because it's sort of like handing
stuff off to other functions. So instead, once you get a project around this size, maybe even
a little smaller, you want to give yourself like a testing folder here. And this will essentially
allow you to write small functions and then test them out directly to make sure they work before
you plug them in to your bigger project. So here I have a very small function that is going to take
a list of Pokemon objects and I can sort them by a specific criteria. So down here, just to point
this out, I'm sorting my Pokemon object by their type. And if I run this code, I get an error and
it says type is not defined. This is an example of quick iteration. Here I can immediately get
my error. Whereas if I was writing this function in my giant project, I would have to go through
this entire build process and it would take me a lot longer to get this exact error message.
So here I get it right away. I can go, whoops, I accidentally forgot to put my quotation marks
around this word type here. Let's go ahead and save the file. Let's run the code again. And do we
get an error message this time? No, we don't. And we do see that we have our Pokemon objects sorted
in reverse order by their type, water, grass, and fire. So again, give yourself a little test
area where you can write functions in isolation and you're going to tighten those feedback loops
and make much quicker progress. And speaking of progress, learning hack number three is to build
yourself a code snippets note, or maybe even a code snippets database. So I want to show you mine
really quickly here to show you what this is here in my note taking system in Notion. I've got a
note called code snippets. And basically whenever I find myself using a snippet of code all the time
in my projects, I will create a snippet for it in this note. So I've got one here. This one's kind
of a verbatious, I don't know if that's a word, but I'm gonna come down here to show you this
one, import the Notion SDK into pipe dream. So basically if I want to work with the Notion API,
there is this import statement. And then there's some specific code for creating an instance of
a client that I can use to work with the Notion API. I often forget how to actually type this out.
And that's kind of okay because memorizing coding syntax specifically for like libraries here is
probably one of the least valuable skills you can have as a programmer, especially as AI starts
to become more and more part of our workflow. It's much more important to understand the logic and
the creative problem solving process. So here, if I need to import the Notion SDK into pipe dream,
I'm just gonna come grab my snippet. I'm gonna paste it in, and then I'm gonna start coding from
this base. And that is going to allow me to code much more quickly and spend a lot less time trying
to remember, hey, how do I do this thing that I've done a million times before? It's all about
efficiency. And speaking of efficiency, I wanna now talk about some of my favorite programming
tools that speed up my workflow and basically make work a lot easier as well. The first one
is what's called VS code or visual studio code. This is an editor, and there are a lot of editors
out there. It's like sublime text. There's like Notepad++ if you're really old school, but VS code
is kind of seen as one of the most popular, one of the most powerful out there. It's the one that I
use. And for basically any programming language that you're working in, you can probably use VS
code. And in particular, I want to point out a few different extensions that you can actually add to
VS code to make it really powerful as a learning tool. So here in VS code, which is free, it's on
basically all the major systems. I can open up my little extensions area and you can see that I
have five installed. Code runner is the number one extension that I would recommend installing.
I think you also need to install node.js, which is pretty easy. You can just go to the
website, which I'll link below, install that on your computer. And the reason I love Code
Runner so much is it lets you run code really, really quickly. I've already shown it in this
video, but I'll show it one more time. Basically, if I clear the output here in the output tab, if
I just right click and hit run code, it runs the code and I can see the results and I can see any
errors if it's going to throw an error. So this is the fastest way to just run a snippet of code,
get an answer and tighten those feedback loops. There's another extension that does a very similar
thing. It is called live preview. And this one, instead of basically outputting the results
of your code in this little output tab here, actually creates like a mini browser window inside
of yes code. So this can be very helpful if you're actually writing HTML around your JavaScript. So
just like before, I have this very simple HTML file, but we have this Pokemon sorting function
that I've built here. And if I just click this little preview button right here, I can actually
see what the table is going to look like inside of a mini browser window. And the cool thing about
this extension is it will automatically update if I change the code. So let's say I come down here
and I change my sorting criteria from attack to, let's say name. Now we can see it is sorting by
name in reverse order. If I remove this reverse call here, now it's sorting in alphabetical order,
ascending order. And again, this is just a super quick way to iterate on your code, make changes
and actually see the results in real time. Another extension that I highly recommend that is a great
learning tool is called Quokka, quokka.js right here. This will basically execute code directly
inside of your editor on a line by line basis. So to show you an example of that, I've got this
loop test.js file here. It's doing something very, very simple. It's just doing a 99 loop here. Then
it's basically just printing 99 bottles of beer on the wall, 98, 97, et cetera. And you can see here,
Quokka actually will output the result of this console log statement in the editor itself. This
is a great way to learn and to show you a very, very simple example, just to drive it home,
let's do something super duper easy. We'll do console.log two times two, and you can
see immediately it goes four. So you can see exactly what's happening. Maybe if we use a
division operator, we'll get one. And again, this just teaches you in the moment what your code is
actually doing. A couple more extensions before we move on to some other tools. I really like ESLint,
which is just this great extension that basically adds what's called linting to your JavaScript. It
will basically change the colors. It'll highlight errors, things like that. And then we also have
Prettier, which is a formatter that will basically just format your code with indentations and line
breaks as needed. I love that. Okay, a few more tools beyond a VS code that I want to recommend
here. First one is called DevUtils. This is a macOS app that basically just has a huge toolbox
of little utilities that come in real handy when you're programming. So for example, there's
like a JSON validator and formatter. There's a text difference checker. There is like a regex
tester, I believe. There's all kinds of really, really useful utilities that before I was using
DevUtils, I would often have to Google for. So if you are in a Mac, check that out. If there is
a Windows alternative, I will link to it in the description. I'm not aware of one right now.
Another really useful one is called Recbin. This is just a website that allows you to send
API requests or send a post or get requests to APIs. I use this all the time when I'm building
pipe dream workflows. Just a really easy way to send those requests without needing like a special
piece of software for it. So I recommend that. And then I also recommend, of course, GitHub. GitHub
is probably something every programmer should get familiar with, or at least some kind of what's
called version control system. So basically, I can write code on my computer. I can commit it
to what's called a repository or repo. And here on GitHub, this is an example of a repo. I have my
notion voice notes dot MJS file. It's a JavaScript file. Just put an M in front of it for, I believe
it's module. And I can go into the history of this file. And for any given commit, I can literally
see what was changed and what was added. So all of these lines here were added in this commit.
These lines in red were deleted and replaced with these lines here. So if there's like a screw
up or you're working with collaborators and they need to understand what has changed about a piece
of code, that's what version control is really, really good for. And I would highly recommend
learning at least a little bit about GitHub and how to use it if you are getting into programming.
Okay, I want to share one more tool with you in this video. And it's actually a tool that you
might find useful even outside of programming. So earlier I showed you my code snippets page inside
of my Notion note taking database. And that notes page is inside a greater system that I built for
myself called Ultimate Brain, which is an entire productivity system inside of Notion. A few years
ago, I got really tired of juggling all kinds of productivity apps. I had a note taking app. I had
a to do list app. I had another task management app for my team. And I eventually got to the
point where I just wished everything could be in one place. And when I found Notion, I started to
realize that I think I could build a system that would accomplish that goal inside of Notion.
So I spent months tinkering, experimenting, learning how to use the tool. And eventually I
was able to build a system where I have my tasks, my notes, my goal tracking, my project management,
everything I need to organize my day-to-day life is now inside of Notion inside of a system I
built called Ultimate Brain. And in particular, my favorite part of the system is the project manager
that I built because for any given project, I can see both the tasks for that project and
the notes for that project all on one page. And I find that super helpful because I'm often creating
tasks as part of a project using the context from those notes. And in addition to just using this
myself, I also released it as a product last year. And since then, over 25,000 people have bought it.
And my team and I have collected dozens and dozens of testimonials from people who find it just as
useful as I do. Now, you probably know if you've been watching this channel for quite a while that
traditionally we've always relied on brand deals and sponsorships as our main source of income.
And that's been great, but I have to say, being able to build something that is both useful for
me and for my audience is even better, especially since we're not just selling a Notion template. We
also include access to an active support community where you can not only get answers to every single
question you have, but you can also swap tips with other people on how to improve your template, add
additions to it, customize it, and improve your overall productivity system and your workflow. And
if you haven't already picked up your own copy of Ultimate Brain, now is actually the best time
to do it because we are running our first ever Black Friday sale. For the rest of this month,
you can get Ultimate Brain at a huge discount, 50% off by going over to thomasjfrank.com/brain
and using the code BlackFriday23 at checkout. Now, you might be asking yourself, why is Tom running
a Black Friday deal? He's never done it before. It's a valid question. But in this instance, we
actually have a very good reason for doing it. And that reason is we're actually building another
tool that's going to make both Ultimate Brain even better, but also Notion better for anybody
who uses it. That tool is called Flylighter, and it is going to be the ultimate web clipper
and idea capture tool for Notion. It is a great tool that's going to help you capture screenshots,
highlights, add annotations to those highlights. Basically, it is the idea and knowledge capture
tool that I have always wanted. And the thing is, we want to build this sustainably. We
want to build it in a bootstrapped way, and we don't want to take VC money. I actually
already have VCs in my inbox asking about this, but I think that if we took VC money, we would
eventually be forced or at least pressured into making decisions that weren't aligned with what
you actually want. So instead, what I would love to do is be able to use the products we already
sell as a way to self-fund the building of this new tool and allow us to have a great free tier
in addition to the premium features that we're planning. So that is what Ultimate Brain allows us
to do right now. And there's also a ton of synergy here because Ultimate Brain is already the best
organizational and productivity system for Notion, and Flylighter is going to basically make the
capture part of that system even better. So if you want to help us build this tool, you want
to also supercharge your productivity and get the best organizational system for Notion, the
best second brain for Notion, you can go over to thomasjfrank.com/brain. And again, use that
code BlackFriday23 at checkout to get 50% off of any edition of the template. You can pick up
the standalone edition, or if you're a creator, you can also get the Ultimate Brain plus Creators
Companion bundle. And that also gets you the exact system that my team and I use to manage all the
content on this channel, on Thomas Frank Explains, on Twitter, on basically all the places where
I put out content onto the internet. If you're a serious content creator and you want to put out
more and better content, I think you're going to love Creators Companion as well. So once again,
you can go over to thomasjfrank.com/brain and use that code BlackFriday23 at checkout to get 50% off
of either edition of the template. And with that ad read over, because it's kind of an ad read, but
it's my product, to wrap this video up, seriously, I want to say thank you because not only do I
get to make this kind of content for a living, but now it's so cool. I get to make a literal
startup for a living. And I feel like there's a way forward where we don't have to take VC money
to literally build this really cool piece of tech. And that's all thanks to you. I've been putting
out content for 10 years, but if you weren't watching it, then we wouldn't be able to do any
of this. So seriously, if you've bought one of my products, if you've supported us on Nebula, if you
have supported my sponsors, or even just watched this content and helped boost it in the algorithm,
thank you. We would not be able to do this without you. Seriously, I appreciate you so much. To wrap
this video up, because this is a coding focused video, I have a couple of different resources
that I want to point you to. First and foremost, if you want a project that kind of just like
takes everything I've covered in this video and shoves it into something you can actually do, my
Notion API Pokedex project is something you might want to go through. It's a two hour video, and
there's also a written version of it that links to literally all the resources I talked about in this
video. Secondly, if you do want to learn to code, then learning how to learn more efficiently
is going to help you in your journey. And that video right there will help you with that as well.
Thanks as always for watching, and I will see you
