Category: Web Development

Posting content on WordPress can be time consuming without the right technique. By default, copying and pasting images isn’t possible. Images need to manually be uploaded, resized, and optimized for performance. And even if you do that, they’re still not optimized for global performance because they aren’t on a CDN (content delivery network). To simplify posting content on WordPress, I’ve found the following setup and workflow to be best.

Managed WordPress Hosting

You can be cheap and try to manage hosting a WordPress site yourself. But, you’ll likely get frustrated as you can’t keep up with vulnerabilities that can slow down or break your site. You can get affordable managed WordPress hosting on GoDaddy. They’ll take care of upgrades and remove insecure plugins for you.

Install the Free JetPack Plugin

This plugin is critical, especially for performance. Among other things, you can enable performance optimization to automatically resize, optimize and host all images and static files (CSS, JS) on WordPress’ content delivery network. A 3.5 MB image instantly gets optimized to a fraction of that size, e.g. 120 KB. This plugin is an absolute must.”

Continue reading WordPress Website Tips

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.

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.

See the Pen NJEzrg by Abdullah Yahya (@javanigus) on CodePen.

If you want to add animation to a website, you can many options. Here are a few I recommend.

CSS transitions

For simple animations, you can just use CSS transitions. Or, just use this CSS animation library.

JavaScript Animation Library

For fancy animations where you still write JavaScript to control the animation, the Greensock JS library is great. Another great one is anime.js.

svgator (free trial)

For even fancier animations that allow you to design the animations using a timeline, svgator is an online tool that can do that.

Adobe After Effects (free trial), BodyMovin and Lottie

For super fancy animation, design your animation in Adobe After Effects. Then, download and install the BodyMovin plugin for After Effects. Then, export the animation from After Effects using the BodyMovin plugin. The exported files will contain the animation data as JSON object. It may also include image files as a PNG which, if possible, you should manually export each one as a SVG and replace the PNGs with the SVGs. Then, load the lottie library in your page, e.g. with

<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.4.3/lottie_svg.min.js" integrity="sha256-CVhGZIHAj+TzP6acM0j2ko94CaIqfcnqo/y79O+KOcg=" crossorigin="anonymous"></script>

and specify a class on the element where the animation should appear, e.g.

<div class="animation"></div>

Place any exported images in their appropriate folders and update their paths in the animation data JSON object.

Then, in your JavaScript, load the animation. Here’s example code.

See the Pen JavaScript Animation Using Lottie by Abdullah Yahya (@javanigus) on CodePen.

When building a website, you’ll often find yourself needing to remove backgrounds from photos of people. This can be especially difficult when a person’s hair is wispy and its color blends in with the background. Though not perfect, there’s a free, quick and pretty decent online tool to remove backgrounds from photos of people. No login is required. Just go to remove.bg and upload your photo.

Here’s an example of a subject that would be hard to remove the background from manually. As you can see, Remove.bg does a pretty good job but they’re also modifying the subject’s hair somewhat. This is most evident when you replace the background with a solid color of high contrast compared to the subject’s hair color.

Continue reading Easily Remove Background From Photos

As of this posting, the global usage of IE 11 stands at 2.5% according to caniuse.com. If that percentage is still too high for you to ignore, then you’ll need to test your website in IE 11.

Many developers use Macs for web development. Though you can test websites in Chrome, Firefox and Safari on a Mac, you can’t install and therefore test IE 11 on a Mac. You can get a separate Windows machine for testing IE 11 but that’s a hassle and overkill. Here are some steps to test and debug websites in IE 11 on a Mac using VirtualBox and Serveo.

1. Set Up VirtualBox

1. Go to https://www.virtualbox.org/wiki/Downloads and download VirtualBox for OS X hosts (Macs) and install it.
2. Get Windows 8 Virtual Machine
   Go to https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/ and download a precompiled VirtualBox for Windows 8 with IE 11

2. Open Website in Local Browser

On your Mac, open your website on your local web server in any local browser (e.g. Chrome, Firefox, or Safari) and not the URL. It may be localhost or localhost:8080 or localhost:3000, etc.

3. Set Up Tunnel Using Serveo

1. Open Terminal
2. Run the command ssh -R 80:localhost:3000 serveo.net using the correct local URL and port number
3. You will see a response saying “Forwarding http traffic from https://abc.serveo.net” where abc may be different
4. For more information, go to http://serveo.net. You can also use ngrok but Serveo is easier with nothing to install.

4. View Website in IE 11

1. Run the virtual machine you just downloaded by double-clicking on it. Open IE 11 and enter the Serveo forwarding URL, e.g. https://abc.serveo.net
2. Make changes to website files
3. Reload IE 11 in VirtualBox to see the changes

When you’re debugging some JavaScript in a browser, you might get confused to find that when you dump an object’s value to the console, you get unexpected results. Consider the sample code below.

See the Pen Test JSON Dump by Abdullah Yahya (@javanigus) on CodePen.

Here’s what you see in the Chrome console.

The first console.log statement is showing the final value of the object as opposed to the value at the time the console.log statement was called. That’s because console.log is displaying a reference to the object, not the copy of the object at the time the console.log statement was called. To solve this, always stringify (serialize) the object which makes a deep copy (deep clone) of it before consoling it out. To see a prettified display of the object, parse the stringified object. This is what’s done in the 2nd console.log statement which shows the expected value of the object.