I work as the one-person “IT Department” for a small but growing wildlife conservation non-profit based in San Francisco. I find myself figuring out a lot of things through my own research, trial and error. This is my attempt to give back to the Non-Profit IT community.

August 17, 2017

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.

August 16, 2017

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.

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, text color, etc.

August 14, 2017

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:

August 10, 2017

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.

August 09, 2017

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:

August 08, 2017

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.

August 07, 2017

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.

August 04, 2017

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.

August 03, 2017

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.

August 02, 2017

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.

August 01, 2017

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.

July 31, 2017

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.

July 28, 2017

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.

July 27, 2017

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.

July 26, 2017

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:

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.

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.

July 25, 2017

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.

July 24, 2017

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.

July 20, 2017

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.

July 19, 2017

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.

July 18, 2017

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.

July 17, 2017

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.

July 16, 2017

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.

July 07, 2017

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.

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:

July 04, 2017

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:

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 “C” fonts that ship with Windows and Microsoft Office (Corbel, Constantia, Cambria, Calibri, Candara), Meiryo, 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.

June 29, 2017

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.

June 27, 2017

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:

June 26, 2017

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.

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.

June 23, 2017

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.

June 22, 2017

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.

Open the Skype app (sign in if necessary)

Click New Conversation in the File menu

Untitled conversation now appears in the left column

A link to the conversation is always available in the header. Click it to copy and share with others

June 20, 2017

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.

June 19, 2017

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.

June 16, 2017

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).

June 15, 2017

We've used South Bay Scenic to put on 4 all-day expos where presenters give talks backed up by slides and videos. They have been a pleasure to work with and I can’t recommend them enough.

Previous events we put on all had some sort of technical glitch, whether with the presentations, the clicker to advance the slides, the mics, or the sound on videos. You name it, we experienced it. These guys have collectively put on hundreds if not thousands of events and it shows. They are prepared for almost any contingency. At the latest event we were having issues with the built in speakers. Danny told me not to worry. If they couldn’t fix it, he had brought speakers and stands that he could put on the stage and bypass the venue’s audio system entirely.

They’ve been able to scale up with our needs too. In the last year we started livestreaming our events, and they took that on without a hitch.

They also do video and audio recording as well as editing. They produce high-quality clips of our presentations that they upload directly to our YouTube channel. Check them out for some real-world examples of their work.

If you need someone to run the tech and A/V for your next event, I highly recommend at least talking to them.

June 12, 2017

Non-profits don’t have the budget for marketing resources, so a site like All The Free Stock is a valuable aggregator. A cool thing they offer: stock images of devices that let you upload you own screen to make it look like someone is using your website/app on a device. Pretty cool.

June 08, 2017

I always hated Caps Lock. It causes me to mistype passwords, and functionally I never use it. ALL CAPS is a holdover from the typewriter days when it was used for emphasis. Modern computers have bold and italic. All caps is simply no longer needed. And—to me—this vestigial key causes far too many problems.

Thankfully macOS has a way to turn the key off. It’s in System Preferences > Keyboard > Keyboard (tab) > Modifier Keys… (button). You can map the button to No Action, or do like me an map it to Control.That is the physical location of the Control key on the UNIX systems I used back in school.

The only downside to this is that you need to do it for every unique keyboard you connect to the computer. I wish I could set a global default.

For my PC, the fix is in many ways simpler; I removed the key altogether so it’s physically impossible to accidentally (or even purposefully!) turn Caps Lock on.

June 07, 2017

Twice now I've had co-workers who had a MacBook trackpad stop responding to clicks. The cursor worked fine, but clicks just weren't registering.

In both cases, it turned out there was a paired pointing device that had something resting on the button. In one case a book had fallen off a stack on their desk and was resting on the mouse. In another, the person had a Magic Trackpad on a keyboard tray, and when she pushed the tray under her desk and walked away with her laptop, it lodged under a protrusion under the desk keeping the button depressed.

So before you take your laptop in for a hardware check, turn off Bluetooth first to unpair all devices and see if that fixes it.

June 06, 2017

We needed a VPN solution, and after doing the research I found that the best deals were lifetime subscriptions available via the TechDirt Deals online store. I checked the responses in TorrentFreak’s 2017 anonymity questionnaire. Based on that, I chose Windscribe. I also previously bought a personal lifetime subscription from VPN Unlimited (KeepSolid), which I've only used sparingly since I also have VPN options from my ISP and my email provider that I have been using. There are several good options there—and I'm sure they change regularly—so do your own research for one that works best for you.

Sign up for the TechDirt Deals mailing list first to get a 10% coupon code before you buy.

May 31, 2017

If you are a non-profit in the San Francisco Bay Area and are looking for a meeting space for up to 40 people, then check out Metta Fund. It’s in the Financial District during business hours (M–F, 8:00–5:30) and has a bunch of amenities like WiFi, a projector, white boards, and a conference phone.

May 30, 2017

I use TextWrangler as my main text editor on the Mac, VLC as my video player, and Pixelmator for image editing. I want my Mac to open files in these apps rather than the built in ones (TextEdit, QuickTime, and Preview respectively). To do this:

May 26, 2017

OK, I’ve had it with consumer-grade wifi routers. I’ve tried top-of-the-line for both NetGear and D-Link, and both I’ve found lacking.

I met with some fellow IT professionals at a forum in San Francisco and they all recommended Meraki. A Cisco professional consultant told me “if you don’t know networking use Meraki.” I think he was trying to say that real IT networking people don’t use Meraki. And maybe that’s true. But I’m definitely not one, nor do I aspire to become one. I am an all-around IT guy, and I wear dozens of different hats. I absolutely want a networking product that is easy to use, even if it is a bit more expensive and maybe doesn’t do all of the high-performance things that Cisco hardware does.

So I click through to the details page, look at the review distribution (too many 1s and 2s is a bad sign), read the reviews (especially looking at the negative ones to see how much I agree with them).

But I also check out the Date First Available. There are a lot of older products on Amazon, and technology like displays advance rapidly. While they might have garnered a highly-rating several years ago, it’s not a good indicator of how good the product is in comparison to newer ones. All other things roughly equal, I go for the newer one.

May 23, 2017

When you are viewing your list of sent emails in Vertical Response, there is an Actions link for every email. Clicking it brings up a menu of actions, including View Email. Now you might think this would be the way to bring up the hosted version of that email so you can share that link with others. But you'd be wrong.

Instead, click on the name of the email to bring up the Dashboard view. In the left column under Email Actions, the last item is Share Email. Click that, and then copy the first link in the dialog (it should be a link to a page on vresp.com). It's a shortened link, but you could also just click it, let it expand into a new tab where you can verify it looks the way you want, and then copy the link from the URL bar.

May 22, 2017

If you have Prime, Amazon is tough to beat for both price and quick delivery. However for some things, B&H Photo and Video is as good or even better.

I was trying to buy two new desktop setups for new employees at my org. I wanted to get 2 of the same displays for consistency, but Amazon was limiting me to just one for the model I wanted. Even more annoying, the "Prime" delivery for this particular monitor was 4–5 days. So I went over to B&H, found the same display for the same price. They offered UPS 3 day delivery, and the total price is cheaper since they don’t collect sales tax.

May 19, 2017

Bad UI here. If you are trying to customize the picklist values for a field on a SalesForce object, you of course go to Setup > Customize > [object] > Fields. However, when you scroll down to the field, there is an on-so-tempting Edit link sitting right there in the Action column. Resist! Click the link just to the right of it in the Field Label column to get to the page where you can add, edit, and delete list items.

May 18, 2017

We use Google Apps Suite here. There was an account set up before I joined that was automatically redirecting messages from the work account over to a personal account. This was done way back in the day before browsers supported multiple profiles.

I was trying to stop the redirect, but there were no filters set up, I had turned off forwarding, and both POP and IMAP were turned off.

Turns out there is a setting for this in the Admin console. Click Users, then a specific user, the Account, and scroll down to the Email Routing section. There was another “destination” set up for her personal account, and the G suite email and inherited routes were both unchecked. I removed the additional destination and checked both of those checkboxes, and now everything is working as expected.

May 17, 2017

I had a Skype video conferencing call today, but the camera built into my MacBook wasn’t working. Opening the Terminal app and pasting in this command (and entering my administrator password) fixed it.