John Chen

I hope you’ll never be a situation where you need this tip, but sometimes in life you just end up stuck somewhere without a way home, and your only hope is that some kind soul will take a leap of faith and let you into their car. 

Hitchhiking is already hard, not because people don’t want to help, but it’s always easier for a person to keep driving on rather than suddenly hit the brakes to ask where you need to go. 

I learned this tip when I was browsing a mountaineering forum, and the thread’s creator asked if anyone knew about transportation options in a remote town of upstate NYS. Many of the replies suggested hitchhiking, and there was one reply that also gave a tip on increasing the chance that someone would even pick them up if they chose to hitchhike.

This is the gist of what the reply said:

Bad habit (”bad”, as in probably won’t be followed for very long) - Workout every day

Better habit (more likely to be followed)

- walk to the gym every day

Even better habit 

Basically you cannot do this:

<Tooltip>

  <Custom>Hi.</Custom>

</Tooltip>

Browsers have a same-origin policy to prevent different domains from interacting with each others’ DOMs. 

This is why Stripe is safe to use. Because Stripe’s credit card input field is inside Stripe’s iframe, even if the iframe is on a site called scamwebsite.com, there is no way for scamwebsite.com to actually query the DOM to see what your credit card info is.

However, browser vendors realize that there are situations where you want to be able to communicate with an iframe, like maybe you want to listen for when Stripe Checkout is done so you can proceed to the next page. This is where postMessage comes in. 

https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

postMessage offers a messaging API so that you can communicate with the iframe, as long as you and your iframe both explicitly expect this communication.

And the way you would use it would just be like this:

iframeWindow.postMessage(’saying hi to my iframe’, ‘https://stripe.com’)

Now, the documentation says that the 2nd argument, targetOrigin, can actually be a wildcard. That makes things easy. 

iframeWindow.postMessage(’saying hi to my iframe’, ‘*’)

Why wouldn’t I just always use that?

Let’s say you own a 3rd party script that your users install on their web pages to track page clicks. You don’t like raw DOM querying so you use jQuery.

Because jQuery is such a popular library, it’s highly possible that you run into the situation where a customer has jQuery version 1, and your script may use jQuery version 2. This can cause conflicts since your customer’s jQuery may call methods that have been removed or modified in jQuery 2.

The solution to this is provided by jQuery’s noConflict method. 

The first time I watched Dan Abramov present React Suspense, I was stunned. Lazy loading, code splitting, and graceful degradation. These things used to mark the final frontier of front end engineering, and were the mark of a truly excellent web app. It was the difference between good and great. Only the engineering teams with the highest standards would take the time to implement those features.

And now I was watching as Dan Abramov showed all of us how it could be done in a few lines of code. 

Here’s a quick example. The API is great so it is all very intuitive.

import React, { Suspense } from 'react'; const OtherComponent = React.lazy(() => import('./OtherComponent')); function MyComponent() {  return (    <div>      <Suspense fallback={<div>Loading...</div>}>        <OtherComponent />      </Suspense>    </div>  ); }

Here’s the video I was mentioning:

Let’s say you have a new startup and are trying to raise money.

One way to do it is similar to the way you see on a show like Shark Tank. 

The pitcher will ask for let’s say $20K for 20% of his company.

This means the company’s valuation would be $100K if a Shark actually made that investment.

Outside of Shark Tank and in the real world, however, it can actually be very difficult to make an accurate estimate of the value of a company, especially very early on when the company has little traction. In situations like these, in order for an investor to give you money, there would have to be a lengthy process of estimating the value of the company, and even once that was done, the actual act of transferring equity can take many weeks since it usually requires legal assistance in the form of expensive lawyers.

This is why it is very common for investors at this stage to offer convertible notes. 

Convertible notes are essentially loans for the startup. So let’s say an investor issues you a convertible note of $20K. You can now use that $20K for your business.

Once your business gains some more traction and it is ready to go through a series A round of funding, let’s say in that round of funding, you were able to do $20K for 10% of the company. That would mean that your company is valued at $200K, and the convertible note that you were issued before, is now converted into equity for that investor.

You would think then, okay the investor invested $20K, and the current valuation is $200k, so they will get 10%.

However, since the original investor took on risk by investing so early, usually, in convertible notes, interest and discounts are baked in to reward the investor for coming in early. So if the interest amount was 10%, and a year had passed between the convertible note and the series A round, the investor’s $20K would actually be converted at the value of $22K since 10% of 20K is 2K.

And as for discount, the company’s valuation is $200K, but if the terms of the discount was 10%, then the investor’s now 22K would be out of $190K, which would mean that the original investor would be getting ~11.57% of the company.

Math: 22/190 = 11.5789%

Now, what if your series A round is just super successful, and you are able to get a company valuation of $200M? Well, the original investment would now be converted to 0.0115789%. This kinda sucks for the original investor, so there is also something called a valuation cap on convertible notes.

One of the first things AWS suggests you do is to create a new Administrator level account and stop using the Root level account. It will also suggest that you delete your root level access keys.

How does deleting root access keys actually enhance security?

This is a good question. It doesn’t seem like it should at first.

You may ask, can’t a root user just generate another set of keys in like 2 seconds? Well, yes. 

If a bad person were to ever gain front door access to your root account, such as by knowing both your username and password, you’re screwed, and there’s no security policy that will protect you once that happens. That’s NOT what deleting your root access keys protects against.

What it DOES protect against, is social engineering, and human error. If you DON’T delete your root access keys, there is a higher chance that you will USE those root access keys, and a higher chance that you will LEAK those root access keys. That would allow a person to make deadly changes through the AWS API without actually gaining front door access to your root account.

So what should I do?

This is why it’s best to immediately create an admin level account for yourself, even if you are the root or only person on the team, so that if you fall to social engineering or leak your access keys, at least the compromised keys are only that of an admin and not of root.

Even if admin and root have essentially the same privileges, and a malicious admin could certainly wreak havoc, a malicious root could wreak even MORE havoc. 

For example, a malicious root could close the entire AWS account altogether. By providing admin level accounts to employees and even yourself, you limit the severity of potential catastrophe.

Let’s say you are working on a search input, with an autocomplete feature.

When the search input is focused, the autocomplete suggestions are displayed. When you click elsewhere, triggering onBlur, the suggestions are hidden. Pretty standard stuff.

Now, on each of the suggestions, you add an onClick handler so that the user can select one of the suggestions.

However, when you try testing it, when you click on the suggestion, the autocomplete suggestions go away, and nothing happens. 

What??

You try putting a console.log inside the onClick handler, and you observe that it never even reaches that spot. What is going on?

What is happening is that the onBlur handler for the searchInput, is being triggered before the onClick on the suggestions. Because the onBlur hides the suggestions, your click is only triggering the hiding of the suggestions, and not triggering the onClick.

What can we do?

There are many ways to get around this.

1. make an exception for the suggestions

in your onBlur handler, you can check e.relatedTarget to see if you are clicking a suggestion, and if so, not to hide the suggestions. Instead, you hide the suggestions in your onClick handler.

2. onMouseDown

onMouseDown is triggered before onBlur, so by using this rather than onClick, you’ll be able to trigger the original onClick handler before the suggestions are hidden

3. setTimeout

You can set a timeout in your onBlur handler so that the click has time to trigger the onClick handler before the suggestions are hidden.

Let’s say you run a website with many millions of users.

You remember the old days when you first started and had your APIs request data directly from the database. That worked until eventually more and more people started visiting your website and your database became sluggish from the load. 

To fix this, you added a memcached layer. 90% of the API requests were now satisfied by hitting the cache instead of having to go to the database. This worked great!

However, you started facing a different problem. Whenever you launched a new feature, your millions of users would suddenly start requesting the new data, but because that data was not in the cache yet, all those requests would go to the database! 

This is called the thundering herd problem, when there are many concurrent requests for the same resource which can cause an overload on your database.

You tried to fix this by priming your cache before launches, running the requests you expected your users to run, and this worked... for the very static data. 

For dynamic data that was related to a specific user, there was no way you could prime a cache effectively. You would have to prime the cache for all of your millions of users!

So what do?

Facebook deals with this through the technique of memcached lease get.

For the first request asking for data that is stale or not available in the cache, the cache layer can attach a lease to the request that gives it permission to query the database. 

Facebook instills a hard 10 seconds for a lease on each key, so for 10 seconds,  the other requests requesting the same data will be given the original stale data if it exists, AND an option to retry the request again later when the fresh data will be available in the cache.

Recently, I encountered an issue with a MySQL database where my query would just never receive a response.

I would open up MySQL Workbench, start the query, then watch as the loading spinner appeared until 10 minutes later, the request would fail and Workbench would return an error message saying that the connection was lost. 

I was upset but it wasn’t totally unexpected. I was trying to perform an INSERT from a joined table created from two tables each with more than a million rows after all.

Maybe my timeout wasn’t long enough. I increased the timeout threshold from 600 to 1200 seconds. 

Twenty minutes later, Workbench gave me the same error. Connection lost.

I tried running it directly on the command line.

No good.

Hmmm...

I removed the INSERT section, seeing if simplifying the query and just asking for a SELECT from the joined tables could speed up the response time.

Same result.

I opened up Google and started to look for answers. I started learning about chunking queries, indexing, composite primary keys, and MySQL Workbench settings. Most of all, I learned how much more I had to learn about databases.

I started experimenting with other queries, and saw queries that used to be fast become slow, and I could feel my gradual descent into the place that no engineer wants to be.

This is the place engineers go when they’ve started reading unrelated StackExchange posts from the 12th page of the Google Search Results, and they start thinking, “well, the market for engineers is hot right now...”.

Every engineer knows about “being in the zone” or “flow state”. Well, this is basically the opposite. It’s like The Phantom Zone for engineers.

It’s not a pleasant place to be. But I’ve come to realize it’s a necessary part of learning, because otherwise, you are probably not facing challenging enough tasks. 

Here’s a insightful article on why “flow” is actually avoided by the best piano players:

http://www.calnewport.com/blog/2011/12/23/flow-is-the-opiate-of-the-medicore-advice-on-getting-better-from-an-accomplished-piano-player/

“Okay, I’m going to need some help on this.” It was the end of the day, and I made a note to ask for help tomorrow.

I think people like to personify inanimate objects. It’s a way to add flavor and character to what actually is just a really advanced piece of rock. It’s why we say our phones “died”, or the compiler is “yelling” at you. So the next morning, I decided to retry my query. After all, the database had a good night of rest. Very scientific I know. 

To my dismay, it seemed the database had pulled an all-nighter binging Netflix or whatever databases do because it spat out the same error message, even for much simpler queries.

Oh wait. What if I...

I sshed into the remote docker instance running MySQL, looked up how to restart MySQL, and restarted it.

When it had restarted, I went back to Workbench and reran the SELECT query. It worked...

Closing Notes and QA:

How did you not think of restarting the database??

- In retrospect, I should have. It’s because the database instance runs in a docker container, and when the docker container is restarted, any changes I’ve made to the database are wiped. I think that prevented me from realizing I could just restart the MySQL process within the docker container without resetting the database itself.

Did the INSERT work too?

Let’s say you are working on a web app that lets you upload videos and has user accounts.

It makes a lot of sense to give each new video or user the next available database table ID as a primary key. This means your users table may look something like this:

And your API to get a video or a user’s profile may look something like this:

/users/2

/videos/5

However, there are a few reasons why exposing the table IDs to your user is not always a great idea.

Using the default IDs will allow bots to easily for loop and scrape information from your website, and will allow competitors to collect business intelligence like how many videos or users you have on your platform.

So what do we do?

If we look at Youtube, we can see that they use hashed ids like https://www.youtube.com/watch?v=3G4NKzmfC-Q which prevent a bot from being able to loop through all the videos from 1 to n.

However, we don’t want to rely only on these hashed ids. 

Because integers require much less memory than strings, databases receive a huge benefit from having integer IDs.