A Programming Skill You Don’t Practice, but SHOULD! | Examples
Summary
TLDRIn this video, Travis from Travis Media addresses the common frustration developers face when learning new back-end technologies. He suggests using existing GitHub projects as a starting point to avoid the mental fatigue caused by repetitive front-end setup. Travis highlights the importance of learning to read and understand others' code, a skill crucial for onboarding to new projects in the professional world. He also emphasizes the benefits of gaining diverse coding perspectives by exploring different developers' approaches. Additionally, Travis promotes Brilliant.org for interactive learning in math, logic, and computer science, offering a discount for his audience.
Takeaways
- 📚 Start with existing projects to avoid burnout from setting up the frontend before diving into the backend technology you want to learn.
- 🔍 Use GitHub to find projects that already have the frontend code in place, allowing you to focus on the backend or specific technology you're interested in.
- 🛠️ Practice reading and understanding code from others to develop a vital skill for a developer's career, especially for onboarding to existing applications.
- 💡 Learn from different coding styles and approaches by examining projects from the community to broaden your coding 'personalities' and problem-solving techniques.
- 🎓 Brilliant.org is promoted as a platform for interactive learning in math, logic, and computer science, offering lessons from basic to advanced topics.
- 🚀 Enhance your coding skills or keep them sharp with Brilliant's practical approach, which can help in mastering big concepts in as little as 15 minutes a day.
- 🌐 Explore a variety of project examples, such as to-do list apps in React or vanilla JavaScript, to find a suitable starting point for learning backend technologies.
- 📈 For more advanced projects, consider dashboards or employee management apps that can be adapted to incorporate the technology or concepts you wish to learn.
- 🔎 Use Google to find open-source projects or tutorials that include source code, which can serve as a foundation for learning without the need to build from scratch.
- ⭐️ Look for projects with more stars on GitHub as an indicator of their quality and usefulness to the community, ensuring a solid base for your learning.
- 👍 The video encourages viewers to engage with the content by giving it a thumbs up and subscribing to the channel for more helpful insights.
Q & A
What is the common issue Travis describes that learners face when starting a new course on a back-end technology?
-The common issue is that learners often have to go through 25% of the course which is dedicated to setting up the front-end, including HTML and CSS, before they get to the back-end technology they are interested in. This can lead to mental fatigue and loss of interest before reaching the main topic.
What solution does Travis suggest to avoid the mental fatigue caused by front-end setup in courses?
-Travis suggests finding projects on GitHub that already have the code in place, allowing learners to jump straight into the back-end technology they want to learn without having to deal with the front-end setup.
Why is it beneficial to use existing projects from GitHub as a starting point for learning a new technology?
-Using existing projects helps learners to focus immediately on the new technology they wish to learn, saves time, and also helps them to practice reading and understanding code, which is a vital skill for a developer.
What is the second benefit Travis mentions about using projects from GitHub for learning?
-The second benefit is that it helps in learning how to read and understand code from others, which is a crucial skill since most jobs will require onboarding to an existing application and understanding its codebase.
How does Travis suggest using GitHub projects to improve one's coding 'personality'?
-By pulling down and examining projects from GitHub, one can learn different coding styles and approaches, which can broaden their own coding 'personality' and provide them with multiple ways to tackle coding challenges.
What is the role of the sponsor 'brilliant.org' in the context of this video?
-Brilliant.org is presented as a platform to learn math, logic, and computer science interactively, offering lessons from basic to advanced topics, which can help in enhancing one's coding skills and logical thinking.
What kind of example does Travis provide to illustrate using a GitHub project for learning a back-end technology?
-Travis provides the example of a simple to-do app in React, which can be used as a starting point to practice back-end data persistence with different technologies like an API, SQL database, or Firebase.
What are some of the other examples of projects Travis mentions that one could use to learn a new technology?
-Travis mentions a to-do list app built in vanilla JavaScript, a bootstrap dashboard, and an employee management app as examples of projects that one could use to learn a new technology.
How does Travis recommend finding suitable GitHub projects for learning a new technology?
-Travis suggests using Google to search for specific projects by typing in relevant keywords like 'GitHub employee management app JavaScript', and choosing projects with more stars, indicating they are well-received and likely well-structured.
What is the importance of learning to read and understand code from others according to Travis?
-According to Travis, learning to read and understand code from others is important because it helps in onboarding to new jobs where one has to quickly understand an existing codebase, and it also exposes one to different coding styles and solutions.
What is the main point Travis makes about learning new technologies in the context of software development?
-Travis' main point is that when learning something new in software development, it's best to get right to the point by using existing projects, which not only saves time but also helps in learning to read code and gaining insights into different coding approaches.
Outlines
📚 Effective Learning Strategies for Back-End Technologies
Travis introduces a common frustration among developers: investing time in learning a new back-end technology, only to lose interest due to the time spent setting up the front end. He suggests using existing projects on GitHub as a starting point to dive straight into the technology of interest, avoiding the mental fatigue associated with front-end setup. Travis demonstrates this with a simple React to-do app, emphasizing the importance of learning to read and understand others' code, a vital skill for onboarding to new projects and expanding one's coding 'personalities'.
🧠 Enhancing Coding Skills with Brilliant.org
The second paragraph focuses on the importance of learning computer science fundamentals and logic to enhance overall coding growth. Travis highlights 'Brilliant.org' as a sponsor, describing it as an interactive platform for learning math, logic, and computer science. He shares his personal experience with the platform, mentioning the benefits of its practical, engaging lessons that can be tackled in short daily sessions. Travis also provides a promotional link for a free trial and a discount on an annual plan for his audience.
🛠 Leveraging Existing Projects for Rapid Learning
In the final paragraph, Travis provides additional examples of how to use completed projects as a foundation for learning new technologies. He suggests looking for projects that are already set up with the front end complete, allowing learners to focus on the back end or other aspects they wish to master. Travis gives examples of different types of projects, such as a vanilla JavaScript to-do list app and a bootstrap dashboard, and advises on how to find suitable projects using Google. He emphasizes the value of learning to read and understand code from others, which is beneficial for career growth and adaptability in coding approaches.
Mindmap
Keywords
💡API
💡Udemy course
💡Front-end
💡Back-end
💡GitHub
💡CSS
💡Mental fatigue
💡React
💡Code reading
💡Onboarding
💡Brilliant.org
Highlights
Travis discusses the common frustration of learning new back-end technologies by slogging through front-end setup before getting to the desired topic.
Suggests using existing projects on GitHub to bypass the initial setup and focus on the technology of interest.
Demonstrates using a simple to-do app in React as a starting point for learning back-end data persistence.
Advocates for the importance of learning to read and understand code from existing projects, a vital skill for developers.
Mentions that most jobs will involve onboarding to an existing application, emphasizing the need to quickly understand codebases.
Shares personal experience from a community challenge, highlighting the benefits of seeing different coding approaches.
Introduces Brilliant.org as a sponsor for learning math, logic, and computer science interactively.
Recommends Brilliant for sharpening skills in logic and computer science fundamentals.
Provides an example of a vanilla JavaScript to-do list app for learning back-end development.
Suggests using advanced examples like a bootstrap dashboard to learn and integrate back-end technologies.
Advises on finding projects on GitHub with more stars, indicating they are well-regarded and reliable.
Recommends searching for JavaScript projects with included source code to avoid unnecessary tutorials.
Encourages using Google to find specific project types, like 'GitHub employee management app JavaScript'.
Stresses the importance of learning by building upon existing projects to see different coding styles and structures.
Endorses the approach of skipping the familiar to focus on the new technology for efficient learning.
Asks viewers to give the video a thumbs up and subscribe if they found it helpful.
Transcripts
what's up everybody it's Travis here
from Travis dot media tell me if this
has ever happened to you so you have
this back-end technology you want to
learn let's say it's an API maybe it's
PHP maybe it's some kind of database
maybe Firebase so you buy a udemy course
or you buy some course or subscription
somewhere and you get all excited about
learning it and you open up the course
and you start taking the course in the
first 25 is setting up your front end
and you have to work through that 25
percent which is usually HTML and CSS
making the front end look pretty before
you even get to that technology that you
want to learn and so what happens is you
plod through it and by the time you get
through it all and you finally get to
that API or that database part you're
done with the project you're sick of
seeing it and you quit the course and
you move on and you don't learn anything
especially if the CSS is like Tailwind
where it's a ton of classes and you
don't have a lot of experience or you
don't have a lot of that memorized and
so you end up just typing classes typing
classes you get this mental fatigue and
you're just like you know what I'm worn
out I'm not even gonna do this project I
want to find something else to do if
that's ever happened to you then be sure
you listen up I'm going to give you a
way to avoid all of that and then I'm
going to give you why that way to avoid
that is the best way to level up your
software career it's going to be a fun
video let's get started so first how do
you work on that particular technology
without getting in the Weeds on all the
stuff you already feel comfortable with
So my answer to this is to find projects
on GitHub that already have that code in
place let me show you an example so
here's an app here's a simple to do app
in react and I use this for my fast API
example in my last YouTube video but any
back end you want to put together this
project would be a good starting point
so you don't have to deal with the HTML
and the CSS and the project looks good
let me show you what it looks like real
quick npm run start
I just pulled this down ran yarn install
and I'm running the app now so it's a
very simple to-do app so walk the dog
submit mow the lawn submit what you have
here is a react app storing this data in
a state so if I refresh it's all gone
it's the perfect project to practice
back-end data persistence with so you
want to build an API you want to persist
this data to a SQL database postgres
database whatever you're working on
Firebase just grab this app you have a
starting point and then immediately get
to the technology you want to learn
don't go back to HTML and CSS don't
start there every time trying to make
something from scratch it's a waste of
time now before I give you another
couple of examples I have a couple of
examples here for you before I do that I
want to talk about the second point that
I want to make and it's really the main
reason of this video the second benefit
to doing this is that when you get
projects from someone else and by the
way there's nothing wrong with that it's
on the public web it's in GitHub people
created it so that you would see it that
you would start you can use it just
don't use it for your app that you're
going to grow your business with but the
main reason of doing this is that you
get to learn how to read code you have
to open this up you have to see what's
going on before you can do anything else
to it and this is a vital skill as a
developer here's why probably 90 of
every job you're going to get in your
career you're going to be onboarding to
an application that already exists and a
lot of times it's a pretty significant
application and you're going to be given
like a week to figure out the flow of
the app to see how it works for yourself
and to make a commit that's usually what
they do when you get a new job read over
the code base for a week figure out how
it works and make your first commit and
then you're off to the races so if you
have practice pulling up apps from
GitHub seeing how they work it's going
to really help you out in your career in
addition to that and this was a lesson
that I learned this past week in the
Travis media Community we did our weekly
coding Challenge and another member
submitted their final code and I looked
at it and was like you know what I
didn't even think to go that route so
when I did my challenge I figured it out
I wrote my code how I would do it this
person submitted their code coming from
a whole different angle that I didn't
even think about I wouldn't have even
thought about and to be honest it's not
really my coding personality but that's
a problem because I tend to approach
things the same way with the same
mindset but seeing his code results made
me think oh there is this way to do it
so when you're coding your apps your
hobby apps or your apps for your
portfolio you're going to code a certain
way but when you pull down someone
else's app to learn a technology with
like we're just talking about you're
going to see how they do it and you're
going to learn something from it so that
when you work on the next project you'll
remember that and you'll have multiple
personalities coding personalities to
meet the challenge that's why I think
it's so important to be pulling down
GitHub repos and building on top of them
now before we look at some other
examples maybe it's not a back-end
technology or a language that you're
trying to learn maybe you're trying to
learn computer science fundamentals or
you're trying to get better at logic in
general something generic that will help
out your coding growth in your career in
your thinking and keeping you sharp if
that's the case then let me tell you
about today's sponsor brilliant
brilliant.org is a great way to learn
Math logic and computer science
interactively brilliant is fun practical
and has thousands of lessons from basic
to Advanced topics from computer science
and programming algorithms python AI
logic and other tools to help you level
up your skills or keep those skills
sharp and it's perfect for busy
self-taught people like me and you
making it easy to master big Concepts in
as little as 15 minutes a day maybe
you're having a hard time nailing down
conditional statements Loops are linked
lists brilliant will help you visualize
and internalize these Concepts in an
engaging interactive way today I
switched things up and took an intro
course on neural networks where I
learned about designing a computer
program that performs an image
recognition task on a set of very small
pixel images and like I said brilliant
can help you digest new Concepts and
solidify old ones that can apply across
many different programming languages you
can get started today for free for 30
days and get 20 off an annual plan by
using my link below that link is
brilliant.org slash Travis media now
back to the video so let me give you
another example so this one here
anything back in this is just a react
app that's already finished that you can
then build the back end into or
reference from your backend here's
another example this is a to-do list app
built in vanilla JavaScript so you could
use this for react say you want to learn
react or you just want to learn backhand
like we were just talking about this is
a good project to do that with if you
look at the live demo link here here's
the to-do list add to your list mow the
lawn there it is
so from here I can check it off I can
delete it I can clear all completed and
I can edit it walk the cat that's not a
thing by the way walk the cat so the
whole front end is completed for you
here and if you look at the code base
you have to pull it down and dig into
what they're doing and if you look at
the source folder which is usually where
you want to start
you'll see some CSS you'll see an
index.js some images and some modules so
let's click on the modules and we'll see
that they're using local storage they're
just putting everything into local
storage in the browser so if you want to
update this to save to State and react
you can refactor this to react you can
leave it like this and work on the back
end there's lots of options but you have
things done for you already now if you
want to more advanced example you could
download this dashboard here so this is
a bootstrap dashboard we have a preview
here this would this is what it would
look like you have charts you have a pie
graph you have a lot of options over
here
kind of explaining the theme and stuff
but everything here is just bootstrap so
it's just CSS there's no data coming
through this now it does say 49 here
that's if you want the pro template but
if you want the free one just click
download from GitHub and you'll find the
code here if you download that code you
can see that it's not too complicated as
a starter project so if you look at the
package Json you'll see bootstrap
chart.js perfect scroll bar and a bunch
of gulp packages gulp is like a task
Runner it's going to package up your CSS
and do a bunch of stuff for you and then
you'll see that there's a Pages folder
and a partials folder so you have your
sidebar your nav bar your footer so we
have our nav bar here we have our
taskbar we have our footer which is
going to be down here and then all of
this stuff is probably going to fall
within the pages so there's charts chart
JS this is probably the main content
like all of this stuff here it's just no
data and then forms basic forms icons
samples a blank page login register
basic table UI features buttons
typography all of that so you could take
this figure out how it's all laid out
and just add it back into it persist the
data send it data so that could be a
more advanced project but my main point
here is that when you learn something
it's best to get right to the point
don't start out doing things that you've
already done that you're kind of bored
of doing you want to learn this new
technology just skip ahead and start
there by using projects that are already
built and as an advantage of doing that
you learn to read code which will help
you in every single job you have in your
career and you get to see how other
people put projects together how they
code how they structure their data and
that's beneficial as well other examples
could include like an employee
management app find a project where
that's done in JavaScript it's
persisting to the browser or the local
storage and take it and add whatever
technology you're trying to learn to it
there's lots of examples out there and
the way to find this is just go to
Google and type in something like GitHub
employee management app Javascript hit
enter and you'll see a lot of examples
so I can click this this this and you
probably want to choose code bases that
have more stars like this one has 70
Stars which means a lot of people found
it helpful and it's probably well put
together this one has three stars three
stars three stars and there's lots of
options employee tracker employee info
dashboard holiday tracker it's all in
JavaScript vanilla JavaScript another
thing you can do is just go to Google
and type in JavaScript projects
tutorials and you'll find stuff like
this 21 easy JavaScript projects code
included you want the code included
three real-time JavaScript projects with
source code and the point of looking
this up is to get the source code you
don't have to go through the whole
tutorial and do all of the front end
stuff you can read about it that'll give
you an idea about the code base but just
find a tutorial that at the end they say
hey source code for this is that this
GitHub address and if you like the
layout if you like the UI you think it's
something you want to build on then this
would be a perfect approach to take and
that's all I got today so if you found
this video helpful give it a thumbs up
and consider subscribing to the channel
if you haven't see you later
関連動画をさらに表示
A Crucial Habit I NEVER Considered As A Developer
Do NOT Learn Kubernetes Without Knowing These Concepts...
Profitable Web Developer RoadMap - Step by Step | Freelancing, Jobs & AI in Web Development 🔥
Gamification vs. Game-Based Learning: What's the Difference?
7 Лет Опыта в IT | Что я Понял?
The BEST Pull Up Training EVER | Trevor Bachmeyer | SmashweRx
5.0 / 5 (0 votes)