Abdullah Yahya

Debugging Javascript can be tricky. But, thanks to Google Chrome’s Inspector, it’s not so bad. You can edit your Javascript files directly in Chrome’s Inspector and run the code to quickly test and fix problems. Here’s how to do it.

1. Open a page that has Javascript included in a separate file. This example uses the website http://www.yourhtmlsource.com/javascript/basicjavascript.html.

Continue reading Chrome Inspector: Editing and Debugging Javascript

The file size of PDFs can get large when you start adding a bunch of images and have lots of pages. To optimize and reduce the file size as much as possible, open the PDF in Adobe Acrobat Pro, click Save As, and choose “Adobe PDf Files, Optimized (*.pdf)”. This reduced one test PDF from 7.18 MB to 4.22 MB.

If you want to edit or sign a PDF file but can’t due to restrictions placed on it, you can unrestrict the PDF by first uploading the PDF to Google Drive, and then opening the Google Drive PDF in DocHub.

If you want to version some files like a website project you’re working on, Git works really well. No remote server is needed and everything is self-contained by folder.

1. Create a new, empty folder
2. Run git init (a hidden .git subfolder will get created which will store all versioning information this new repository)
3. Create a file, e.g. test.txt, write “line 1” in it and save it.
4. Run git status (you’ll see one untracked / unversioned file)
5. Run git add text.txt or git add . (test.txt or all files within the current directory will get added / staged for committing)
6. Run git status (you’ll see text.txt is ready to be committed)
7. Run git commit -m “Added one line” (text.txt will get committed)
8. Run git status (you’ll see that there’s nothing ready to commit and the working directory is clean)
9. Edit the file and write “line 2” on line 2 and save it
10. Run git status (the file will status will be “modified”)
11. Run git checkout — test.txt (the changes  – line 2 – will be reverted / undone)
12. Edit the file again and write “line 2” on line 2 and save it
13. Run git add . followed by git commit -m “added line 2” (the modified file is added and committed)
14. Run git log (a log of all commits included commit messages and signatures is displayed)

C:\Users\ayahya\Documents\temp>git log
commit 78f7d5cd1f9cbec2cc7a55a3e5cd6dd12b2ea13d
Author: unknown <[email protected]>
Date: Fri Mar 20 16:29:39 2015 -0700

added line 2

commit 2587182fe50b7f1ae01b3153f637fd3abcbe2120
Author: unknown <[email protected]>
Date: Fri Mar 20 16:13:46 2015 -0700

Added one line

• Run git diff 78f7d5cd1f9cbec2cc7a55a3e5cd6dd12b2ea13d 2587182fe50b7f1ae01b3153f637fd3abcbe2120 (and you’ll see a standard diff between the two commits)
• If you want to move your repo to another folder or computer, just copy the whole folder containing the hidden .git subfolder.

For more info, visit the Git documentation or this ebook.

For a visual understanding of Git, check this out.

Learn more about the diff format

When working with Adobe Illustrator, many times you’ll find that the objects that you want to save as a JPG or SVG are on an artboard that is larger than the size of the object. If you save the artwork, the object including the whitespace around it up to the borders of the artboard is saved. This is usually not what you want. If you want to save just the object, you need to resize the artboard to fit the borders of the object.

Below, you’ll see the artboard is bigger than the object (I clicked on View > Outline to show an outline of the object).

Click the artboard tool (Shift-O) and position your mouse cursor over the object and then double-click.

This will crop the artboard to fit the size of the object.

UPDATE: Actually, there’s an easier way. Just select the artwork then choose Object > Artboards > Fit to Artwork Bounds.

I was patching a file with a patch file containing all adds (+). If should have been straightforward but I got the following error.

bash-3.2$ patch –unified –batch –ignore-whitespace -p0 -V never -r /dev/null < /4109.patch
patching file /index.html
patch unexpectedly ends in middle of line
patch: **** malformed patch at line 127:

bash-3.2$

There’s an empty line  after the colon which is suspicious. I opened the patch file and added a line break at the end of the file, reran the patch command and it worked.

If this happens to you, try adding a line break at the end of your patch file. Stupid, as hell, I know, but it worked 🙂

Sometimes you need a list of all files in a folder and in all subfolders. This can easily be done from the command prompt using the following commands:

List all files and folders in a folder

c:/> dir

List all files and folders in a folder and subfolders

c:> dir /s

To list only certain files, use the wildcard (*) symbol

c:> dir /s *.mp3 > listmp3.txt

To send the list of files/folders to a texts file, use the redirection symbol (>)

c:> dir /s > list.txt

When done, you can use Sublime Text to sort the list and return only unique file names, among other things.

Creating a WordPress site is easy but maintaining it is no fun. If you keep your WordPress version and plug-ins up-to-date, you can be vulnerable to attacks which could lead to your hosting company suspending your account. The cheapest managed WordPress service providers that I’ve found are

• WordPress.com ($99 per year) – by the makers of WordPress
• GoDaddy Managed WordPress Hosting ($1.00 a month – on sale, regularly $6.99)

This blog is currently on WordPress.com but I have another on GoDaddy.

If you need an online store, while there are many free, open-source ecommerce applications you can install on a server, you still have to manage the upgrades. To avoid that, you can use WordPress and install free plugins that provide ecommerce functionality. I’ve tried this with what seems to be the most popular one (WooCommerce) and it works really well. The plugins I am using are

• WooCommerce
• Simple Custom CSS

Removing duplicate lines of text should be something all text editors can do. However, you may not realize where to do it in Sublime Text. It’s under the “Permute Lines” menu item where you will see a “Unique” function to uniquify your text (remove duplicate lines).

Edit > Permute Text > Unique

There! I’ve blogged about it. Now hopefully I’ll remember that it’s there.

One thing that’s nice about the Linux program, grep, is that it only shows you lines that match your search condition and removes all non-matching lines. You can accomplish the same thing and more with the Sublime Text editor. In addition to removing non-matching lines, it can remove all non-matching text leaving you with only the matches you want. Just do the following

1. Enter your search condition
2. Click the Find All button
3. Click Selection > Invert Selection
4. Delete the inverted selection
5. Hit Enter to put each match on a separate line (notice the multiple cursors flashing)

UPDATE: Actually, after you click the Find All button, you can just copy all matches (CTRL+C) and paste them into a new file to accomplish the same thing as steps 3, 4, 5.