A Programming Skill You Don’t Practice, but SHOULD! | Examples

Summary

In 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

00:00

📚 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'.

05:00

🧠 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.

10:00

🛠 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.

Keywords

💡API

API stands for Application Programming Interface, which is a set of rules and protocols for building software applications. In the context of the video, the speaker discusses learning an API as part of back-end technology, suggesting it's a key component for developers to understand and work with. The video script mentions learning an API as one of the technologies that might be the focus of a learning project.

💡Udemy course

A Udemy course refers to an online learning program offered on the Udemy platform, which is one of the largest online course providers. The video script mentions purchasing a Udemy course as a common way for individuals to learn new technologies, such as back-end development or databases.

💡Front-end

The front-end of a software application or website refers to the user interface and user experience aspects that the end-user interacts with directly. In the script, the speaker talks about the common issue of having to set up the front-end, which includes HTML and CSS, before getting to the more complex back-end technologies that the learner is interested in.

💡Back-end

The back-end in software development refers to the server-side of an application, which includes databases, server logic, and APIs. The video's theme revolves around the challenges of learning back-end technologies, such as APIs and databases, and how to approach learning them efficiently.

💡GitHub

GitHub is a platform for version control and collaboration that allows developers to work on projects and contribute to open-source software. The speaker in the video suggests using GitHub to find existing projects as a way to jump-start learning new technologies without having to start from scratch.

💡CSS

CSS stands for Cascading Style Sheets, a language used for describing the presentation of a document written in HTML. The script mentions CSS as part of the front-end development process that can be tedious, especially when using complex frameworks like Tailwind, which can lead to mental fatigue for learners.

💡Mental fatigue

Mental fatigue refers to a state of exhaustion or tiredness in the mind, often resulting from prolonged mental effort. In the video script, the concept is used to describe the feeling of being overwhelmed and worn out from the repetitive and detailed work involved in setting up the front-end of a project.

💡React

React is a popular JavaScript library for building user interfaces, particularly single-page applications. The video provides examples of React apps that can be used as starting points for learning back-end technologies, emphasizing the efficiency of building on existing projects.

💡Code reading

Code reading, or code review, is the process of examining and understanding existing source code. The speaker highlights the importance of this skill for developers, as it is often required in professional settings to understand and contribute to existing code bases, which is practiced by working with projects from GitHub.

💡Onboarding

Onboarding in a professional context refers to the process of integrating a new employee into a company or team, often involving learning about the company's systems and workflows. The script mentions onboarding as a common scenario where developers need to quickly understand an existing application's code base.

💡Brilliant.org

Brilliant.org is an online platform offering interactive courses in math, science, and engineering. In the video, it is mentioned as a sponsor and recommended for learning computer science fundamentals and improving logical thinking, which are essential for enhancing one's coding skills.

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