DEV Community: Anthony Ng

Let's talk: Command Queue Pattern

Anthony Ng — Tue, 09 Feb 2021 01:53:32 +0000

In this video, I talk about the "Command Queue" pattern.

Password salts

Anthony Ng — Mon, 12 Oct 2020 19:26:49 +0000

Password Salts

We should not store passwords in plaintext in our database. If a hacker got access to our database, they would know our user's passwords.

username	password
anthony	password123

Instead, we should store hashed passwords in our database.

See this app for an example of hashing

A hashing function is a one-way function. It means that it's very quick to hash an input, but it's very slow to get the original input from a hash.

This is awesome. If our database gets leaked, the hackers can't easily get the user's original passwords. That's perfect!

Except for rainbow tables.

Rainbow tables are hashes of popular or leaked passwords. If our user's passwords are in the rainbow table, their hashes will match the rainbow table.

See this app for an example of rainbow tables

Another issue is we can tell when different users have the same password. Their hashed password will be the same.

This is where password salts can help. Password salts are randomly generated strings. Each users has their own unique password salt. We "sprinkle" the salt (like the condiment salt) to the end of their password.

We hash the password and salt together, and store it in the database.

See this app for an example of hashing passwords with salts

This is perfect. Rainbow tables are no longer effective. The hacker will have to brute force all passwords.

Also, users can use the same password as each other. But the password salt makes their password hashes unique.

DNS

Anthony Ng — Sat, 19 Sep 2020 19:45:51 +0000

DNS

DNS stands for "Domain Name System". It's the phonebook for the internet.

Imagine you want to call your friend. If you memorized their phone number, you can dial it to reach them.

But if you have a lot of friends, it can be difficult to memorize everyone's phone number.

A phonebook lets you get the phone number for your friend; all you need to know is their name. Memorizing a name is a lot easier than memorizing a phone number.

DNS is similar. You want to visit a website served by a server. If you memorized the server's IP address, you can reach them directly.

Try this out yourself.
Mac users can run nslookup www.google.com. You should get an IP address in your result. Copy and paste that IP address into your browser. That should bring you to www.google.com.

DNS lets you get the IP address for the server; all you need to know is their domain name.

When you enter a domain name into your browser, it looks up the IP address.

First, it checks if it already knows it. Someone else might have looked up the address before.

Then, your browser makes requests to DNS name servers. Name servers store DNS records for a domain. They receive queries for names, and return IP addresses.

Name servers are organized into a domain hierarchy. Each domain has its own name server.

For example, let's imagine you're visiting www.wikipedia.org. We ask the root name server. This is the top of the hierarchy and knows about all domains.

The root name server might not have the DNS record for www.wikipedia.org, but redirects you to the .org name server. We ask the .org name server. It might have the DNS record for it, or it might direct you to another name server that has it. Eventually, you'll get back the IP address for www.wikipedia.org.

There are name servers all around the world. If you were in Japan, you could get a different IP address for www.google.com than someone in San Francisco. This allows you to access servers that are physically closer to you, so you can have a faster experience.

WebSockets

Anthony Ng — Sun, 30 Aug 2020 18:00:59 +0000

WebSockets

WebSockets are a way for 2 computers to talk with each other. To see why WebSockets are useful, let's first look at HTTP requests.

HTTP requests are a common way for computers to talk with each other. One computer, which we'll call the client, requests information from the other computer, which we'll call the server. The server responds back to the client with information. We call this the request/response cycle.

Notice how the server can only respond to requests from the client. If the server has something interesting to tell the client, it has to wait for the client to ask them about it. Consequently, if the client wants to know when the server has an interesting update, the client needs to keep making requests to the server. We call this polling.

Polling is a work-around for a fundamental problem with HTTP requests; servers can't send information to the client unless the client requests it. WebSockets solve this.

WebSockets creates a permanent connection between the client and server. The client can send messages to the server through this connection. More importantly, the server can send messages to the client whenever it wants. It doesn't even need a request.

What are some use cases where you want to use WebSockets rather than HTTP requests?

Does your application have messages that are frequently sent?

ie: A stock market application may need to send multiple events per second for stock prices.
Does your application need to maintain a connection for a long time?

ie: A chat application needs to stay connected to send and receive messages.

Use applesauce to code faster

Anthony Ng — Sat, 14 Mar 2020 16:20:18 +0000

You are coding. You start getting into a flow. Then you get derailed trying to think of a variable name.

Most variable names are simple enough. Is this variable keeping track of for-loop counters? Name it i (or j or k).

const array = ['Hello', 'World'];

for (let i = 0; i < array.length; i++) {
  for (let j = 0; j < array.length; j++) {
    for (let k = 0; k < array.length; k++) {
    }
  }
}

Is this variable an array that holds user objects? Name it userArray.

const usersArray = [
  { name: 'Alice' },
  { name: 'Bob' }
]

But now you have a variable that holds the first 10 vegan users that live in NorthEastern United States? What do you call this?

const ??? = [
  { name: 'Alice', dietaryRestrictions: 'vegan' },
  { name: 'Bob', dietaryRestrictions: 'vegan' },
  // ...
]

You scan through your code to see what naming conventions you used. If you're paranoid, you start thinking about all your future, unwritten code. What will all that code look like?

You've broken out of your flow. After 2 minutes of meditation, you found a variable name.

// rolls right off the tongue
const topVeganUsersInUnitedStates = [
  { name: 'Alice', dietaryRestrictions: 'vegan' },
  { name: 'Bob', dietaryRestrictions: 'vegan' },
  // ...
]

Great!

Now you're most likely married to the variable name. You spent so much time naming it in the first place, so why change it?

And this is even if you remember to change the variable name. You have an approaching deadline as you create your pull request. The last thing you'll want to do is look at your code, line-by-line, and update variable names.

This assumes that your variable even makes it to your pull request. You may have refactored your code during development and deleted the variable. What a waste!

function getTargetUsers() {
  // 💀 topVeganUsersInUnitedStates
  return [
    { name: 'Alice', dietaryRestrictions: 'vegan' },
    { name: 'Bob', dietaryRestrictions: 'vegan' },
    // ...
  ];
}

In general, you want to delay decisions until you have the most information possible. We should do the same with naming variables.

I attended a refactoring workshop. The instructor used the name applesauce when he ran into a difficult variable. Why?

Having a default variable name speeds up development. Imagine if you had to think up new variable names whenever you created for-loops. That would take up a lot of time. Similarly to i for for-loops, we want to use applesauce for ambiguous variable names. This speeds up development.

If applesauce is already taken, feel free to experiment with other sauces.

Also, it's so outlandish of a variable name that it stands out among the rest of your code. If the variable name survives all refactoring and makes it to the pull request, you will need to rename it.

During pull requests is the time when you have the most information to decide on the best variable name.

Do you have any variable naming tips & trips? Let me know about it.

Use stateful JavaScript Regular Expressions

Anthony Ng — Tue, 25 Feb 2020 18:26:19 +0000

When I ran this regular expression, I got back the result that I expected.

const regex = /abc/g;

const text = 'abc';

regex.exec(text)
// => [ 'abc', index: 0, input: 'abc', groups: undefined ]

But when I ran it a second time, I got back null.

const regex = /abc/g;

const text = 'abc';

regex.exec(text)
// => [ 'abc', index: 0, input: 'abc', groups: undefined ]

regex.exec(text);
// => null

Strange 🤔

And when I ran it a third time, it worked.

const regex = /abc/g;

const text = 'abc';

regex.exec(text)
// => [ 'abc', index: 0, input: 'abc', groups: undefined ]

regex.exec(text);
// => null

regex.exec(text)
// => [ 'abc', index: 0, input: 'abc', groups: undefined ]

The regular expression works every other time.

const regex = /abc/g;

const text = 'abc';

regex.exec(text)
// => [ 'abc', index: 0, input: 'abc', groups: undefined ]

regex.exec(text);
// => null

regex.exec(text)
// => [ 'abc', index: 0, input: 'abc', groups: undefined ]

regex.exec(text);
// => null

regex.exec(text)
// => [ 'abc', index: 0, input: 'abc', groups: undefined ]

What's happening?

I was using a regular expression with a global flag. This creates a stateful Regular Expression object (RegExp).

JavaScript RegExp objects are stateful when they have the global or sticky flags set (e.g. /foo/g or /foo/y).

Source - MDN

The RegExp has a property called "lastIndex." "lastIndex" tracks the last place it searched for text. "lastIndex" is also where the RegExp will start its next search. The RegExp object remembers the last place it searched for text.

We can print out "lastIndex" and see how it changes.

const regex = /abc/g;

const text = 'abc';

regex.exec(text)
console.log(regex.lastIndex)
// => 3

regex.exec(text);
console.log(regex.lastIndex)
// => 0

regex.exec(text)
console.log(regex.lastIndex)
// => 3

regex.exec(text);
console.log(regex.lastIndex)
// => 0

After the first search, the RegExp "remembers" that it ended its previous search at index 3. The next time the RegExp runs, it starts its search at index 3. It looks at the end of the string for another match, and it can't find one. So it returns null.

There are rules about how "lastIndex" resets itself. See MDN for more details.

The lastIndex is a read/write integer property of regular expression instances that specifies the index at which to start the next match.

Source - MDN

In our scenario, "lastIndex" sets itself back to 0 when it can't find a match. This explains why the results alternated between right and wrong.

Workarounds

Some workarounds would be to reset the "lastIndex" to 0 after every search.

const regex = /abc/g;

const text = 'abc';

regex.exec(text)
// => [ 'abc', index: 0, input: 'abc', groups: undefined ]
regex.lastIndex = 0;

regex.exec(text)
// => [ 'abc', index: 0, input: 'abc', groups: undefined ]
regex.lastIndex = 0;

This tells the RegExp to start the next search at index 0, which is the start of the string.

Or remove the "global" flag if you don't actually need it.

const regex = /abc/; // removed "global" flag

const text = 'abc';

regex.exec(text)
// => [ 'abc', index: 0, input: 'abc', groups: undefined ]
regex.lastIndex = 0;

regex.exec(text)
// => [ 'abc', index: 0, input: 'abc', groups: undefined ]
regex.lastIndex = 0;

So be on the lookout for this "lastIndex" if you see any weirdness with your regular expressions.

What does the global flag actually do?

Regular Expressions with the global flag don't quit after finding its first match. This has some useful applications.

You can do global string replacements.

const nonGlobalRegex = /foobar/;
let string = 'foobar foobar foobar';
let result = string.replace(nonGlobalRegex, 'marsha');

console.log(result);
// marsha foobar foobar

const globalRegex = /foobar/g;
result = string.replace(globalRegex, 'marsha');
console.log(result);
// => marsha marsha marsha

You can also iterate over your string for each Regular Expression match that you find.

let string = 'foobar_foobar_foobar_foobar';

let index = 0;
let regex = /foobar/g;

let currentMatch = regex.exec(string);
while(currentMatch !== null) {
  console.log(currentMatch);
  currentMatch = regex.exec(string);
}

console.log(string);

DEV Community: Anthony Ng

Let's talk: Command Queue Pattern

Password salts

Password Salts

DNS

DNS

WebSockets

WebSockets

Use applesauce to code faster

Use stateful JavaScript Regular Expressions

What's happening?

Workarounds

What does the global flag actually do?

References