Forem: SalarC123

How To Brainstorm Coding Project Ideas

SalarC123 — Tue, 03 Aug 2021 18:20:30 +0000

Introduction 🌅

I think we can all agree that making projects is extremely valuable for aspiring developers without formal work experience. Personal projects can directly demonstrate the skills you claim to have and can boost your resume. However, making your resume stand out from others is another challenge. No one wants to make the same old todo list or weather tracker anymore, so we need new ways to find unique and impressive project ideas.

But how do you brainstorm ideas? How do you think in a way that is conducive to producing good ideas? And where can you get inspiration? Well, throughout this article, I will try to answer these questions.

Journaling ✍️

I think that the first thing you should do is try to find a problem in your own life which needs solving or an activity throughout your day which you can make more efficient. You probably can't think of any right now, so I would advise journaling about everything you do each day and analyzing each activity to see if you can make software that can improve that.

For example, if you have problems with time management, you could make a program that takes in what events you want and need to do in a day and spits out an organized schedule.

However, if you journal for a few weeks and can't find any good ideas, you can start to analyze the problems of everybody else through online communities...

Browse Online Communities 🛗

Communities, such as Reddit or Twitter, have people that are frequently sharing personal problems. And since Reddit has subreddits for just about anything, you can look for problems among people with similar interests and try to solve those.

This strategy actually helped me come up with Classius which is an online course reviewing website that lets users find the best online courses for whatever subject they want to learn. This idea came to me after constantly seeing people on different programming subreddits asking questions like "what course should I take to learn X?" or "which course is better: X or Y?".

API Lists 📋

Another project brainstorming strategy I love to use is taking advantage of public API lists because they give tons of datasets that you can choose from for your project. With the amount of APIs on some of these lists, you're bound to find at least one topic that interests you and that you can base a project around.

For example, many people used COVID-19 data from the APIs on this list to make dashboards for COVID-19 spread and vaccine distribution. There are also categories for music, health, jobs, cryptocurrencies, and more.

public-apis / public-apis

A collective list of free APIs

Visualization 👀

Any type of visualization project is always a good idea because they are easy to show off and always look impressive, especially if you make an algorithm visualizer. There are already a lot of algorithm visualizers out there, but you can make a visualizer which compares different algorithms for solving a similar problem and see which is the fastest.

For example, you can make a shortest-path visualizer which compares Djikstra's algorithm with Floyd-Warshall and Bellman-Ford. This will add extra functionality to your visualizer and can make it stand out

Resumes 📝

Everyone wants to distinguish themselves on their resumes, so you should look at resumes from computer science students or graduates to find unique projects. I'm not saying you should copy these projects, but instead you should read their descriptions and try to make the same project yourself, preferably with improvements that add upon the functionality of the original project. A good place to find some of these resumes is r/csmajors on Reddit which has a periodic resume roast you can look through for inspiration. I found that this strategy provides some of the best project ideas very quickly (as compared to journaling).

Most of the ideas you find will be unique and can really help make your own resume stand out as well. For example, I've seen a project which utilizes satellite data to locate pollution in local communities, a fraudulent job posting detector, and a machine learning model which analyzes a politician's speeches to determine their political party to name a few.

Conclusion 👋

Thanks for reading! Please share any other strategies that you come up with in the comments and I'll try to add it to my list.

MERN Stack Authentication Tutorial (Part 2 - The Frontend)

SalarC123 — Sun, 18 Jul 2021 14:57:17 +0000

This is a follow up to my previous tutorial about how to implement authentication in your NodeJS/Express backend, so you might want to read that first for context

MERN Stack Authentication Tutorial (Part 1 - The Backend)

SalarC123 ・ Jun 24 '21

#webdev #tutorial #react #mongodb

Also, all of the following code is on my github, but I used it in one of my projects, so you'll have to navigate around a bit to find the relevant code, and it might be slightly different since I modified this code to be more general

SalarC123 / Classius

Website that lets the community rank online courses

Classius

Tech Stack (MERN)

• React
• Redux
• Tailwind CSS
• NodeJS
• Express
• MongoDB

Check It Out

View on GitHub

Packages To Install 📦



react
react-router

Here we'll need to install react-router for going to different routes, and for each route, I just fetch the data from the server because the frontend is only used for talking to the database. We just receive the data from the backend and display it with react. If you've done previous projects with NodeJS, you're probably aware of the res.redirect function which redirects the user with NodeJS, but that won't do anything here because the frontend and backend are on different ports. Basically, the backend can't redirect the frontend because it can only send data and receive data from it. Since we can't use express for routing, we must thus use react-router.

If you've used express before, you might also be aware that you typically need an express engine such as EJS or Pug to display your data dynamically, but in this scenario, React is our view engine. So, from React, we need to get the data from the backend since we can't directly pass it down like with a view engine.

If you want to know how to connect a React frontend with an Express backend to let this happen, you can check out one of my previous articles.

How to connect a React frontend with a NodeJS/Express backend

SalarC123 ・ Jun 6 '21

#webdev #react #node #mongodb

File Structure 📂

We'll have a login, register, and protected profile page (protected meaning that you need to login to access the page) to handle the flow of our app, and we'll start by making the components for these pages

React Router Setup

In our App.js component, we utilize three components from react-router that let us specify route names and what component to render on those routes. We can even render dynamic routes (using a colon followed by a variable name) as shown for the Profile Page route above. Also, make sure to add exact to each of your Route components because otherwise nested routes like "/first/second/third/page" will stop at "/".

Fetch Requests 🙏

For each component, we need to make quite a few fetch requests, so it's important to understand how they work and why we write them as they are. First of all, when we make a POST request to send our login information to the backend, we are required to add "headers" which give context to the receiver about the request. The two headers that we'll be using are Content-type: "application/json" and x-access-token: localStorage.getItem("token").

The "Content-type" header specifies to the receiver that we are sending json and must be used in every POST request while the second header, if you remember from the first part, is passed to routes which need to authorize the user. I'll explain more about the localStorage part later, but for now, remember that we'll use the second header whenever we are fetching data that is custom to each user.

Addtionally, our fetch request won't need to specify localhost:BACKEND_PORT/exampleroute if we set a proxy in our package.json to proxy the backend, and we can instead just write /exampleroute

Under our headers, we need to pass a body in our request which consists of the main data we actually want to send. Make sure to JSON.stringify this body because we can only send strings to the backend. This stringified object will then be parsed by the body parser middleware we imported in our backend in part 1 so that we can use it.

Our fetch request returns a promise, so we can use .then afterwards to get back any data we pass back from the backend after processing the request

Login 🔑

To walkthrough this code:

We first handle the form submission by grabbing the inputs and making a request to our login route which handles the validation, confirms the user exists, and signs a json web token for the user's session. Once the request has been fulfilled, we set the token we received from the backend or we display an error message
We are using localStorage to set this token so that it persists a page refresh and is global to our application but there are many pros and cons about saving tokens in localStorage which I will discuss later
This leads us right to our second block of code which is the useEffect. This code calls on our '/isUserAuth' route which has the sole purpose of confirming if the user is logged in. It does this by verifying that we have the right token. This is why need to send the x-access-token header. If the login fails, nothing will happen, but if the user successfully logs in, the json web token will be confirmed and we will use React Router's history API to redirect the user to our home page. Since the useEffect is run whenever the component is mounted, we are also ensured that a logged in user can not access the login page since they will always be immediately redirected with this useEffect call.
We finally have our simple login form which uses an onSubmit event to transfer the data

Register ®️

The register component is exactly the same as the login component except that here we call the register route which creates the new user in our database and redirects the user to the login page once they fill out the form

Data Validation 👌

For both the register and login routes, you should also make sure to add data validation to prevent users from breaking your app. I would suggest using an external package because they are typically safer and foolproof than a personal implementation (I prefer using joi).

Private Routes (Profile Page) 🔒

Before we move on, I want to mention that whenever we have a private route we need to call our '/isUserAuth' route that we defined in the backend part of this 2 part tutorial series. This route checks if the user has a valid json web token and sends back their username or other important information for the user if the token is valid.

Dynamically Rendering Navbar ⛵

Now you might wonder why I don't have my Navbar in my App.js component. Doing that could save me from manually placing the navbar in every component, but the problem with this is that it keeps the Navbar component static throughout the entire application. However, we don't want to do this because this is typically where the login/register/logout buttons are held, and those should be re-rendered whenever the user accesses a new page because we need to decide whether we should show the logout button or login/register buttons

To do this, we start by fetching the '/isUserAuth' route to ensure that the user is logged in, and if they are, we can set their username and display it in the navbar if we would like.

Then, if we go down to the JSX, we conditionally render the login/logout buttons based on if the username has been set. If it has been set, we render the logout button because we know they are logged in, and otherwise we render the login/register buttons which both use the Link component from react-router to let the user navigate to those pages easily.

Finally, our logout button calls a logout function that deletes the token from localStorage and then redirects the user to the login page so that our navbar can be re-rendered (we could also just refresh the page after deleting the token using history.go(0))

Where to store JWTs 🎁

To conclude this tutorial, I want to discuss different methods that you can use to store JWTs in the frontend because there are many pros and cons to using localStorage like I did above. The three main options are local storage, session storage, and cookies.

Local storage and session storage are prone to XSS (Cross site scripting) attacks, but are much easier to implement

Cookies, on the other hand, are prone to CSRF attacks while localStorage is not, but cookies can be more secure if you are using an httpOnly cookie.

Still however, both methods have limitations because they are each vulnerable to some type of attack, so I would recommend picking either one and then taking further security measures to prevent the respective attack to which your chosen method is vulnerable.

Thanks For Reading

MERN Stack Authentication Tutorial (Part 1 - The Backend)

SalarC123 — Thu, 24 Jun 2021 14:00:17 +0000

This tutorial will be split into two parts because its a lengthy, although relatively straightforward, process, so stay tuned for the second part that shows how to implement auth for the frontend (coming very soon). Sadly, we must start with the backend code because most of the authentication code is written here, but this entire process is very intuitive, so make sure to stick until the end!

Introduction 👌

This article requires that you have already connected your react frontend to your server, but if you haven't, you can check out my previous article about how to do that.

Setup ⚙️

You must first install these 5 packages with npm or yarn:



npm i express
npm i bcrypt
npm i jsonwebtoken
npm i mongoose
npm i body-parser

Why these packages?

bcrypt is used to hash the password we save to the database and is used later to verify that we entered the right token with each login
I will explain JSON Web Tokens (JWTs) more later on but in short, the jsonwebtoken package is used to authorize a user (by the way, authorize means to check whether a user has access to a certain resource or route whereas authenticate means to verify that a user is who they claim to be which happens during the login process)
mongoose is used to connect to our database, but I won't really explain the nitty gritty details of it because this tutorial is about authentication
Lastly, we have body-parser which just allows us to access post data from React in our post requests

Before we start, we need to create a file structure that looks something like this (I'll explain the purpose of the models directory and users file soon)

The snippet below shows the basic setup of our server.js file and includes connecting to the database as well as including some required body-parser middleware. To get your dbURI, you need to create a collection on MongoDB Atlas, but make sure to save your username and password in environment variables and not directly in the string like I did in my example below

server.js

Mongoose User Schema 🦡

The next step is creating a model that describes how each user will be structured in our database. Typically, users are modeled as an object with these five properties: username, email, password, and id when they were created. MongoDB provides us with the id, but we have to show mongoose what the rest of the data will look like. We can do this by using a Schema which takes in an object representing our data. This model will be called upon later when we create our register route because each user will need to utilize it.

/models/user.js

In the snippet above, you can see that we need to specify the data type of each item and whether it should be required by the user or not. In this case, every field is required, and we even have a second parameter that lets us set timestamps for the creation of the database entry.

Register

We haven't created the frontend for our registration system yet, but pretend that we have a field for a username, email, and password that posts a JSON object with this data to our "/register" route. Our body parser middleware from above will allow us to access this post data in req.body But first, let's require some helpful modules at the top of our server.js file. JWTs will be used for the login system, but the register route needs access to the User schema and bcrypt as well.

server.js

Now we must actually register the user by placing their info into the database as shown in the code snippet below. We start by checking if the username or email is already in the database through mongoose's findOne method with an object providing what we are looking for. Also, make sure that the findOne method is on the User model that we imported from our user.js file and that it is awaited because we don't want to have our if statement happen before we check if the username or email is in the database. After confirming that a user is not already in the database, we use bcrypt to hash the password. The second parameter of bcrypt's hash method describes how many rounds the hashing algorithm should perform, so for mine it would go 2^10 or 1024 times. The higher the number, the harder it is for the password to be brute forced but the more processing time is required. Finally, we can create the user in the database by describing their information in the same way that you specified in the user schema in user.js. We then save it using the .save() method which is asynchronous and can be awaited if you need to do further actions once the database has been updated. One last note about this process is that you should try to keep your res.json() calls consistent for an entire route by having the same keys so that your frontend does not receive undefined when trying to access properties from a server response. This is why I have "message" as a key in all of my res.json() calls.

server.js

Before we move any further, our server.js file will get pretty complicated from the login system, so I would advise that you create a separate file for authentication routes and import it into your server.js file (Read about how to do that in this tutorial. For simplicity's sake and because this application has no other features right now, I'm shoving everything into server.js, but this isn't a good practice, so be wary.

What are JWTs 🔑

Understanding JWTs is an important prerequisite to creating a login route, so I'll explain what they are first. When thinking about how to create an authentication system, you might have pondered over how your application remembers which user is logged in so that it could serve them custom content.

Well, JSON web tokens let you do that. They are encrypted hashes generated on every login that must be decoded to confirm which user is trying to access a resource. When a user logs in, the server will send a token that describes a certain user to the frontend, and that token can then be saved in either localStorage or cookies (so that the token is not lost when the user refreshes the page).

If that's still a little confusing, here's an analogy that I hope can clear it up: You are at a fair (the website) and to get in, you need a ticket (jwt) to get in and access rides (protected routes). Whenever, you want to get on a ride, your ticket (jwt) needs to be verified. If you rip up your ticket, then it becomes destroyed and you can't access rides anymore (deleting your token from localStorage). This means that you're logged out and need to go back to the ticket stand to get another ticket (log back in). And if you come back the next day, your ticket won't be valid anymore (JWTs expire after a specified amount of time).

We will start by creating the logic to create a token when the user logs in, and then we will make a middleware function that verifies the token and is applied to every route that we want to protect.

Sign JSON Web Token / Login ✍️

Now bear with me. The code above looks monstrous, but it's actually relatively simple. Let me explain how. This is the login post request where we start by taking in the user information and searching the database for the username. Since this returns a promise, we attach a .then to check if the user exists, and if they don't, we send back a message saying that the username or password is invalid. Pretty simple so far, right? If the user exists, we then validate the password with crypto's compare method which also returns a promise. If this promise resolves, we move on to "signing" the JWT which means that we create the token and send it to the front end. The first parameter of jwt.sign is a payload which is basically the information that you get when you decode the jwt later on. It's ideal to put any information about the current user here, so the username, id, and email should probably go here, especially if your app has a profile page for the current user. The next parameter is a secret key used for encryption which you should store in your environment variables, and the third parameter is an options object in which I specified how long before a token should expire (86400 seconds is equal to 1 day). You can also specify the encryption algorithm here. Finally, the fourth parameter is a callback which you can use to signal a success to the frontend and send the token to be stored on the client side. We need to prepend "Bearer " to the token because it specifies that we're using token based authentication. The alternatives are Basic and Digest authentication which utilize a username and a secret key instead.

Verify JSON Web Token 🔓

Now that we have created a JWT, thus letting a user sign in, we need a way to verify that the same user who logged in is accessing a route. Conveniently the jsonwebtoken library has a .verify() method which helps us do this.

We can create a middleware function to verify a user that is placed before every route we want to protect. If the verification fails, next() is not called in the middleware function and the user can't access data from a certain route. And instead, we can send back an object with properties describing the access capabilities of the user. We can set an isLoggedIn method to false if the verification fails, but if it passes, we can advance to the route and send back isLoggedIn set to true. If we advance to the next route, we can also utilize properties of the specific user that we decoded from the JWT inside of the route call. For example, we can use req.user and set the decoded username and id to req.user.id and req.user.username as shown in the code below.

Looking at the code, we start by getting the token from the request headers, so in our front end, we need to set a header called "x-access-token" and set it to the token which we can get from localStorage. We then split it to remove the "Bearer" which we tagged on earlier because all we need is the token. We then call jwt.verify() which takes in the token, the same secret key we used to sign the token and then a callback which takes in a decoded parameter that holds the current user data. Since we set the req.user data below that, the next route that comes will have access to the req.user data as well. Lastly, if the token does not exist or fails to authenticate, you can see that we send {isLoggedIn: false} back to the client side which will redirect the user (we will use react-router to do this)

Accessing The Current User 🧔

Here you can see that passing in the verifyJWT middleware as the second parameter to app.get() lets us access the current user's data in whichever route we would like

Logging Out 🚶‍♂️

When you delete the token from localStorage (which can be done through a simple button click that calls localStorage.removeItem("token")), the verifyJWT middleware will fail and thus send a response that has isLoggedIn set to false. If your frontend handles that correctly (which I will discuss how to do in my next article), you can redirect the user to the login page whenever this response is received

Conclusion 👋

Before the frontend code is made, you can still test the server code by using Postman, which I strongly advise doing because this code might not fit into your codebase perfectly or there might be small changes in the imported packages that change some of the functionality shown above.

Anyways, a lot of work went in to this tutorial, so please leave feedback to help me perfect it, or leave a like if this helped you out. Thanks for reading!

How to connect a React frontend with a NodeJS/Express backend

SalarC123 — Sun, 06 Jun 2021 19:39:50 +0000

MERN Stack 🚂

The MERN (MongoDB, Express, React, NodeJS) stack is very popular for making full stack applications, utilizing Javascript for both the backend and frontend as well as a document-oriented or non relational database (MongoDB), meaning that it's structured like JSON rather than a large excel sheet like SQL databases are.

This stack uses Express for the backend, and Express typically accompanies a view engine like Pug or EJS to render HTML dynamically. However, the MERN stack introduces a problem. React renders the frontend code with JSX, so you can't use those view engines, and you instead need a new way to render backend data for the client. You might suggest using JSX as your backend view engine, but then you would be losing a lot of the functionality that React brings to the table, so that option isn't suitable.

Making GET and POST Requests 🙏

Thus, to connect a React frontend with a NodeJS backend, we need to utilize the useEffect hook and the async function fetch(). useEffect will allow us to only run our fetch request once (when the component gets mounted) which will avoid slowing down our app. Since fetch allows us to make GET and POST requests, we can make requests directly to our server to get data. But how will this work?

First of all, we need to do some configuration so that our react code can make fetch requests to the backend. We need to first create a package.json file and add a start script for both the frontend and backend code. For react, you can use npm run start in the terminal and for NodeJS, you can use npm run serverStart after adding node server.js to the package.json as shown below (if your main server file is called server.js). You will also need to add a "proxy" key to your package.json that redirects fetch requests to the server port. So, if your NodeJS server is running on port 3000, you would add this:

Although, the port of the express server is important to note down, it doesn't really matter what port you run React. Now, before we make requests to the backend, let's set up the server code. We need to do npm install express body-parser which installs the "body-parser" package that is crucial for handling post requests. Body parser is a middleware, so we would add this to incorporate it.

In this snippet, I also added a home route with app.get and returned a JSON object for any request made to it, so that later on, we can get the data inside of React

Moving on, your backend and frontend won't be able to connect to each other unless both are being run, so run npm run start and node server.js in the terminal throughout the development process to make sure that your proxies to the backend can be received. Once those two are runnning, you can use the useEffect hook in React to make a GET request to the server at any listed route.

This will return an object with the data that you supplied in the server and since fetch returns a promise, you can attach .then to finally get that data. But remember to add res.json() in your express code for the data being sent down to the client-side because it allows for you to handle the data like a Javascript object

Now that you know how to get data from Express in React, let's find out how we can also post data, such as form information that needs to be added to a database, and utilize that data in Express.

To make a POST request, we need to set up a route to listen for post data in the server by using app.post. Since we set up the body-parser middleware already, any data that is posted to this route is accessible in req.body

Moving to React, we need to make another fetch call with useEffect, but this time, it needs some headers that tell the server how to interpret the request (it will interpret it as JSON in this case), and we need a body that supplies the data. Once we handle the promise, we can log out our data to the console to see if it works. Keep in mind that our fetch request can just have the end of the route (/home) because of the proxy that we specified in the package.json

Conclusion 🏁

There you have it! In summary, connecting a React frontend to an Express backend is simple. It just requires you to fetch data from the port that the backend server is located on. I didn’t cover PUT or DELETE requests, but those are very similar to POST requests, so you can learn how to do those very easily with the knowledge I gave above. And I really recommend learning the MERN stack if you’re not sure what full stack development stack to choose because MERN is extremely powerful once you learn how to connect React with Express. Anyways, thanks for reading and I would love to hear your feedback in the comments below!

Complete Computer Science Self-Study Guide

SalarC123 — Mon, 31 May 2021 03:13:34 +0000

Intro 🔖

Let’s face it. Getting a computer science degree does not make you any more capable than someone who takes a self-study route. Through the process of self studying, you can gain more practical skills for the real world and don’t have to spend time worrying about useless general education (Gen Ed) classes that colleges force upon their students. Self-taught coders lack a degree but save tens of thousands of dollars and can learn just as efficiently as they are not tied to a curriculum.

If you take the self-taught route, you can jump around books, courses, and projects, all while learning just what you need. As long as you can prove your skills and make enough projects (check out my article about project-based learning) to create an appealing resume, your shot at getting a job will be just as good as computer science graduates, or even better.

Additionally, I assume if you're reading this article that you are passionate about coding, so this whole process should be enjoyable. And time flies when you're having fun, so if you're up for the challenge, don't think of it as a laborious task each day. If you start to lose motivation or feel burned out from all the new knowledge that you're taking in, take a short break and come back a few days or weeks later.

So, how do you self study computer science? Well, I created a list of big ideas in CS and resources to learn them. The list might seem overwhelming, but remember that even if this takes you 2 years to complete, you'll still have an edge over computer science majors.

Bonus tip: for maximum success, blog your life throughout the process of self studying so that you can get a group of people holding you accountable to your goal. This way, you will be less likely to give up. You can also utilize the Feynman Technique by attempting to teach what you learn. If you make any mistakes, the DEV community will surely help you out and clear any misconceptions

Programming 👨‍💻

Programming is crucial because it lets you apply everything else that you learn in computer science, so it should obviously be the first step. To start programming, I recommend that you start learning either Python or Javascript first. You don't want to start with something too complicated like C++ as difficult concepts will confuse you until you've lost motivation. Obviously, you won't stick to one language for the rest of your life, so you can branch out once you feel comfortable with basic concepts. I like the pseudocode aspect of Python, but Javascript lets you more visually see what you're doing, which I think is extremely important for beginners and really makes the learning process fun. However, you'll need to start by learning HTML and CSS which aren't programming languages so you won't be learning concepts as quickly, especially since web development is pretty different from every other computer science specialization.

If you want to get started with Python, I think the single best book is Automate The Boring Stuff With Python which is completely free. This book is broken into two sections with the first part teaching python/computer science basics and the second part teaching how to automate tasks and use practical libraries. The end of each chapter includes practice projects which I found to be really beneficial. This book nails down the fundamentals really well, so you could just read the first part if you don't care too much about automation. Additionally, there is a Udemy Course for the book taught by the author Al Sweigart

If you still go to school, I would recommend that you spend passing periods or free time reading through w3schools tutorials to refresh your memory and try to consolidate what you have learned. If you're really passionate about computer science, this shouldn't be too hard to incorporate into your day.

If you want to brag to your friends, you could take Berkeley's free CS61A course which teaches the fundamentals of programming using Python

Algorithms and Data Structures 🚀

Algorithms and data structures may seem irrelevant for a majority of computer science specializations, but I still think that everyone should learn them. You might not use them in a web development job, but learning algorithms and data structures can change how you think and make you become more attentive to efficiency which is a plus for any job.

To learn these two things, I recommend competitive programming (check out my article about CP if you're interested) because it makes the learning process almost like a game as you get to compete with others in tournaments.

Some good courses for algorithms and data structures include Princeton's Algorithms I and Algorithms II as well as Berkeley's CS61B but it uses Java (it teaches the fundamentals of Java so you can be a beginner to Java and do fine in the class)

Math 🧮

Much of the computer science major revolves around math, so you should spend a considerable amount of time dealing with college-level math. I recommend that you take courses on calculus, linear algebra, and discrete math at a minimum. Alternatively, you could just take the free [Mathematics for Computer Science] by MIT and get a decent understanding of the math that you will need to get by, but you won't have an advantage over people with computer science degrees if you don't explore other courses.

edX has Calc 1A, Calc 1B, and Calc 1C for free and taught by MIT, so you should start with these three. After that, you should take UTAustin's two part linear algebra courses (part 1, part 2) which goes from foundations to advanced linear algebra. These courses are really long, so you can probably get by with only the first linear algebra course. Lastly, for discrete math, this course called Discrete Mathematics and Functional Programming seems really promising and incorporates programming into your math education which universities don't do.

Languages and Compilers ✨

Creating compilers for a preexisting language or creating your own programming language is a really good project for a resume and can show that you really know what you're doing, despite not having a computer science degree. Thus, acquiring a fundamental understanding of programming languages and compilers can be very beneficial to your future career.

You should start with Crafting Interpreters by Bob Nystrom and then immediately try to create a project from the knowledge you get in the book. This topic can be directly applied to a project and can turn out to be more fun than you might expect.

What about web development? 🗣️

Obviously, this list was structured around a college computer science curriculum, so web development was not included. This list also does not tailor to any other specializations, such as data science or game development, because this list is supposed to help you get a general understanding of computer science. Finding a niche or specialization should be done afterwards or on the side, but one should get a fundamental education in computer science first. If you plan to go into web development for your career, this information is still relevant because it gives you a competitive advantage over other self taught web developers and can expand your job opportunities. So, overall, you should explore programming, data structures and algorithms, math, and languages and compilers through the aforementioned courses and books. This process will take much less time than a college degree and lets you focus on solely relevant content. Good Luck!

If you disagree with my opinions, feel free to leave a comment. I would like to hear some opposing viewpoints!

Underrated React Hooks

SalarC123 — Sun, 09 May 2021 17:34:20 +0000

What Are Custom Hooks 👐

Considering that much of the react fanbase has switched over to using functional components, there has been an increased necessity for hooks, so today, I'll tell you about 3 custom hooks that I feel don’t get the attention they deserve.

But first, what really is a custom hook and how do you make one? A custom hook is "a JavaScript function whose name starts with 'use' and that may call other Hooks" according to the React docs, but they typically return a value and a function that can change that value as well. For example, the setState hook:

const [state, setState] = useState("initialValue")

returns state and setState when destructured. So, when making your own custom hook, you would do the same. It’s actually really simple. And when making your own hook, you can utilize previously created hooks and add more functionality. This is how the useLocalStorage hook below is made.

Custom hooks provide a layer of abstraction that make your code easier to read and can boost your productivity. I would advise that you try making your own in your next React project because they can be used to add any functionality. For example, the three hooks I list below allow you to use local storage, toggle between light and dark mode, and manipulate the browser clipboard.

useLocalStorage 📍

thanks to usehooks.com and Web Dev Simplified for this one

If you’re unfamiliar with the localStorage API, it works very similar to cookies in that it lets you save user data in the browser so that it’s not lost when one refreshes the page or closes the website. This could be very helpful for saving a user’s palettes on a color palette website without forcing them to sign up for example. In localStorage, data is stored in a JSON format, so you need a key and value representing the data.

The useLocalStorage hook is basically the useState hook but each state will also be saved to localStorage. A practical application of this is saving a user's current song and saved songs which I did when making a personal music player. In the code below which I pulled from my project, you can see that I just built upon the useState hook:

import { useState, useLayoutEffect, useEffect } from "react";

export default function useLocalStorage(key, value) {
    const [state, setState] = useState(value)

    useLayoutEffect(() => {
        const data = localStorage.getItem(key)
        setState(JSON.parse(data))
    }, [])

    useEffect(() => {
        localStorage.setItem(key, JSON.stringify(state))
        }, [state])

    return [state, setState]
}

Let me explain the parts of this snippet:

useLocalStorage(key, value) - Similarly to useState, this hook will take in the initial value but it will also require a key
const [state, setState] = useState(value) - initializing the state with the value parameter
useLayoutEffect(...) - there are two useEffects used, but this first one is used to grab the items from localStorage, and since there are no dependencies, it only runs once on the mounting of the component. I utilized useLayoutEffect because it runs before the component is mounted rather than after. This prevents the problem of the content rendering the default data and then changing to the localStorage data one second later.
useEffect(...) - the second useEffect is used to set the new state to localStorage, and has the state as a dependency so that it saves to localStorage upon each change of the state. Read this to learn more about localStorage methods such as setItem and getItem which I used above
return [state, setState] - this is the part that establishes the function as a hook. You can replace all your calls to setState with this function now because it can also be destructured in the same way. You just need to add the key as a first parameter

useDarkMode 🌕🌗🌑

In the modern day, dark mode is essential for any portfolio website, so why not create a reusable hook that simplifies the process?

For this hook, I am not going to show the code that makes the hook because it's a little more advanced, but you can check it out here. Nonetheless, I will still show you how to use it once it has been defined. This hook actually returns an object with the value and the functions required to toggle, enable, and disable dark mode, but it's still the same concept just written in a different way. You will need to write a little CSS to configure how your light mode and dark mode will look, but the toggling can be handled by the hook.

import useDarkMode from 'use-dark-mode';

const DarkModeToggle = () => {
  const darkMode = useDarkMode(false);

  return (
    <div>
      <button type="button" onClick={darkMode.disable}>
        ☀
      </button>
      <input type="checkbox" checked={darkMode.value} onChange={darkMode.toggle} />
      <button type="button" onClick={darkMode.enable}>
        ☾
      </button>
    </div>
  );
};

Code explanation:

const darkMode = useDarkMode(false) - the "false" passed to the hook specifies that it will be in light mode by default
\<button type="button" onClick={darkMode.disable}> - since the return value of the hook is an object, you can call darkMode.disable to change the state
\<input type="checkbox" checked={darkMode.value} onChange={darkMode.toggle} /> - the value returned by the hook is either true or false, so you can set checkboxes or toggles to the right mode with the "checked" attribute

useClippy 📋

useClippy is a hook that allows you to view your copy/paste clipboard and copy items to the clipboard. This can be used to make a button which copies a URL when clicked for example.

Again, with this hook, I will only show the code used to apply it, but you can view the actual hook here (written in Typescript though)

import useClippy from 'use-clippy';

export default function MyComponent() {
  const [clipboard, setClipboard] = useClippy();

  return (
    <div>
      <button
        onClick={() => {
          alert(`Your clipboard contains: ${clipboard}`);
        }}
      >
        Read my clipboard
      </button>

      <button
        onClick={() => {
          setClipboard(`Random number: ${Math.random()}`);
        }}
      >
        Copy something new
      </button>
    </div>
  );
}

Code explanation:

const [clipboard, setClipboard] = useClippy(); - useClippy is destructured the same way as useState but returns the last thing on the clipboard and a function to save to the clipboard
<button>...</button> - the buttons grab the last thing from the clipboard and set new items to the clipboard on click (pretty self-explanatory)

Conclusion 👊

Feel free to leave any custom hooks you've found or made that didn't make it on this list.

The Best Way To Learn Algorithms and Data Structures

SalarC123 — Sat, 17 Apr 2021 00:45:11 +0000

Leetcode?

When you hear the phrase, "algorithms and data structures," your first thought is likely Leetcode, but what if I told you that there was a more enjoyable and beneficial alternative to grinding Leetcode problems. I'm not claiming that Leetcode is useless because I know that it has helped millions of people pass interviews, but I just don't think that it's the most fun way to prepare for an interview. By doing Leetcode problems, your goal is to learn algorithms and develop better problem solving skills, so you shouldn't limit yourself to solely Leetcode when there are so many other options that fulfill the same goal. Breaking out of this narrow perspective can help you become more open minded and better at real world problem solving.

Sorry for the lengthy build up, but my solution is... competitive programming.

What Is Competitive Programming? 💪

Leetcode is useful but it's not that fun, so why not try competitive programming which is both. Competitive programming is the use of algorithms and data structures to efficiently solve coding problems. It provides you the opportunity to learn and even APPLY algorithms. If you get into competitive programming, you will be motivated to improve because you know that you can win competitions and get rewards, especially considering how many beginner competitions there are. You can develop an algorithmic sense of thinking that will carry over to interview prep, but even if you're not looking for a job, competitive programming is very helpful for developing problem solving skills in general.

Competitive programming does require a lot of time and effort to master, but it's all worth it because of the skills you acquire and the fun that you have while competing and learning. If you're really passionate about computer science, then you might not need as much motivation to learn algorithms and data structures, but you can get a leg up by starting to code competitively. According to Confucius, “Choose a job you love, and you will never have to work a day in your life,” so if you really think that competitive programming is for you, then you'll truly have fun while getting experience and developing real world skills at the same time.

The standard coding interview nowadays consists of a technical interview where you need to apply an algorithm to solve a challenging problem but with only a whiteboard and your mind. Thus, learning when to use algorithms, how to apply them to random problems, and how to articulate how they work is extremely important to learn, and competitive programming is the best way to achieve these goals, so let me tell you how to get started.

How To Get Started 🚀

I propose that you learn C++ for competitive programming even if you already know Python or Java (which are both used pretty frequently in CP) because it's much faster and allows you to directly allocate memory, so you don't need to worry about the typical time and storage constraints of each problem when you’re starting out. For example, this problem inputs a number, n, that could be 10¹⁸ which would be very slow for a language like Python to work with. C++ is also the most popular language for competitive programming, so naturally, there should be more resources available to you. For instance, you can start with the very well written and free Competitive Programmer's Handbook as well as Darren Yao's book (specifically for the high school United States Computing Olympiad). And if you've attempted to learn C++ before but gotten stuck because there were too many concepts to learn, don't worry. When using C++ for competitive programming, you can ignore most of the standard best practices like using header files or object oriented programming because you'll usually be working in one file with a few functions.

Once you've learned the syntax of C++, you can start working on problems, preferably with TopCoder and CodeForces or you can try old USACO Contests (the USACO competitions are only for high schoolers, but the problems are still really good. These are the difficulty levels in increasing order: bronze, silver, gold, platinum). Just remember that consistency is key, so you should try to work for at least one hour a day on competitive programming. Some problems might just take you that long, and if they do, don't look at solutions unless you've tried solutions for an hour. If you have no idea where to start, you can look at a solution, but make sure to note down somewhere how the problem was approached and what you can learn in order to approach it the same way. It's important that you practice everyday. Keep doing this until you feel comfortable enough to try out some beginner competitions.

Problem Solving Strategies 💥

What I typically do to solve each problem is start by thinking of a solution and then testing it with paper and pencil. I have a notebook next to my computer so that I can write down notes for improvement and new tips that I learn as well as to document strategies for each problem type (rectangle geometry problems, for example, can be simplified by creating a Rect class with four variables as coordinates representing the bottom left and top right of a rectangle and an area method. This prevents messy code and lets you focus on the solution rather than debugging or creating tons of variables). When mapping out the solution on paper, also ensure that your strategy works for edge cases so that you can avoid implementing convoluted if statements. If you can't solve a problem (and even if you do), you should try to watch live solves on Youtube to see how the best competitive programmers approach the same problems.

Helpful Resources 🔥

Websites

Complete Resource List

USACO Guide

Youtubers / Playlists / Videos

Carrara - really good live solves with C++, Python, and Java

Errichto - I haven't watched many of his videos, but he makes solution videos and gives general competitive programming tips

William Lin - he has some introductory videos which you can use as a roadmap

Competitive programming tips other than "practice" - I thought this was pretty insightful because if you ever ask for help on Reddit for what you can do to improve, the only response you'll get is to practice more

Conclusion ✨

To wrap things up, you should, at a minimum, make sure that you're having fun. The career benefits are amazing, but they shouldn't be your main focus if you're really passionate about competitive programming. Don't worry if you're too old either because it's never too late to start competitive programming. So, just give it a try. If you don't have any motivation right now, push through until you can start competing in beginner contests because from there, you won't lose motivation again. Good luck!

If you have any other resources, comment them below!

The Benefits of Project-Based Learning

SalarC123 — Sun, 11 Apr 2021 03:27:05 +0000

How is it different from course-based learning? 🧐

It's very self explanatory, but project-based learning is a learning technique that focuses heavily on building real-world projects. The alternative is following tutorials, but that is ineffective and many times, you'll forget what you learn from a course or tutorial series because you're typically consuming a lot of information without applying it. Thus, you don't truly understand a concept and waste a lot of your precious time trying to follow tutorials.

Now, don't get me wrong. Courses are amazing, and I love how they give you a structured curriculum, but if you're learning React, for example, you don't need to learn every nuance of the technology and explore the advanced concepts before you get the opportunity to hammer down the basics. Even if the course provides practice problems, those exercises are likely not meaningful to you, meaning that you won't retain the content for very long.

On the other hand, project-based learning, if done correctly, lets you get a feel of the basics through simple tutorials (preferably by reading the docs or watching youtube) and then immediately building what you want once you gain enough understanding to start writing your own code. Most people learning how to code have a project in mind that they can't wait to start, but unnecessary material interferes and many fall into the trap of wanting to learn it all, so they never end up completing their goal. However, project-based learning gives them the chance to start working on their project right away. Furthermore, Project-based learning gives you the freedom to learn as you create, so you'll definitely master the art of scouring StackOverflow for answers to problems. And unlike with courses, you will use 100% of the stuff you learn because it will directly apply to a problem that you are trying to fix.

The Pros 🎉

First of all, project-based learning is extremely fun. You don't need to listen to a teacher for hours a day like at school because you get to learn by doing and even failing. Learning from your mistakes is very effective, as you probably know, so why not incorporate it into your learning process more?

Project-based learning is also powerful for building your portfolio and padding your resume. Portfolio websites are really popular nowadays, so this is a great way to fill up the "projects" section. But even if your goal isn't to switch careers, it's very impressive to have 10+ projects which you can claim as your own and show to your friends and family. And remember, employers want to see proof rather than words.

And if you need more stuff to boost your portfolio, you can try learning some algorithms and implement them into previous projects or even make an algorithm visualizer that explicitly shows how comfortable you are with concepts that companies actually care about.

The Cons 🚨

The main disadvantage project-based learning is the difficulty that comes with finding a meaningful project. A simple google search will result in todo lists and Pomodoro timers, but I personally don't think that those are effective in inspiring motivation. Todo lists have been made a million times (literally) and don't provide enough of a challenge to really get your brain working. These projects are also very small and less impressive for a portfolio. Thus, you need to do some extra digging or sit down and ponder possible projects that would be useful for yourself or useful for the world. Some examples of projects I've made to solve some personal problems include a platform that lets you create stylish code snippets for online sharing (similar to carbon.sh) and an automatic SVG generator that produces polygons, waves, and particles in a specified size and color.

Conclusion 😎

Personally, I have utilized project-based learning to learn HTML, CSS, Javascript, React, and I am currently learning Redux and MaterialUI. For each of these technologies and languages, I found a few meaningful projects like a website for a school club or a physics visualizer to explore these technologies' most important features and learn how to utilize them when it really matters without having to go back on StackOverflow or Youtube to refresh my memory because I followed a course. Overall, project-based learning is extremely effective and completely free to try, so there is literally no reason to avoid starting today.

This is my first article, so please leave feedback about everything to help me become a better writer and developer for future articles!