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.
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.
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 TipsI 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.
it’ll redirect to
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
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.
At that point, Apache would redirect to
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.
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.
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.
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.
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.
For simple animations, you can just use CSS transitions. Or, just use this CSS animation library.
For fancy animations where you still write JavaScript to control the animation, the Greensock JS library is great.
For even fancier animations that allow you to design the animations using a timeline, svgator is an online tool that can do that.
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.
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.
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.
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.
This will show the date and time 2018-08-02T10:00-07:00 in a user’s local time. To simulate being in a different timezone, change your timezone in your operating system and reload this page.
See the Pen Show Date & Time in User’s Local Time by Abdullah Yahya (@javanigus) on CodePen.
