Develop Yourself

#255 - Your First Open Source Project: A Weekend with Kyle Simpson’s Code

• Brian Jenney

Share episode

This episode introduces a weekend project that will give you authentic experience working with existing code—a crucial skill that most tutorials and coding platforms simply don't teach. 

Using Kyle Simpson's YouPeriod GitHub repository, you'll learn to navigate a codebase written by someone else, which is exactly what you'll do in your first development job. This particular project is perfect for beginners because it uses fundamental web technologies (HTML, CSS, and vanilla JavaScript) rather than complex frameworks like React or TypeScript.

Here's the Github repo: https://github.com/getify/youperiod.app

This weekend project will teach you more about real development work than weeks of guided exercises. 

If you're completely new to JavaScript, check out our Dev30 program at dev30.xyz, where you can learn the fundamentals and beyond.

Send us a text

Shameless Plugs

🧑‍💻 Join Parsity - For career changers who want to pivot into software.

✉️ Got a question you want answered on the pod? Drop it here

Zubin's LinkedIn (ex-lawyer, former Googler, Brian-look-a-like)

Speaker 1:

Welcome to the Develop Yourself podcast, where we teach you everything you need to land your first job as a software developer by learning to develop yourself, your skills, your network and more. I'm Brian, your host. In this short episode, I wanna go over a project that you could do in this weekend that's gonna expose you to JavaScript. It's gonna expose you to GitHub basically a first step towards working with open source and it uses famous author Kyle Simpson's GitHub repo called uperiodapp, and I will have a link to that in the show notes. But if you look up Kyle Simpson and you look up uperiodapp online, you'll find this publicly available open source repo. Open source, by the way, is basically like a fancy jargony term for code that is out there that's publicly available for free. Most code, by the way, is open source. That's the beautiful thing about working in web development or in software development in general you can see all the code that really, really smart people have made. So anyway, we're going to use this app in order to get exposure to really good code written by an expert in the field of JavaScript.

Speaker 1:

Kyle Simpson has written a ton of books on JavaScript called you Don't Know JS. There's a series which I suggest you get, and if you're considering learning JavaScript in 2025, it's not really much different than learning it in 2020. The language evolves and changes, and every year we'll have some different features or functionality that will be added, but, in general, you can learn the basics of JavaScript, and if you don't know the basics of JavaScript, by the way, simply go to dev30.xyz that's D-E-V-3-0.xyz. We are currently enrolling for that program. It's one of our most popular programs at Parsity to teach you the basics of JavaScript by doing. Learning JavaScript is one of those things that you have to learn by doing. It's kind of like riding a bike or lifting weights. You can read all about it, but it means nothing unless you're sitting down doing the thing. So, anyway, if you don't know any JavaScript at all, either go and do that course that we offer or go to Codecademycom.

Speaker 1:

The problem with places like Codecademycom or Scrimba or any of these other online resources, which I think are really, really good, by the way, they're great starting points. The problem is, though, you have all these guardrails and it's not quite really what you're going to be doing on the job. It doesn't reflect the kind of work that you're going to be doing as a developer. So what work do you do as a software developer, one that works with JavaScript or really any coding language? You will come into a code base which has mostly been made by this point. Right, it's unusual, unlikely that you're going to be starting from scratch unless you're at a really, really small startup or maybe you're working on like a brand new project, and if you're a more junior developer, that's probably not going to be the case. If you go to any company of moderate size, it's super unlikely that you're going to be doing something from scratch, what we would call a greenfield project.

Speaker 1:

So working with open source software is a really great way to experience, kind of like, what the day-to-day life of a software developer is like. You're thrown into a code base where you don't really know what is going on and you kind of got to just figure it out, and I think this code base in particular is a really good one. And, kyle Simpson, if you're listening, I hope you're not mad at me and please, as a favor to me and Kyle Simpson and the open source community, if you do decide to use this repo and you do decide to make some changes and then propose changes, make sure they're good, because what sucks is when you get a bunch of people basically making automated requests or just making junk requests against a repo and just saying, hey, I think you should change this letter to be uppercased or lowercase. Don't do that. You know, this is just for your own learning. This is not something you're going to put on your resume or anything like that. This is simply for you to learn what it's like.

Speaker 1:

And the reason why I think this repo is a really good place to start is because it uses basic JavaScript, and when I mean basic JavaScript, I mean one. It's not using TypeScript. It's not using a lot of really fancy syntax. It basically is an HTML, css and JS web application, which is really unusual nowadays, because everything is in React, everything is in TypeScript, everything is in Nextjs, and the biggest problem that I see from people is that they want to skip over the JavaScript part and get right into React or right into Remixjs or Nextjs or working with AI tools or whatever, and they don't get the basics of JavaScript. So this is a really good way to get those basics down, and the way you're going to do this and the way that I suggest you do any open source project, by the way is to one, just get it running locally.

Speaker 1:

That means go to the project on GitHub. If you don't have a GitHub account, make a GitHub account Really, really important, because this is the way you're going to interact with code from your teammates and other people on the web and essentially just become part of the developer community. Being on GitHub means being part of a community. Now you can expose your own code for people to read. You can read other people's code, you can see how geniuses like Kyle Simpson, how they get down and how they write code, and you're going to just need this to be part of the open source community. So you have a GitHub account, you're at youapp from Kyle Simpson's GitHub profile and now you need to simply clone this project down, I mean, get a local copy of it on your machine and then just see how the hell do you run this.

Speaker 1:

This project is not very large, by the way, if you're looking at it and you're thinking, man, that's a lot of files. This is actually what I consider a fairly small project, and the nice thing is it should have some things you're familiar with at this point. Small project and the nice thing is it should have some things you're familiar with at this point. It has a stylecss file, it has an indexhtml file, it has a serverjs file and it also has a readme. The readme will tell you some things about the app. Now, this app is not in development right now.

Speaker 1:

He built this a couple years ago and I was intrigued by it because I thought, oh, what a cool app. Like it's this privacy data app where you can basically have some data that you want to privatize, so it's not on the web and it lives on your phone or your web browser or whatever. You don't really need to know how this app works, honestly, or what it's really for to get some value out of it. I mean, I think you should absolutely check it out and make sure you understand the basics of it, but step one of any open source repo that you're working with is simply get it up and running. Have something you can look at and poke around at. Next step is to look inside the JavaScript file. You'll see there's one HTML file and there's a few JavaScript files. Now this app you can type stuff into a input and then you press submit and it does something. That something is what you need to figure out.

Speaker 1:

This should lead you down some interesting rabbit holes and the way I like to explore different repos when I'm like new on a team, or whether I'm doing something with open source, which I rarely do. Honestly, I don't think it's the magic bullet to employment that everybody thinks it is. In fact, at Parsity, we don't recommend actually doing open source at all. I mean, if you wanna do it, go ahead and do it, but we don't tell people you have to do open source. That's gonna be your ticket to employment. It's not, but it is your ticket to seeing what it's like working within a larger code base, and one that you don't own, which is really helpful, because now you're seeing instances of good code, and now you're also seeing huh, how is this all constructed? And you're having to do some investigation to see how you can add changes, which is what I want you to do here.

Speaker 1:

The way I like to work with these kind of repos and open source projects is to add a change or break something or add a test. If you don't know how to write tests, learn how to write tests. I have some material on that that you can grab. It's also in the show notes. For this case, though, don't worry about writing tests. If you don't know how to do that yet, I think I would focus on what happens when you press submit. Can you add a debugger? Can you pause execution in the function that is executed? When you press that, can you update the UI? That's kind of a more trivial and beginner-friendly exercise.

Speaker 1:

The app doesn't look great. If I'm being honest, right, I'm not a designer. I don't think Kyle Simpson is either. He's a JavaScript wizard. That doesn't mean he's a designer. That's a really interesting distinction between front-end and designers that I think a lot of newer coders don't get. They think, oh, if I'm doing web development, I need to understand web design, and that's really really far from the truth nowadays, because I can't think of the last team I was on where a software developer who was writing JavaScript code also was in charge of design. I've never seen that happen and I don't think it would be a great idea. You need to understand design. Most of the designers I've worked with don't know anything about writing code and vice versa. I might know a little bit about design, like, okay, this looks terrible or this looks okay. I mean, look at Craigslist. Typical app built by a bunch of developers. Works great, looks awful. Anyway, a really nice first project you could do with this would just be to update the styles and maybe the HTML. That's a really good first starting point right there. You can make your own copy of it, you can make it look really nice, and then you get some experience just adding to some code that is not your own.

Speaker 1:

If you want to take this a step further, then you dig into the functionality. You think, huh, what happens if I Maybe break something? Maybe I'll break the submit functionality, maybe I'll extend it and add some more checks, like oh, the input you put in was too short or maybe it was too long or whatever. You can have some guardrails in there and you can just kind of begin poking around and exploring your curiosity and building on top of what this person has already done.

Speaker 1:

And when you think about working in open source, that's honestly what it is. It's looking at stuff that you're already interested in, some code that you're interested in or some software that you might already be using, and then looking at how you can improve it. And the first thing to do is just make sure you can get it working, get it running, explore the code base, understand a little bit about how it works and plays together. Look for something where you can get a foothold, like a button or a submit functionality or something that you can interact with it and then explore how that code works and then try to break, extend or rewrite that code. That's really it. It doesn't have to be some sort of really academic or super difficult task you're doing to benefit from open source. Again, this is just gonna help you a code base that you don't own.

Speaker 1:

And just to finish off this really short episode, I'll just say there's going to be a lot of stuff you don't understand in a code base. That's okay, that's expected. Imagine your first day at the job. You're going to be exposed to a code base that's likely thousands of files that's been written over years maybe a decade or more from developers who have left the company years ago and people that have just joined. There's no way that a human, or really even a computer at this point, or an AI agent or whatever, can just understand all that code. The most important thing is to pick a small piece, explore it and then get really good and then you kind of move out from there and then you keep finding places where you wanna explore or extend or rewrite or break or whatever, and then you get a much deeper understanding of that code base. I really hope that's helpful and I hope you take me up on doing this challenge.

Speaker 1:

This is actually something I did in a previous program where I was working with more mid-level developers, because I noticed a lot of them didn't actually understand JavaScript that well. And it's really, really important, because all the cool frameworks and tools that you want to use, like React or Remix, they're all built upon having a solid foundation in JavaScript, and if you don't have a solid foundation, then you're basically trying to build your house on really shaky ground and this will not only hurt you in an interview. This will hurt you earlier in your career and later in your career. So, whether you're super junior or you're mid-level or maybe even senior and you don't know how to work with JavaScript directly, this is really good exposure to that. In this particular repo, there's not many like this anymore. There's not a lot of apps that are just using basic HTML, css and JavaScript. Everybody's using all these cool frameworks and abstractions. But this is a good starting point for you, especially if you're learning and, once again, if you are learning JS and you're at the beginning stages and this is all just complete French to you.

Speaker 1:

I would just join Dev30. Gives you access to me in a Slack group, access to a community of people. You'll even get invited to one of the monthly tech talks we do at Parsity. It's a really great deal. It's like 49 bucks. Check it out, dev30.xyz. Anyway, enjoy that repo and I will see you around. That'll do it for today's episode of the Develop Yourself podcast. If you're serious about switching careers and becoming a software developer and building complex software and want to work directly with me and my team, go to parsityio. And if you want more information, feel free to schedule.

Podcasts we love

Check out these other fine podcasts recommended by us, not an algorithm.