Comments On Code

Sept 2, 2015

Trying something new

We used Dreamweaver almost exclusively through school. I got comfortable with it, understood the file organization and found some of its helps helpful. But we've gone through a lot of changes in the last year, some personal, some technical. One resulted in swapping computers with my husband and the laptop I now use was affected by the GPU recall Apple issued a few months back. Even after being replaced it still has quirks and doesn't seem to have the power it should have. I've been experiencing a lot of Dreamweaver crashes and every use the first save causes my computer to freeze for forever, or several minutes, whichever is longer. After the initial save it seems to work fine.

That was the driving force that got me searching for something lighter. The personal changes kept me away from coding for many months, and subsequently I decided that Dreamweaver was a little too helpful ( thanks autocomplete ), resulting in lazy coding and a hazy memory of proper structure and known functions. And finally, I've started using Github and wow, additional file bloat!

My new process seems to be working much more smoothly. I landed on TextWrangler as my chosen editor and have learned to replicate the Dreamweaver helps I most appreciated -- brace balancing, multiple line indenting ( shift left using cmd+[ or right using cmd+] ), and enough color coding to hint whether I've mistyped something. And then I rely on two Terminal windows to perform my Github commands and SFTP my files to the server. If I need to upload or download more than a few files at a time, I'll open FileZilla.

It's been several weeks since I felt I *had* to open Dreamweaver and I'm a happy camper. I have more freedom in my file structure, being able to work with my local development server and send that same file to my remote web testing area and Github without having to keep multiple directories in sync so that Dreamweaver stays happy is an added plus. Also, less GUI makes you look smarter, right?

Apr 16, 2014

Building a Browser Extension

I just finished cleaning up a relative's computer...again.  It seems nearly impossible; how can a computer that is barely ever used, and has had almost no software downloaded (almost!) be so corrupted with malware that it ceases to function?  I can solve this.

So many unwanted programs or unwanted newsletter subscriptions ride along with programs that are intentionally downloaded, just because the user neglects to uncheck the boxes before hitting the download button.  I'm convinced most people don't even see them there.  What if there was a browser setting that would remove default checked off boxes?  Sure would be nice.  Unfortunately, no such thing exists.  The Chrome extension store does offer a couple extensions that can uncheck or check all boxes on a given page, but it requires an intentional action on the part of the user, i.e. remembering to click the extension button.

Never having contemplated writing an extension before, I had no idea what the process might entail.  Surprisingly, Chrome extensions are mostly written in code I understand.  Depending on the purpose of the extension, you can supply CSS, HTML and/or Javascript.  While it took a little bit of experimenting to achieve the result I desired -- an unobtrusive script that ran on any form page without user input -- with a little help from a few websites, we were in business.

The Process

The first step was perfecting the script.  My script needed to identify that the page was a form, then go about removing any "checked" attributes that might exist* .  This is about as simple of a little JavaScript piece as they come.  I wrote a form with a few checkboxes and attached my script in the usual way, and tested to be sure I could still select the check box and send without any issues.  Once that was perfected, I removed the script and reset my form for testing when I installed the extension.

On to building the extension.  Chrome offers a very brief introduction to one type of extension.  While it is not exactly what I was interested in building it does introduce the most important, and most unfamiliar to me, piece of the extension puzzle, the manifest.json document.  This is the document that tells Chrome all about what you're building, where to locate the necessary files, and on which websites to run the extension.  Understanding the areas of this document is the key to building the type of extension you want and getting it to work.  Cory Gross has an excellent resource on Github that details aspects of these manifest settings.  Once you've decided what type of extension you are interested in building, you can start creating documents.

As intimidating as that sounds, this is actually the easiest step of all.  Alex Wolkov has written a tool that will build the extension's document structure, including inserting the default fields you need in the manifest.json document.  Each setting also includes a popup window on hovering over the (?) that offers a short explanation of the selection, and links to the Chrome developer page with more detailed instruction.  Upon downloading, open the manifest in a text editor and edit the fields.

In my example, I needed to edit only two documents, the manifest and the inject.js.  The trickiest bit was ensuring that my script would run on all web pages.  This setting falls under the content scripts->matches.  The tool automatically inserts a url to match all google pages, so editing that can be overlooked.  Google lists all the possible forms of match patterns for reference.  My script uses <all_urls>.

The next hurdle was placing the right section of code in the inject.js file.  The file is explicit about where the script should go.  Just strip the function call and drop in the actual script and it is all set.

Finally, create a set of icons to drop into the icon folder.  The icons are png files, so any image editor will do.  Create the largest size and then resize and save each smaller size.


Chrome makes it extremely easy to install an extension in development.  Navigate the settings -> tools -> extensions, just as you would install any extension.  At the top of the page is a checkbox to open the developer menu.  From there you can install an unpacked extension by navigating to your folder in which the extension lives.  On installation, Chrome will alert you to anything in the manifest that isn't formed correctly.  A little debugging and Google searching can help you fix those errors.

At this point, it's time to return to our test website we created when writing the script.  Be sure that you removed the link to the JavaScript file so that you can test the extension only.  It also may be helpful to disable any other extensions within the extension manager that you might be using because Chrome does not identify the extensions by name in the developer panels.  Using the Inspect Element tool (right click, Inspect Element), click the Sources tab and then the Content Scripts tab.  Reload the page if nothing shows up.  If still nothing appears, you need to return to the manifest.json and check that the matches section is properly formed to attach to the page as intended.

You should see a filename with a bunch of random letters.  If you've turned off all the other extensions, then you know this is your extension.  Opening the disclosure arrows will display files that make more sense.  If you are using an inject script as I have been, you will be able to navigate to the inject.js file and display your code (if creating another type of extension, the filename will be different, but you will still access it here).  You can debug this code, if necessary, just as you would debug any other JavaScript code in the browser.

Congratulations, you've built an extension!

Your extension can be installed and used as an unpacked extension with the files living locally on the computer.  It continues to function with the developer window in the extension manager closed, but may alert the user that a "possibly harmful" extension is installed every time the user opens the application.

Coming Soon...How to Publish your Extension.

*The actual script is beyond the scope of this piece, but I will update when the extension is available in the Chrome store for anyone interested.

Apr 11, 2014

How to Craft the Perfect Social Post [Infographic] |

perfect post infographic

How to Craft the Perfect Social Post [Infographic] |

Users of different Social Media have different expectations.  This infographic pulls data about what succeeds and how to tailor your content to each of nine different sites, even drilling down into details like the best and worst times to post to maximize the social value.

Apr 10, 2014

Using Images in Blog Posts

In the short attention span world of the internet, images are a way to grab a readers attention and invite them to read the post.  The oft quoted, "A picture is worth a thousand words," describes how well an image can introduce or sum up meaning.  Images break up text and allow the eye to flow through the post.  But there is also a caution with using images on the internet.  It is all too easy to borrow images that aren't actually free to use.  Especially if you are business blogging, you need to know how to ensure that if you do not already own the images you are using, you are using images that are intended for royalty-free usage.  These days, it is getting easier and easier to find and use Creative Commons licensed images.  Not every image licensed under Creative Commons will be acceptable for commercial use, but it is usually only a second checkbox away to filter for business.  Also, remember to cite proper attribution for the images.

Google Images

Everyone is familiar with Google Image search.  Recently, Google has added another Search Tool to filter for Usage Rights.  The options are listed from most open to most restrictive.googleimages

Creative Commons Search

Creative Commons Search is a portal to search for Creative Commons images from your choice of several locations.  Unfortunately, you can only search one location at a time, but it also provides a convenient filter checkbox for Commercial Use right under the main search bar.


Searching the Flickr library for Creative Commons images is slightly more complicated.  Enter your search terms in the search bar, then you can filter the results according to the options you need.  Click Advanced Search on the far right top corner, just above the results.  At the bottom of this page you will be able to filter for only Creative Commons

Getty Images

The Getty is the source of some of the world's finest images, used in mainstream media magazines, newspapers and television.  The Getty has just announced an Open Content Program to allow their images to be used without restrictions or conditions, but an attribution is expected.  Blogging tools like even have a simple embed process to enable Getty Image use.

And More

Still haven't found the perfect image?  There are many other websites devoted to user submitted images that allow for free usage.  Read the terms of use at each site to become familiar with their process and expectations for use.  A few options:

Apr 09, 2014

So You Want to Start Blogging? lays out the foundational questions to explore before deciding on your new blog's topic:

Start by brainstorming several possible topics you might like to use, then consider the following:

  • Who's the audience for the topic? As the blogger, will you be able to cater to that audience and write or produce content in a way the audience will relate to?
  • Does the topic have long-term appeal? Will it be relevant in six months, a year, two years or five years from now?
  • How large is the target audience for the topic? How will you reach the intended audience to inform them about your blog?
  • Will there be enough to write about the topic in the future? Off the top of your head, can you write down at least 25 things you'd blog about in future entries? Will you be able to come up with new things to blog about and keep your content fresh over the long term?
  • How much competition is there based on your topic? Consider other blogs, websites, magazines, newspapers, newsletters, vlogs, TV shows, radio shows, podcasts, YouTube channels, Facebook pages and other content that's out there and already targeting your audience.
  • What will you do differently to make your content more appealing, engaging, entertaining or interactive?

via How to Choose a Profitable Topic for Your Blog |

Many of these questions are the very same questions that should be explored when considering the launch of a new business.  If you are blogging as a means to expand your business, some of these answers may be clear cut.  You know your market, and you may have a wealth of information about their needs already captured in tools you use to monitor your websites success.  Using this information, you can refine your topics to enhance the success of the website and create a more educated clientele who appreciates your unique expertise.

Your blog's topic will relate in some way to your business.  But will your blog be directed at developing new customers, supporting current customers, or elevating your expertise within the industry?  Customize your blog posts to meet the needs of the audience you have selected.

If you are a relatively new business, you have decided that your industry is growing and not dying, or you wouldn't have jumped into the market, but if you are in an older business, are you staying current with trends?  You can use your blog to influence the longevity of your market by engaging your customers and educating them.

Brainstorming topics can double as search engine optimization research; using tools that help discover keywords, you can better understand what relevant topics people are searching for and provide them with content to meet their needs.

When building your brand, you determined what your Unique Selling Proposition would entail.  Your unique blog voice should be an extension of that perspective that sets you and your business apart from all the other voices in the crowd.

So, launching your blog to benefit your business may be easier than you think.  You've already covered a lot of the groundwork and now can spin that information to provide relevant content to increase your credibility, your customer's confidence in your expertise and improve your website's page ranking.