Info Tech for Non-Profits

Search engine shortcuts in Google Chrome

I previously blogged about Google’s site: search operator (which also works in other search engines). You can create shortcuts for commonly-used sites in Chrome using the Search Engines setting. It helps if you have a bit of knowledge about how URL parameters work, but even if you don’t, just follow the instructions.

Open Chrome Preferences/Settings and then click Search Engines. There is a table of entries, each one with 3 properties: name (just a display name for you), keyword (the text you type to invoke the shortcut, usually 1–3 letters), and the URL.

Here's how to create a shortcut that searches this particular blog:

1. Open Preferences > Search Engines (if you aren’t already there)
2. In the Other Search Engines section, click the Add button (on the right)
3. Search engine = IT for Non-Profits
4. keyword = it
5. URL = https://www.google.com/search?q=%s+site%3Ait4np.com
6. Click Add

So the URL is the tricky bit. What I did was go to Google and enter a site search for my blog on a particular keyword, like PowerPoint. This is what then appears in the URL bar:

https://www.google.com/search?q=PowerPoint+site:it4np.com

In the URL, I replace they search term—which in this case was PowerPoint—with the token %s

What Google will do is take the search term and put it in the URL wherever the %s appears:

https://www.google.com/search?q=%s+site:it4np.com

To test it out, click in the URL bar, type it and a space. Notice the URL bar now says SearchIT for Non-Profits?  Now type a search term —let's use CSS this time—and press return. Google will now take you to:

https://www.google.com/search?q=CSS+site:it4np.com

You can also do it to get directly to the search results of a particular site, bypassing Google altogether. I have a YouTube search engine shortcut set up, and this is the URL:

https://www.youtube.com/results?search_query=%s

This is such a time saver for me, and one of the many reasons I so prefer using a laptop to a tablet or mobile phone. I have so many keyboard shortcuts set up that working without them takes me at least twice as long to accomplish any of them.

Links don’t work after saving Microsoft Word doc as PDF on a Mac; use an online converter

It’s surprising that this still isn’t fixed. But yes—when you save a Word doc to PDF or try to print to PDF—it completely removes all of the hyperlinks. It’s insidious because it leaves the blue underlined text styling in place. But that’s all it is: styled text. 

This does work on Windows, so if you have access to a Windows machine that has Microsoft Office, you can use that. Otherwise, use one of the many, many converters online such as Convertio. Also once you have your PDF, don't forget to run it through a compressor / optimizer. My test document was originally 19kb in Word, converted to a 203kb PDF, and then compressed down to 52kb.

Automatically reboot your modem and router daily to help prevent tech issues

This is actually a simple yet brilliant idea. Since the first line of defense of any tech problem with the network is the reboot the modem and router, why not do it preemptively to prevent the problems from happening in the first place?

This outlet timer is designed specifically for that. There are two outlets that switch off and back on daily at a time and interval you decide. I tried doing this with a cheaper analog timer designed for lamps, and I switched to this one because:

1. It is digital, so it is silent
2. It can be programmed to only switch off for a short period (the lamp timer's shortest interval is 30 minutes)
3. It has 2 outlets to handle both the modem and router simultaneously

Buy a digital outlet timer from Amazon

PrivNote for securely sending passwords, access codes, and other sensitive data; plus other options

It’s a common scenario: you need to send some sensitive information to a colleague or friend, and you know that email is not the way to do it. Instant messaging isn’t any more secure. You could use chat: Skype, WhatsApp, or best of all Signal. But that requires that you already be connected.

Google Drive, Dropbox, or other document sharing services are options as well, but once again it requires that you both have accounts linked to your email addresses, so someone might have to create one.

A simple solution is PrivNote. You can create a note that can only be accessed once, so you know that once the recipient views the text, no one else can get it. And if they cannot view it, you know someone else has and can take appropriate action.

PrivNote

Google Alerts is a great utility for keeping up with news about a particular topic

Google Alerts is my go-to utility for keeping up on the latest news about a particular topic. It allows you to search not only news sources but also the whole web in general. It's great for obscure topics that don’t get mainstream coverage. And you can use search operators to create even more targeted results. I use the minus operator and the OR operator most often in mine.

Google Alerts

Cmd Tilde, Cmd Grave Accent for switching among windows in an app on Mac; like Cmd Tab

Most people know about Cmd Tab keyboard shortcut on the Mac (Alt Tab on Windows) which lets you switch among open apps without touching the mouse. Back in my early days as a UX designer, I extended this concept to the key right above Tab—the tilde (technically grave accent, but tilde is easier to say)—to switch between windows in Microsoft Internet Mail and News and Internet Explorer, and eventually to Entourage and the rest of the Mac Office apps.

Someone at Apple liked the idea and baked it into macOS. So now in any app on the Mac, you can use Cmd Tilde and Cmd Shift Tilde to switch among open windows.

Royalty-free stock photo options: Flickr Creative Commons, Unsplash, All the Free Stock

I previously posted about All the Free Stock for stock photos.

Unsplash is another option.

And of course there is Flickr’s Creative Commons search.

While we are exploring the space, here are a few others I found using the most excellent Google related search:

Pexels · Pixbay · StockSnap.io · DesignerPics 

Running both ordered and random slide shows on a Mac

For our events, we have slide show presentations. But we also want content on the screen during the breaks before, after and between talks. There are 3 viable options:

1. Show a static image, such as a logo, event graphic or just a boring black screen
2. Show an ordered slide show
3. Show an random slide show

(It hopefully goes without saying, but showing a computer desktop is not at all professional, especially if you can see the powerpoint UI.)

Show a static image

This one is pretty straightforward. Just make sure to plug into the projector ahead of time, ensure the Mac uses it as a second display (not mirroring), and set the desktop background to the image you want to use. Make sure the resolution of the image is the same as the projector for optimal display (e.g. 1920✕1080 for standard HD). There are also some settings you'll want to change to get rid of the menu bar. See these instructions for more details.

Show an ordered slide show

Create a slide deck in PowerPoint, and then follow these instructions for creating a self-running presentation.

Show an random slide show

PowerPoint can't easily do random order slide shows. But thankfully there is an easier way.

Once you have you slide show in PowerPoint, click File > Export… then choose JPEG or PNG as the file type. This will net you a folder full of images, one for each slide.

(Pro Tip: Drop that folder onto an image optimizing program to reduce the size of each image.)

Now go to the screen saver preferences and use this folder as the source. More detailed instructions are in my post on Prepping a MacBook for Presenting.

Wrap phone numbers in a span with CSS style nowrap to prevent them from breaking across lines

This can be done for any line of text, but I find it most useful for phone number (or other words and numbers containing hyphens).

<span style="white-space:nowrap;">123-456-7890</span>

Here is an example where the phone number wraps to the next line: 123-456-7890

And here is an example where the span keeps the number as a unit: 123-456-7890

 

Simple JavaScript for an embedded IFRAME to redirect the parent to a new page

I was working on a campaign page that has an embedded donate form in it. When I first set up the thank you page, it loaded within the form. This created essentially a page within a page, and it didn't look very professional.

However I found that by simply replacing that thank you page with this simple script, (and creating a separate static thank you page to point to) it would do what I wanted.

<script>
   parent.location.href="https://wildnet.org/welcome/thank-you"
</script>

Monitor you web site with a down notifier tool

A partner of ours just had a web site outage and didn't notice until I reported it to them. This was a particularly insidious one as the site was showing a page (so it was technically "up"), but the page was completely blank.

These sorts of things have happened to us as well. The site is down or in maintenance mode and we don't discover until a staff member or donor notices.

That's why I just signed up for Down Notifier. One thing I liked about them is they let you look for missing content, so it will detect cases such as the domain in maintenance mode, or pointing to a parked domain page. I'm not sure how well it works, so you may wish to explore some other options.

Make your web site more legitimate by getting a security certificate, free from Let's Encrypt

There are a few things I am particularly proud of doing. One is moving to an Extended Validation certificate that encrypts our entire web site. When I did this 2½ years ago, pretty much none of the big wildlife conservation orgs had certificates on their main website content. (Of course they all did on their Donate page.) Even today, there are way more sites than I would expect that still are running unencrypted. In fact we are the only one of the Charity Navigator Perfect 100 animal charities to be fully encrypted.

The Extended Validation is a nice touch; it guarantees we are the non-profit organization that we say we are. It costs a couple hundred dollars per year, so probably not in the budget for a lot of smaller orgs. But that's not as important as simply having a basic security certificate. These days there is no reason not to have one. Let’s Encrypt will issue one to you for free.

Get a free web security certificate from Let’s Encrypt

Meraki network router for VoIP and video conferencing QoS via traffic shaping

As our org has grown, the demands on our internet usage have also grown. We started out using consumer-grade routers, moved up to high-end gaming routers with QoS, and finally we got big enough that we had to move to real enterprise-level networking.

I did the research and decided to go with Meraki based on other recommendations, ease of use, a single cloud-based console for managing all networking gear, and maybe most importantly: traffic shaping.

Traffic shaping on our MX65 router allows me to give VoIP data the highest priority, video conferencing data high priority, leave most other traffic at normal levels, and lower the priority of file sharing and downloads.

We've had the system for a couple of months now and it has been a huge improvement over the previous. For small offices, you might be able to get away with just a Z1.

If you attend one of their many marketing webinars, they will send you a free wireless access point with a 3 year license.

The biggest downside to Meraki is you are forced to go through a reseller in order to buy them. You can't buy directly from places like Amazon or even direct from Meraki. And I found a lot of resellers don't want to deal with small orgs. CDW has a division for non-profits and I have been working with Reed Carroll there (reedcar at CDW). Prices are negotiable—especially when you buy in volume—so don't pay full retail.

Use middle dots to separate a list of items; JQuery javascript on load and resize updates CSS to hide dots at the end of lines

I was trying to solve this problem with just CSS, but I'm pretty convinced it isn't possible. That's too bad, since it means I cannot use it in email messages. But it will work in web pages.

The solution is based on Jon’s great answer on this StackOverflow question. I added Randall’s mod to hide the dots rather than removing them to prevent re-layout bugs. And I added a similar string at the beginning of each line to make sure the lines were visually centered (this part can be removed—or at least the content can be set to null—if you want to left align). And finally, I switched to checking the left offset rather than the top offset to deal with it not working in Firefox.

Test it out: a middle-dot-separated list of links

 

Create your own mobile responsive HTML email using the Zurb Foundation templates

I recently had to create new thank you and receipt emails for our donation system. Creating an email from scratch is not recommended as there are so many different email clients out there. Most notably there is Outlook that has extreme limitations on what works and what doesn't. Couple that with the need to look good on mobile (aka responsive design), and you'll see why it's best to leverage a solid template that takes all of these things into account.

I ended up going with Zurb's Foundation templates. There is a lot of CSS and nested tables in them. But once you get over all the crazy amounts of structural HTML required, it's pretty easy to just pop your content into rows and cells and have it turn out well.

Even though these templates should take care of everything, I highly recommend testing using Email on Acid or a similar service. It is so easy to have  typo in your HTML completely break things.

Speaking of that, it's always a good idea to run your code through the W3C HTML validator service. You will get a few errors simply because the templates are using some seriously old-school markup. But it has helped me catch and fix some dumb errors (like using a parenthesis rather than a curly bracket in my CSS or forgetting an close tag).

Foundation responsive email templates

TextWrangler (now BBEdit) is my favorite free text, CSS, HTML, and Script editor on the Mac

You absolutely need a good plain text editor to do any sort of basic text file manipulations. I love TextWrangler. Unfortunately the app has been discontinued. But they do have a pro-level text editor app called BBEdit. You can use it in unlicensed form, and it will probably do everything you need. I'm personally going to stick with TextWrangler for now since I already know it's interface and features pretty well.

It does code syntax highlighting, has powerful search and replace (with a grep option), and probably my favorite feature: compare text files.

Our current payment platform system has a lot of custom CSS for the donate pages and inlined HTML for the email messages. Any change—no matter how small—needs to be tested and debugged so it works in all the various browsers or email apps. Since there is no source control, we create a cloned sandbox environment for development and testing. When it's verified good and ready to check in, I use TextWrangler to compare my proposed change with what is currently on the site. This ensures I only check in the complete changes essential for the fix and nothing else.

Download BBEdit free version (was TextWrangler)

Test your web site in Microsoft IE and Edge browsers; and also test DNS issues too!

I previously blogged about running a Windows VM on your Mac to do IE and Edge browser testing. But if you want something even more lightweight, Microsoft has a page where you can enter a link to your site and it will come back with screen grabs of the site rendered in various browsers on various versions of Windows.

But it's also useful for testing DNS issues. Let's say you made a change to DNS and want to see if it's working not only for your computer but other random computers out there. Plug it into this page and you will see if it comes up or if you get an error.

Microsoft IE and Edge web page testing screenshot service

HTML/CSS: use RGBA color values to set opacity on a background color; transparent for invisible

I was trying to set opacity on the background of an HTML container (DIV) element. But if I used opacity:.5 style, it also sets the opacity of children elements inside. And this cannot be overridden by setting opacity:1 on those children elements.

The workaround is to set the opacity as a part of the background color itself using RGBA values (red, green, blue, alpha). For example:

DIV.translucent {background-color:rgba(245,222,179,.75);}

 Yes, it's annoying you can’t apply an alpha channel to a hex color value. But you can use a color picker utility to convert hex to RGB, then add the alpha you want. (Note: the RGB values are in the range 0–255; the alpha value is in the range 0–1 where 0 is completely transparent and 1 is completely opaque.)

Finally, if you don’t want a background at all, you can set it to transparent:

DIV.see-thru {background-color:transparent;}

The special color value transparent works anywhere you might specify a color: borders, background, foreground/text…

Break your images in your HTML email and tweak the ALT text

HTML email messages are fragile things. One possibility you have to be prepared for is how it looks if the images do not load. Maybe the image host is down, maybe the device is offline, or maybe the viewer’s email client is blocking images for security or bandwidth issues.

My first recommendation is to encode the image directly into the message. IMG tags can accept a text-encoded data stream as their SRC parameter, and that will essentially guarantee the image will show. However it does increase the size of the message, so I only recommend it for small images, icons and logos. But I especially recommend it for logos. From a branding perspective, it makes sense to ensure your logo is always showing.

Barring that, you need to be sure the ALT text and styles on your image will look good even if the image doesn't load. For my organization, our logo initials are set in an uppercase serif font (Trajan Pro to be specific), so I set the ALT text to mirror that as best as I can. And for the banner/hero image, I use our tag line as the ALT text. It reads better than a description of the image.

We also include images of signatures in our emails. This can be simulated using ALT text of the person’s name in a blue, cursive font. Here is the font stack I am using:

font-family: 'segoe script','bradley hand',cursive;

And it looks something like this:

There’s one more clever thing you can do: use an emoji character as the ALT text. We use a portrait of our Executive Director in our email. A reasonable ALT emoji character for that: Unicode Hex  &#x1f464; for Bust in Silhouette:

👤

Configure DNS (A, CNAME, MX) for a domain to use CloudFront for web and Google G Suite for email

I had to set up DNS for a micro-site that my org just launched this week. I was surprised that there wasn't good documentation out there on how to do this.

First, I set up the MX records to get the email working with G Suite/Gmail. It was working fine until I set up CNAME records for @, www, and a development sub-domain. Mail stopped working, and the G Suite Toolbox told me: Naked domain must be an A record (not CNAME).

But with CloudFront, the whole point is that there is no one IP address that can fail and take down the site. So what IP address to use?

The key turned out to be setting up a URL redirect for the naked domain. I use NameCheap, so they have a built-in feature for this that is super easy to use. Under the covers, this creates an A record pointing to their redirect server. And this is all the Google needed to ensure mail delivery.

So I deleted the CNAME for @, but left www and dev. 

Another key learning: wildcard redirect does not include naked redirect. I had to set these both up separately for the naked redirect to work.

And while you are in there already, you might as well add an SPF record. And if your email sending service supports it (like MailChimp) a DKIM record as well.

 

Replace text of an HTML element using CSS pseudo-classes ::before and ::after

I was working on a donate form recently. The code that created and managed the cart was a library that couldn’t be easily changed. But I needed to customize some of the labels. So I used CSS pseudo classes.

There are two ways I ended up doing it. The first is the cleanest, but only works if the text you want to replace is in a wrapper than can be hidden:

<style>
.hide {display:none;}
#relpacement::after {display:block; content:"This is the NEW text"}
</style>

<div id="replacement"><span class="hide">This is the old text</span></div>

 But if you don't have the luxury of wrapping the item, you need to get a bit more creative. Other sites out there talk about using visibility, but I find it doesn't work in IE. So I ended up doing this:

<style>
#replacement {font-size:0; padding:0; background:none; }
#replacement::after {font-size:14px; content:"This is the NEW text"}
</style>

<div id="replacement">This is the old text</div>

Convert AVI, MOV and other movie formats to MP4 with Handbrake

Handbrake is the best free utility out there for converting movies from one format to another. This is essential if you are switching platforms such as importing AVI files into iMovie for editing on a Mac. Besides, getting MOV and AVI files as MP4 just makes sense. They are more universally playable, and they are smaller for the same quality.

Get Handbrake—free video converter

Show and hide content in a web page DIV using only CSS, no JavaScript coding required!

This is apparently a well known CSS trick, but I just implemented it and I really like the elegance of it all. Well, despite it essentially being a hack. 😊 Besides not needing code (which means it still works when scripting is disabled), it also doesn't involve dummy anchor links, so it won't clutter your URL bar with a # when users click it.

You essentially create a checkbox which is hidden, an associated label, and then a DIV right after it. The CSS hides the checkbox, but uses the checked/not checked state of the checkbox to show or hide the DIV below it.

<style>
  input.toggle {display:none}
  input.toggle ~ label {cursor:pointer;}
  input.toggle ~ label:hover {text-decoration:underline;}
  input.toggle:checked ~ label ~ div {display:block;}
  input.toggle:not(:checked) ~ label ~ div {display:none;}
</style>

<input class="toggle" type="checkbox" id="toggle1">
<label for="toggle1">This is some text the user can click</label>
<div><p>And this is some text that will show or hide based on that click</p></div>

Unfortunately I can't embed style tags in my blog, but here is a working example on JSFiddle.

Check DNS records (A, MX, CNAME, TXT, SPF, DKIM, Google Analytics) with G Suite Toolbox

I recently needed to configure the DNS records for a new micro-site domain we are launching soon. It can be a hit and miss process trying to get everything configured just right since every registrar is slightly different, and there are delays propagating the changes throughout the internet.

I’ve previously done searches to find online tools to help check this. But yesterday I talked to Google support, and they have their own tool for this. I’m most interested in their MX check and Dig DNS tools, but there are others on there as well. Looks pretty slick. I’m adding it to my repertoire. I recommend you do as well.

Google G Suite Toolbox (DNS record checks)

Inline the CSS styling for your HTML emails with Campaign Monitor’s tool

If you do any custom HTML email templates, then you absolutely need a solid CSS inlining tool. I tried a few and settled on Inliner.cm. I just saw a video from the design and development shop Zurb—who released the email template system Foundations—and they recommend it as well. Zurb does have their own tool, but it’s suprisingly not as easy to use as CM’s.

CSS Inliner from Campaign Monitor

Repeat (Cmd Y on Mac; Ctrl Y on Windows) is a great command for doing the same action multiple times

The second line in the Edit menu of Microsoft Office apps is Repeat. It does the same thing you just did, but to whatever the new selection is. So say you want to highlight cells in Excel with a background color. Do it for one with the mouse. Then just use the mouse to click a cell, Cmd Y to highlight, repeat. Super efficient.

Editing text on the boundary of a style change: bold, italic, hyperlink etc

Sometimes you want to add some text to the beginning of styled text—such as a web link—but when you try to do it, the text picks of the style from the text before your cursor. I work around this by putting the cursor between the first and second characters, typing what I want plus the first letter again, then going back and deleting the original first letter from the beginning of the text.

This also works for the end of text. Just put the cursor between the penultimate and last characters.

Test your HTML emails in different apps including mobile and Outlook: 30% coupon code for Email on Acid

If you aren’t testing your emails before you send them out, you risk poor formatting for some of your readers. This is especially true when you are talking about Outlook and some of the mobile apps. I’ve previously blogged about Outlook’s image constraints. It’s easy to forget such things if you don’t use those apps yourself.

Email on Acid is a decent service. I’d give them 3½ stars. I really wish they had more mobile coverage. And it’s not as fast or easy to use as I’d prefer. But it gets the job done. And if you sign up using the promo code 30PROMOEB, you’ll get 30% off. That’s over $100 savings. Not a bad return for a basic web search.

Email on Acid mail formating test service

Select from here to the end of a line of text by dragging the cursor down

OK, I’m on a text selection kick here. Sometimes you have a long line of text and need to delete the end of it. A common scenario is with a web URL. You want to delete the end of it to get just the home page, or get rid of a bunch of URL parameters.

Rather than dragging the selection over to the right and often having to wait for the text to scroll to the end, just click and drag the cursor down just below the line of text. That will jump the selection immediately to the end of the string.

And if you want to select to the beginning of a line, simply click and drag up.

Click in the left margin of Word to select the entire line; discontiguous selection

If you ever need to select a line or section of lines in Microsoft Word, move the cursor into the left margin. The cursor will flip from pointing to the upper-left to pointing to the upper-right. It’s subtle and easy to miss. Now when you click, a whole line of text is selected. And if you drag up or down, you can select a block of text.

And while we’re on the topic of text selection, you know about contiguous selection, but did you know that you can select discontiguous regions of text? Just hold down the Command key while selecting and the region you select will be added to the existing selection. You can even use it with the line selection trick above to select various lines of text in your document.

OK, and one more selection trick. If you use styles (and you should for reasonably long documents), you can right-click on the style in the ribbon and choose Select All Instances which makes it easy to update a style.

Mac printer errors or other problems? be sure to use the actual driver, not Apple's generic “AirPrint”

I just debugged a mysterious printer issue where a colleague was trying to print onto a ½ sheet (5✕8½") and the printer (a Brother color laser) was simply passing the page through untouched and throwing an error.

The problem was she had added the printer and used the default print driver, which is Apple’s AirPrint. This works fine for basic printing, but not for anything fancy like custom page sizes.

I downloaded the driver off of the Brother web site, installed it, and only then brought up the Add Printer window. There are two pitfalls to avoid:

1. When you click the + button at the bottom of the printer list, avoid the temptation to simply select the printer in the menu. That will use the default AirPrint driver. Choose the Add Printer… item at the top of the menu.
2. When you click the printer in the Add window (shown below), you need to wait while the system is gathering printer information (a progress spinner will appear). Once it finishes, click the Use menu and choose the option for the real driver.

Double-click a word to select it. Triple-click a word to select the paragraph it’s in.

Sometimes you need to quickly select a single word. For example, when a web site emails you a security code that you need to enter before you can sign in. Or if you want to format (bold or italics or add a link) to a word in an email or document. A quick way to select it is to double-click anywhere in the work.

You can also triple-click to select the entire paragraph.

Undo closing a tab in your web browser (Google Chrome, Firefox) with Cmd Shift T

I’m sure you’ve closed a tab in your web browser and then instantly regretted it. Thankfully there is a way to undo that. On the Mac in Chrome, the File menu contains an item for Reopen Closed Tab the shortcut is Cmd Shift T. This shortcut works in Firefox too, although I don’t see a menu item for it. On Windows, Ctrl Shift T will do the same thing.

Drag and drop a file onto the "Choose File" button in a web page to avoid the dialog box

Have you ever needed to select a file to upload on a web page and you don't want to deal with the hassle of navigating through all of your folders? Well I have a workaround for you.

You can simply drag the file you want and drop it onto the Choose File button and avoid the dialog box altogether. At least on macOS. I would presume it works in Windows too but I haven't checked.

Hold down option (alt) key when selecting text to select columns or a rectangular region in Microsoft Word and TextEdit

Here's a handy tip for cleaning up data that is in columns in Word or TextEdit. If you hold down the option key, you can select columns of text—or any rectangular region. I do recommend you make sure the text is in a monospaced font (I prefer Consolas, but Andale, Monaco, or Courier also work) to ensure columns line up.

Microsoft Excel or Google Sheets: freeze row or column to keep headers on the screen when scrolling

If you have data in a table in Excel or Google Sheets that require scrolling, you should absolutely use the Freeze feature. It pins the first row or column to the screen so that it won't scroll off the page as you scroll through data.

Online SaaS resource scheduling tools for meeting rooms, equipment, vehicles etc

A partner of ours recently purchased a bus for transporting kids to and from their education camps. They won't be using it all the time, though, so they wanted a system whereby other nearby orgs could book it and use it for their own purposes.

I did some research and so did our partner. They said they'd probably end up going TeamUp. Here was the list of contenders I had compiled, mostly from AlternativeTo and Google Related searches.

• TeamUp
• Simply Book Me
• Reservio
• SetMore
• Xandaro

Caveat: I have no first or even second-hand knowledge of how well these systems work. So if you do—or have another suggestion—please let me know in the comments.

Maximize a window on a Mac WITHOUT going into full screen mode

I rarely want to go into full screen mode on my Mac; Pretty much the only scenario is when I am watching a video or in a video conference. So it drives me crazy that the default click on the green maximize button now goes into full screen mode. Thankfully there is a workaround.

If you hold the option key down when clicking the maximize button, the window height will maximize. If you hold down shift and option, it will maximize the height and width. In both cases, the menu bar and dock remain on the screen.

How to identify fake small caps; it's all about the relative weight of the strokes of the characters

So I get it: most people do not see the difference between fake small caps and real, designed ones. Otherwise they wouldn’t be so prevalent. So I thought I’d show everyone what the big deal is with an exaggerated example—fake, real, and fake exaggerated:

The issue is with the relative width of the stroke between the big and small caps. In true small caps, the stroke width is the same. In fake ones, the letters are simply scaled down in both width and height so the stroke is proportionally smaller. This makes the big caps look bolder than the small ones.

The thing I don't understand is that the computer already knows how to adjust the weight of most fonts. Computers can do fake bold (which is what your are seeing in the third line above). And for most fonts, there are already at least a normal and bold weight. These could easily be used to interpolate different weights. It seems to me that it wouldn't be too difficult to do fake caps with a proper stroke width.

Google Fi looks to be the most promising mobile phone plan out there

I'm really getting fed up with AT&T. They've hiked my personal plan rate twice in the last year, all while delivering the same mediocre experience. But what's even worse is their business account care, which is only open during extended US business hours (it should be 24/7), and even worse there are things that I cannot do for myself on the web site, like add or modify the international plan. This is a big deal, because our org works all over the world. And when international plans aren't working, support in the US tends to be closed.

I did a bit of research and it turns out that Google now has a mobile plan called Google Fi. $20/month for free calls and texts in the US. $10/GB prorated. No additional fees for international data or texts (but international calls do incur charges). Overall it looks simple and reasonable. The big downside is it only works with Google’s own Android phones, the latest Pixel and Nexus ones. My org has standardized on Macs and iPhones.

Google Fi mobile phone plan

Need a logo, branding, or other graphic design work? Check out crowdsource sites CrowdSpring, 99Designs, DesignCrowd

Disclaimer: I haven’t used these resources directly, but I have heard positive things second- and third-hand from colleagues and online reviews.

If you need some contract graphic design help—specifically around logo design or branding—then check out the crowdsource sites CrowdSpring, 99Designs, and DesignCrowd. CrowdSpring was the first that I’d ever heard of, and probably the one I would initially check out. However this guy thinks 99Designs is the way to go.

The basic idea is that you post a project with scope, requirements, and budget. Then designers from the site will pitch ideas to you. You can iterate a bit with them, then choose the one you like and get that one polished up and delivered to you as high-resolution assets. Here’s a logo example from one of the sites:

Typography tip: use proper small caps (SC) in your page layout text, not the crappy fake ones in Microsoft Word or Adobe InDesign

OK, I admit this is a huge pet peeve of mine, but there are far too many organizations out there using fake small caps in their documents. I just ran across this example while staying at an upscale Disney resort hotel:

Scribner—a book publisher—regularly uses fake small caps in their title pages. The United Nations also has it in the tag line of their 2016 annual report. My mom’s former employer, Wayne State University. And even The President of the United States. These are big orgs; They should be able to afford a properly trained graphic designer.

These days there’s no reason why you can’t use proper small caps in your work. You can download free fonts that were designed for small caps. There are also several fonts that are probably already on your computer—including the Microsoft ClearType fonts that ship with Windows and Microsoft Office (Corbel, Constantia, Cambria, Calibri, Candara, Meiryo), the fantastic and free Source Sans Pro, Avenir Next (built into macOS and iOS), Proxima Nova, Palatino Linotype, Georgia Pro, Verdana Pro, and my favorite, Hightower Text:

Can you see the difference? The stroke width of both the large and small letters is the same. In the top example, the larger letters look bold compared to the smaller ones, because they have been simply scaled up in both width and height. You can also see that the kerning is off; this is especially noticeable between the H and O in House. (More details here.)

If you are working on a Mac in Pages, you can bring up the Fonts panel with Cmd T, click on the gear icon and choose Typography… Fonts that support it will have a section in the Typography panel called Lower Case or Small Caps.

Manage email for an entire domain with a single Google G Suite account for $72/year or less

Our organization is setting up specific projects with their own domains, and we need to receive and respond to email on a primary address (info@) but also a few secondary addresses. The obvious thing to do would be to set up a separate account for each email address. But between groups, aliases, and enabling “catch all”, you can get away with a single account.

First, you need a domain. I personally use NameCheap for registration (don't forget to apply their latest coupon code!) so I can manage everything in one place. But you can get it through Google too if you want an all-in-one solution.

Next, create a G Suite account. You will need to choose a primary email address. I chose info@ but admin@ is another good choice.

Now you could go into the Users section of the Admin console and set up aliases. But I think it's better to just turn on the “catch all” for your domain. That way no matter what address someone sends to, you will get it.

So now you can receive email sent to any address. You may wish to set up filters to label messages sent to a particular address.

You could be done. However if you want to also send as these different addresses, you will need to set up aliases. I always uncheck “treat as an alias”.

FYI if you search online, you can pretty easily find a 20% off coupon code for the first year of G Suite, so that'll save you $12 for a few minutes of work.

Critical requirement for sizing images in HTML email; Outlook ignores IMG CSS height and width

So Outlook messed me up again. We just created an email that went out to donors with a large image with text as the centerpiece. I set the IMG to use the standard responsive CSS, so that it will look great no matter what the device size.

<img style="width: 100%; height: auto;" />

What I forgot is that Outlook ignores that CSS, and absent any old school height and width attributes, it uses the native size at 72 dpi. And we want to use at least a 144 dpi because of higher resolution screens. So here's what I should have used:

<img style="width: 100%; height: auto;" height="875" width="620" />

It all really boils down to: I hate Outlook.

Embed images directly in HTML email (or pages) by encoding them into a base64 data string

There are a lot of reasons you might want to embed images directly into your HTML email. They will be quicker to load, they will look good even if the reader if offline, and they will never break if the image online moves or becomes unaccessible.

Of course there is a downside. Encoded images take up more space. So I only recommend them for icons, logos, and other small images.

Base64 Image is my online tool of choice. I recommend turning on the image optimization option (unless you are already using a local tool as I previous recommended). I like how they offer strings pre-formatted for both the src attribute of IMG elements and background-image CSS.

For example, here is a Facebook icon: And the data string for it used in IMG src attribute.

Sorry it's an image. My blogging editor is apparently too smart about escaping what it considers might be malicious code, so it won't let me insert this code into the body of the message. 😕  If you right-click on the Facebook icon above and choose Inspect Element, you can copy the actual data from the page source.

Base64 image encoder

Creating social share links for Facebook, Twitter, email, and others

OK, probably these things don't get a lot of use, but still we sometimes like to add “share this" links to emails or news articles. Turns out there are online tools for this. The one from MWD Agency (formerly DonorDigital) is the one I ended up using.

For example, here’s a link for sharing this blog on Facebook.

Social Share Link Generator

Copy and share a link to a Skype call on Mac by creating a new conversation

We find Skype works best for all of our video conferencing. Previously we would have to dial people in manually at the time of the meeting. But recently Skype added the ability to share links to conversations which has made logistics a lot easier. I'm sure it works for PC too, but we use Mac here so the instructions are Mac-based.

1. Open the Skype app (sign in if necessary)
2. Click New Conversation in the File menu
3. Untitled conversation now appears in the left column
4. A link to the conversation is always available in the header. Click it to copy and share with others
5. You can also adjust settings for the conversation, such as naming it

Add a 1px border around images to avoid clipping when scaling in web browsers

Image scaling in web browsers (or at least Google Chrome) still has a bug where the bottom edge can appear clipped if important pixels are right up against the edge of the image. Even worse: if you use image sprites for your site, pixels from one portion of the sprite can bleed over into another when scaled.

Thankfully, this is really only an issue for logos, icons, and other illustrations. Photos don't generally have such sharp details right at the edge where it noticeably affects things.

The easiest fix for this is to add a 1px border around all of the logos and icons on your site. It's a pain in the ass, but it's the easiest way to deal with this.

Removing links from pasted table data in Microsoft Excel

I often want to pull tabular data off a web page or out of a document into Excel to do some math manipulations on it. You might think that Paste Special > Text (aka Paste and Match Formatting) might be how to do it. But unfortunately that removes all of the table data too, leaving you with all of the data collapsed into one long column.

So what you do is Paste, and then immediately Insert Hyperlink… (Cmd K). I know it’s counter-intuitive to insert, but in that dialog box, there is a button for Remove Link. Click it, and that cleanly removes all of the links in the pasted data.

Internet Archive’s Wayback Machine: view previous versions of web sites and home pages

Have you ever wanted to see a previous version of a web site? Maybe of your own site? Well there’s a tool for that, and it’s called the Wayback Machine. It’s from the great folks at the Internet Archive (whom I’ve personally donated to).

Internet Archive’s Wayback Machine