DEV Community: andrewu

Why Code Reviews Are Crucial For Newbies: My Story

andrewu — Thu, 14 May 2020 20:39:05 +0000

Coding is a lonely endeavor, especially if you're just starting out. It's hard to write code, it's even harder to seek feedback. I remember my first project in Node.js — for two months straight I looked exactly like the guy on this GIF. Only my code didn't run that smoothly. It was interrupted by constant YouTube tutorials and blog posts with 5 upvotes.

I knew some basic front-end, but I needed to figure out how to set up a server, host databases on MLab and write an app, which will update visuals based on the gathered data. It was a mess.

After several weeks of self loathing and distress, I've finally made it. That code look clunky, but it worked. Since it was a quick school project, I never found out what are the ways to improve it. I needed someone to review my code and give me feedback, but I was alone.

And if you google, there are tons of advice out there on getting a code review:
🤔 Posting your GitHub repo to Code Review Stack Exchange
🤔 Exploring subreddits like /r/critiquemycode or /r/codereview
🤔 Joining a friendly Discord Server and looking for help there
🤔 Doing pair programming while working on the same project with a friend

Yet, it's really hard to approach someone for help and share your code if you know that your project performs like this tractor. That's why in the very beginning I've just kept silent and made crappy projects.

Well, that's okay to make mistakes, but without any code review your memorize those bad patterns and it's hard to change them in future. This thought kind of stuck in my head for years, but I didn't find a solution myself. Instead I asked one of the senior students for help and received some advice on using sockets – the concept I knew nothing about, so it led to even more googling and more tutorials.

Several years later I joined Practicum and we set up the following process for students so they can receive feedback from day one. We researched some of our pain points and wanted to address them in this concept:

🚀 Students send their repos for a code review after each project
🚀 Their GitHub account gets connected to Practicum, so after updating code students just click on a button and send their work to a reviewer immediately
🚀 After project is reviewed line by line, a professional developer leaves comments for each student
🚀 Students get 4 iterations of code review per project
🚀 If students feel stuck they can ask a tutor for help or study material before sending their work for another review

Looking back I'd imagine that such process would help me a lot when I was just starting out. I would avoid some frustration and didn't spend so much time watching YouTube tutorials.

What was the first time you got a code review? How would this change your learning patterns if you received it earlier?

For those who made it to the end of my rant, Practicum is live on ProductHunt today, so feel free to stop by for more info about us and a get promo code to dive into Web Development 🙌

Question to CTOs: Do you hire Junior Web Devs?

andrewu — Thu, 27 Feb 2020 14:37:22 +0000

Is it a thing to hire Junior Devs or most companies are looking for Mid-level folks?

If you do hire Junior Devs:

What skills are you looking for?
What is a no go in candidate's CV?
Does your company provide training for juniors?

Super excited to hear your thoughts on that!

Make Your Own Password Generator: Step-by-Step guide 🤖

andrewu — Wed, 04 Dec 2019 18:35:10 +0000

Let’s say you want unique passwords for every website you use. But you don’t want to memorize all of them. Yeah, you should use a password manager. Yet, it’s always fun to build your own and learn the basics of how these things work.

That’s where my password generator comes in.

Here are the specs:

It takes in the address of a website
And a couple of secret words from you
Then mashes these things together and runs it all through a predictable encryption algorithm
The result is a unique combination of characters and numbers that you use as a password
For every address, the password will be unique, but it won’t be random.

Every time you generate a password for a specific address, you’ll get the same password. That way, if you forget your password, you can re-generate it, and it will fit.

A word of warning. This algorithm is not cryptographically secure. If someone knows your secret word from step 2, they will be able to recreate your password. So it would be unwise to use these passwords in mission-critical and sensitive areas. But it’s still worth trying to develop.

MD5 Hashing

At the heart of our algorithm will be the MD5 hashing engine (you see it in step 3). Hashing is an algorithm that turns text into a string of 32 characters, a kind of a digital fingerprint.

For example, if you encode google.com, you’ll always get the hash 1d5920f4b44b27a802bd77c4f0536f5a.

And if your string is https://google.com, your hash is always 99999ebcfdb78df077ad2727fd00969f.

Here is what’s important to know

The hash (or the digital fingerprint) cannot be reverse engineered to reveal the original string (at least, not easily and not directly).

Encoding the same string with MD5 will always create the same hash.

So if you have a collection of possible source texts and a target hash that you want to decrypt, you can just make hashes from the source texts and compare it to the target hash. That’s a common way to crack leaked password databases.

The algorithm is widely known and well-studied.

No cryptography is unbreakable. MD5 hashing is not 100% secure. Nothing in life really is.

One of the common methods to make MD5 more secure is adding salt. Salt is some secret word or character that is added to your encrypted string and that nobody knows about. With salt, reverse-matching pre-hashed passwords becomes much harder.

Here is an example

Say, you wanted to hash the string ‘mail.google.com’. This string would always give you the hash be5cab0695415d9363d18ad1345c73eb. A hacker intercepts this password without knowing where this password came from and what it means. But he wants to find out. He makes a table of possible strings, hashes them and matches the resulting hashes against your hash:

But what if your original string was ‘mail.google.comJacko’, where would ‘Jacko’ be the salt? In that case, your hash will be 397ea03e8e23b5b0127dffc6db629eab, and unless the hacker somehow guessed your salt, he’d be unable to reverse-match this hash.

So it all comes down to the hacker’s knowing what your salt is and where you put it.

The interface

I’ll start with some basic interface. Create a text document in Notepad, paste this and save as HTML. If you have little understanding of what’s going on, read the comments inside:

<html>
<!-- service area -->
<head>
 <title>Password generator</title>
 <meta charset="utf-8"> 
 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <!-- next line loads the MD5 hashing function -->
 <script src="https://thecode.media/wp-content/uploads/2019/05/js-md5.js"></script>
 <style type="text/css">
/*Adding some basic design*/
body{ text-align: center; margin: 10; 
    font-family: Verdana, Arial, sans-serif; 
    font-size: 16px;}
input{ display: inline-block; margin: 20px auto; 
    border: 2px solid #eee; padding: 10px 20px; 
    font-family:Verdana, Arial, sans-serif; 
    font-size: 16px;}
</style>
</head>

<body>
 <!-- Our page will be here -->
<div class="container"  "margin: auto;">
 <h2 class="todo__caption">Password generator</h2>
 <br>
 <!-- Interface begins -->
 <input type="text" id="site_url" size="50" placeholder="Where do you need this password? Paste the address">
 <br>
 <input type="text" id="keyword" size="50" placeholder="Some key word here">
 <br> <br>
 <!-- Main button -->
 <button style="font-size: 100%; padding:5px 10px 10px 10px" onclick="generate()">Generate password</button>
 <p>Your password is:</p>
 <div id = "pass_text" style="font-weight: bold"></div>  
</div>
 <script>
 <!-- Your main script -->
</script>
</body>
</html>

If you save this text as a .html file and open it in Chrome or other browser, you’ll get something like this. It looks nice, but it won’t work just yet:

Next, I’ll write a script that will run in browser and make sure all the encryption magic happens. Follow the steps:

Step 0: Housekeeping

I want to keep our code clean, so I’ll start with declaring some variables and setting up a function that will later be triggered by a button. This code won’t do anything yet, but I need it for proper running of the actually useful code. All this goes inside the block at the end of the previous document:

// setting up variables
var site, salt;
var text, password;
// The function to run all the useful code
function generate(){
// Some useful code
}

Step 1. Take the address from the site

I am writing in Javascript, which runs in the browser and has direct access to everything that’s going on in your web page. On the page, I have some input fields. Reading from these fields is a matter of one line:

site = document.getElementById('site_url').value;

Notice the site_url thing? That’s the ID of the input field. This command real like this: ‘Find whatever object on the page that has an ID ‘site_url’, look at its value, and pass whatever is in there into the variable called ‘site’, which I declared earlier.

This line goes under the comment ‘Some useful code’.

Step 2. Take the secret word

Same way, I read the secret word:

salt = document.getElementById('keyword').value;

This line goes under the previous line.

Step 3. Mash them together

Now I need to combine what is in ‘site’ and in ‘salt’. I can also add a little extra something for more saltiness. In Javascript, connecting two bits of text is done by simply adding:

text = site + salt + 'Practicum Rules';

Our ‘text’ variable will now have a combination of what is written in two input blocks on the page, and the secret word ‘Practicum Rules’. It’s not really protecting our algorithm since it’s hard-coded into the page and therefore, can be read by whoever looks into the source code of this generator. But it’s fun nevertheless.

Step 4. Encrypt them

I loaded the MD5 script earlier, so now all I have to do is use it:

password = md5(text);

This line reads: take the function called md5 and give it whatever is in the ‘text’ variable. What it spits out, put it into the ‘password’ variable.

Step 5. Output password

With JavaScript, outputting into the page is easy:

document.getElementById('pass_text').innerHTML=password;

This means: in the document, find an element with id ‘pass_text’, and put into its inner HTML whatever is in variable ‘password’. And I know I just put the encoded password there, so I’ll see the encoded result on the page.

Running the code

Now I need to make sure that all the useful code goes inside the function called ‘generate’, and I have this function mapped to our button on the page. Which I have, look at the bold part:

<button style="font-size: 100%; padding:5px 10px 10px 10px" onclick="generate()">Generate password</button>

Here is the final code

<html>
<!-- service area -->
<head>
 <title>Password generator</title>
 <meta charset="utf-8"> 
 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <!-- next line loads the MD5 hashing function -->
 <script src="https://thecode.media/wp-content/uploads/2019/05/js-md5.js"></script>
 <style type="text/css">
/*This will be some basic design*/
body{ text-align: center; margin: 10; font-family: Verdana, Arial, sans-serif; font-size: 16px;}
input{ display: inline-block; 
    margin: 20px auto; border: 2px solid #eee; 
    padding: 10px 20px; 
    font-family:Verdana, Arial, sans-serif; 
    font-size: 16px;}
</style>
</head>

<body>
 <!-- Our page will be here -->
<div class="container"  margin: auto;">
 <h2 class="todo__caption">Password generator</h2>
 <br>
 <!-- interface begins -->
 <input type="text" id="site_url" size="50" placeholder="Where do you need this password? Paste the address">
 <br>
 <input type="text" id="keyword" size="50" placeholder="Some key word here">
 <br> <br>
 <!-- Main button -->
 <button style="font-size: 100%; padding:5px 10px 10px 10px" onclick="generate()">Generate password</button>
 <p>Your password is:</p>
 <div id = "pass_text" style="font-weight: bold"></div>  
</div>
 <script>
// setting up variables
var site, salt;
var text, password;
// The function to run all the useful code
function generate(){
    //Step 1
site = document.getElementById('site_url').value;
    //Step 2
salt = document.getElementById('keyword').value;
    //Step 3
text = site + salt + 'Practicum Rules';
    //Step 4
password = md5(text);
    //Step 5
document.getElementById('pass_text').innerHTML=password;
}
</script>
</body>
</html>

Save it, load it, type in your secret word and the site URL, and press Generate. Yay, you got yourself a password generator. Congrats!

What can be done next:

You can make the encryption fancier by running the md5 algorithm many times.
You can work with upper- and lowercase letters and add extra characters to the generated password.
You can shorten the password to 9-12 characters to make it more manageable.

If you want to learn more things like this, check out our course in Web Development on Practicum. It has 20 hours of free lessons 🚀 Also I'm always looking for beta testers, so shoot me an email if you're interested!

Build a simple Reminder App in Python ⏰

andrewu — Wed, 20 Nov 2019 20:14:33 +0000

I keep forgetting to take breaks while working on my laptop, so I've decided to make a reminder app. I'm new to Python, so it will work in command-prompt mode. Yep, no graphical interface for now, but I might add it later. Here we go ✨

The app will be super simple:

Ask yourself what you wanna be reminded about
Ask in what amount of time (in minutes)
Calculate timeout
Wait for the specified time
Send a reminder from step 1

Step 0: Setting things up

Here is a Python command that I'll use:

import time

Import tells Python to load a module with the tools that we'll need for this. Time is the name of the module. We’ll only need a method called ‘sleep’ from that module. I'll use it to pause the program for a certain amount of time.

Step 1: Asking for a reminder

First you need to ask a user (in this case, yourself 🙃) and get a response. In a perfect world, we’d want a code like this:

reminder = user.ask("What shall I remind you about?")

But let's start with a simple implementation, so I’ll go with some built-in commands:

print("What shall I remind you about?")

print sends out a text message into Python’s default output (which in our case is command line).

text = str(input())

This means: ‘Take whatever the user has written, think of it as text, and put it into memory under the name “text”.’ Input() reads whatever the user inputs. Str() turns this into text. Equals means “put one thing into memory with such name.”

Step 2: Asking for time

Since we're building a reminder for work, let's calculate time in minutes:

print("In how many minutes?")

local_time = float(input())

The second line means ‘Take whatever the user typed, think of it as a number, put it in memory under the name “local_time”.

Step 3. Calculating timeout

We have a number of minutes that our app needs to wait before reminding us. But Python’s time.sleep() method requires seconds, not minutes. So we need to convert minutes into seconds:

local_time = local_time * 60

This reads: ‘take whatever is in memory under the name “local_time”, multiply it by 60, and put it in memory under the name “local_time”’.

Step 4. Waiting...

Now we’ll need that time module that we loaded in step 0:

time.sleep(local_time)

This reads: ‘Take the method “sleep.” from the “time” module. Find a piece of data under the name “local_time.” from the memory. Give that piece of data to “sleep” and see what happens.”

What happens is: we have a number of seconds in ‘local_time’. We give that number to ‘Sleep,’ and the program dozes off for the specified number of seconds.

Step 5. Sending a reminder

Remember that the reminder text is stored in memory under the name ‘text’? It’s time to use it:

print(text)

This means: take whatever is in the memory under ‘text’ and send it to output.

Final code

import time print("What shall I remind you about?") text = str(input()) print("In how many minutes?") local_time = float(input()) local_time = local_time * 60 time.sleep(local_time) print(text)

If you input this into your Jupyter notebook and run (Shift + Enter), you’ll see your program in action:

That's it for now, but I might add the graphical interface to it later. Would love to hear your comments on this!

Meanwhile, if you're bored and want to learn Python through building practical things, check out our course at Practicum. It has 20 hours of free lessons 🚀

Create Your Own Ad Blocker in 3 Minutes ⏳

andrewu — Thu, 31 Oct 2019 12:47:02 +0000

Hey everyone, today I'm going to use some basic programming and browser plugins to make a simple ad blocker. Because... why not?

I'll be using a CSS command that can hide any element on a page:

display:none !important

To make sure this command works for every page I visit with a browser, I'll embed it in a special extension.

What's an extension?

Extensions (or plugins) enhance a browser's basic features. They let you quickly save videos from YouTube, find out what font is used on a web page, or do whatever else they're programmed for.

I’ll use Google Chrome for all of the steps that involve extensions.
Most other browsers have their own plugins, and working with them is more or less similar to working with extensions in Google Chrome.

I’ll need an extension that will work with CSS and apply our command to the right element style. I’m going to choose an extension called User CSS, but feel free to pick any other extension that applies custom CSS styles.

Note: It's safer to download extensions from the official Chrome Web Store since Google checks these extensions for viruses before making them public.

First, go to the plugin page and click "Install." The browser will ask you if you're sure — I am. When everything's ready, you'll see the extension icon and a tooltip in the upper-right corner of your browser. From this point on, the extension will run on every new page you open.

How to block ads

Open the page, and wait for the unwanted banner to cover the screen. Then find the code that makes the banner appear: right-click the dark area, and select "View code". Look for the name of the element in quotation marks after the class= command.

For example, the line can look like this:
<div class="b-popup" id="popup1" style="">

You can see that the pop-up I want to block has a class called b-popup. A class is a CSS statement that gives an instruction like, "Output everything which belongs to this class in the following way." If I train the browser to hide everything in the b-popup class, that'll be mission accomplished.

In CSS, class names start with a period, and the commands that apply to the class are enclosed in curly brackets. So my code for configuring the pop-up should look something like this:

.b-popup {some commands}

All I have to do is write inside the brackets our command to hide elements from the screen:
.b-popup {display:none !important;}

Now on that same page with the ad, click the extension icon, turn it on, and paste our command on a blank line.

From now on, the extension will always monitor this website. Moreover, if other pages attempt to show similar pop-ups, the extension will block those pop-ups too.

That's it! Your personal ad blocker is ready to go. Whenever you come across something annoying on a website, simply get the name of that element, and add the relevant class to the extension.

If you enjoy this post, keep an eye on some new ones. I'll be posting some tips for beginner programmers.

Also feel free to reach out with any questions if you want to learn Web Development through building practical things 🚀