Using Google Drawings to Easily Annotate Images

Posted on Jun 15, 2019

When reviewing websites, you often want to point at certain elements and add comments about them. This can easily and freely be done using Google Drawings.

1. Take a screenshot of part of your screen onto your clipboard
2. Open Google Drawings and paste the screenshot

3. Click one of the Callout buttons

4. Click and draw near the element in the screenshot where you want to add a comment

5. Drag the orange point at the tip of the arrow and drag it towards the element you want to draw attention to

6. Click in the callout box and type your comment then optionally adjust the size of the box

 

Default Apache on Heroku Redirects From https to http for Links Without Trailing Slash

Posted on Jun 5, 2019

I recently set up a Heroku app using the Apache and PHP buildpack. The Apache configuration on Heroku was most likely the default which, if it receives a request to a URL without a trailing slash, e.g.

http://www.foobar.com/about

it’ll redirect to

http://www.foobar.com/about/

That alone is fine. However, I was getting redirected from https to http, which was not fine. This is likely due to the presence of a load balancer in front of the Heroku app server with SSL/TLS being terminated at the load balancer. When a request to an https URL without a trailing slash like

https://www.foobar.com/about

the request was secure to the Heroku load balancer but from the load balancer to the Heroku app server, it must have been insecure, e.g.

http://www.foobar.com/about

At that point, Apache would redirect to

http://www.foobar.com/about/

and the user would end up going from https to http. To resolve this, and as a best practice, just force https on all URLs. This is easily done on Heroku using a .htaccess file with a redirect rule, in case your chosen server is Apache.

 

JavaScript Promises

Posted on May 17, 2019

Using Promises

Say we have an API client with three methods, getItem(), updateItem(), and deleteItem(), each of which returns a Promise. There are only two functions you need to worry about: then() and catch().

Each call to then() creates another step in the Promise chain, and if there’s an error at any point in the chain, the next catch() block will be triggered. Both then() and catch() can either return a raw value or a new Promise, and the result will be passed to the next then() in the chain.

Convert callback to Promises

If a function doesn’t return a Promise but rather a callback, like Node’s fs.readile function,

https://nodejs.org/api/fs.html#fs_fs_readfile_path_options_callback

then you can convert the call to a Promise as follows. The new function, called readFilePromise, converts the original function, called readFile, into a Promise.

To use the new promise function, do this.

To create Promises out of ordinary values, use Promise.resolve() and Promise.reject().

If you have a function that needs to return a Promise, like fs.readFile, but handle certain cases synchronously, you can use Promise.resolve() and Promise.reject() to create Promises out of ordinary values, like this.

Running concurrently

Promise.all is a convenient method for running an array of Promises concurrently, i.e. all at the same time. For instance, say we have a list of files we want to read from disk. Using the readFilePromise function we created above, it would look like this:

Here’s another example

And another example (from Kyle Simpson)

In the example above, we can use the new Promisified function in the chain as follows. We can also create a new Promise that returns a Promise of an ordinary value to keep the chain going.