Chrome Inspector: Editing and Debugging Javascript

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.

js-debug-1

Continue reading Chrome Inspector: Editing and Debugging Javascript

Optimize a PDF for Smaller File Size

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.

pdf-optimized

Edit, Sign, & Remove Restrictions of Any PDF Document

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.

pdf-tax-return
Cannot edit PDF (see red box)
google-drive-upload
Upload restricted PDF to Google Drive
open-dochub
Open in DocHub
dochub-sign
You can sign and do many edits in DocHub such as apply whiteout, redact text, etc.
save-pdf
Save as “unrestricted” PDF from DocHub

Simple Git Workflow

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 <ayahya@100739-T440.corp.qualys.com>
Date: Fri Mar 20 16:29:39 2015 -0700

added line 2

commit 2587182fe50b7f1ae01b3153f637fd3abcbe2120
Author: unknown <ayahya@100739-T440.corp.qualys.com>
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

Adobe Illustrator: Fitting Artboard to Object

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 the artwork, the object including the whitespace around it up to the borders of the artboard are 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).

illustrator-artboard-crop-1

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

illustrator-artboard-crop-2

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

illustrator-artboard-crop-3

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

Fix Patch Error – patch unexpectedly ends in middle of line

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 🙂