Using JavaScript to Temporarily Prevent Clicks and Form Submissions

Posted on Sep 21, 2018

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!

Posted on Sep 20, 2018

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;
}
@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!

Use PHP’s Built-in Web Server for Quick, Local Development

Posted on Aug 22, 2018

I recently need to build a simple PHP script but I didn’t feel like spending a lot of time configuring a web server, e.g. Apache. and having it support PHP. It turns out that PHP has its own built-in server and it’s super easy to use. Here are the steps:

1. Download PHP
   If you’re on Windows, which I was at home, then go to https://windows.php.net/ and download a pre-compiled PHP binary. I chose the latest x64 NTS (non thread safe) zipped version.
2. Unzip the archive
   e.g. to c:/Programs/PHP/
3. Open a terminal window
   We start and stop the server from the command line
4. Go to your project folder
   e.g. cd c:/Documents/Projects/mysite
5. Start the server
   If PHP is on your path, then you can just do
   php -S localhost:8000
   otherwise, you’ll need to specify the full path to PHP, e.g.
   c:/Programs/PHP/php -S localhost:8000
6. View your PHP site
   Go to localhost:8000 in a web browser and see your site, e.g. index.php
7. Stop the server
   Press Ctrl-C to quit

If you want to start the server in a particular document root directory, e.g. c:/Downloads/foo, you can do
php -S localhost:8000 -t c:/Downloads/foo

View the PHP built-in server documentation

cd C:\Users\abdul\Documents\Projects\zabuun.com
C:\Users\abdul\Documents\Projects\zabuun.com>”C:/Program Files/php-7.2.9-nts-Win32-VC15-x64/php” -S localhost:8001

Working with GitHub and Git Using the Command Line

Posted on Aug 9, 2018

Create a repo in GitHub

Use the master branch as your production branch. This is called origin/master.
Use the develop branch for development. This is called origin/develop.

Get GitHub clone URL

In GitHub, get the URL to clone, e.g. https://github.com/javanigus/test.git

Go to local projects folder

On your locale machine, go to a folder where you want this project to exist, e.g. /Users/ayahya/Projects/
cd /Users/ayahya/Projects/

Clone the remote repo on GitHub to your local machine

git clone https://github.com/javanigus/test.git

This will create a folder that is the name of the repo, e.g. “test” Read More

Easily Add Music to Video Using Corel VideoStudio

Posted on Jul 4, 2018

Adding your own music or audio to a video clip is something many people like to do. Fortunately, this is very easy using Corel VideoStudio. Below are steps to add music to a video.

Insert media files, e.g.  a video and an audio file

Read More

IrfanView for Batch Image Processing

Posted on Jun 9, 2018

When you’ve got a bunch of images to process, IrfanView makes the process simple and quick. Here’s an example of how to

• auto trim / remove whitespace
• resize images
• optimize JPGs

Open IrfanView and do the following:

1. File > Batch Conversion / Rename
2. Work As: check “Batch Conversions”
3. Look In: Browse to the folder containing all of the images then click “Add All”
4. Batch Conversion Settings: choose “JPG”, click “Options”, for “Save as quality” choose 65, check “Save as progressive JPG”
5. Batch Conversion Settings: click “Advanced”,
   1. check “Auto crop borders”
   2. check “RESIZE”, check “Set new size”, for “Set new size to” enter “750” pixels, check “Don’t enlarge smaller images”
6. Output Directory: create and choose a different directory, e.g.  a subfolder called “processed”
7. Click “Start Batch”