Category: Web Development

Web Page Animation Options

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.

Easily Remove Background From Photos

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

Test and Debug Websites in Internet Explorer 11 on a Mac Using VirtualBox and Serveo

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

Console.log Displays Incorrect JavaScript Object Values

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.

Remove Page Breaks / Dividers in Google Docs

In this day in age, we don’t need to print as much as we used to. While Google Docs will allow you to print pages of content, sometimes you just want to use it as a digital document to keep notes and pictures that you’ll never print. When you insert pictures into a Google Doc, due to their size, you’ll often find that they move onto the next sheet leaving a large white space before. This is annoying but easily solved by making it appear as if you were working with one page / sheet of unlimited length. In Google Docs, just uncheck the Print Layout under the View menu.

Using JavaScript to Temporarily Prevent Clicks and Form Submissions

When you test interactivity of a web page by clicking a link or submitting a form, you sometimes don’t want to be redirected to a new page. Using JavaScript in your browser’s console, you can easily make this happen.

  1. Open your browser’s inspector and inspect the element (link or button) that when clicked on, won’t take you to a new page
  2. In your browser’s console, add the following JS
$0.addEventListener("click", function(e) {
     e.preventDefault();
});

How to F*$%-ing Hide Content in HTML Emails in Outlook on Windows!

Here’s how you f*$%-ing do it! Just wrap the content you want to f*$%-ing hide in this client-specific conditional.

<!--[if !mso 9]><!-->
This will not appear in Outlook on Windows.
<!--<![endif]-->

Since you’re probably using HTML tables to structure your emails, and you’re probably using CSS classes to hide and show different duplicate content for desktop and mobile, your code will probably look something like this:

<style>
.showOnMobile {
    display: none;
    overflow:hidden;
}
@media screen and (max-width:684px) {
    .showOnMobile {
        display: block !important;
    }
}
</style>
<!--[if !mso 9]><!-->
<td class="showOnMobile">
This will not appear in Outlook on Windows.
</td>
<!--<![endif]-->

There you have it. Now go and do something useful with your time instead of f*$%-ing around with HTML emails all f*$%-ing day long!

▲