Info Tech for Non-Profits

Create PowerPoint presentation from photos / videos; auto layout photos / videos in an existing presentation

I’ve been wanting to create an automation for these tasks ever since I first did presentation wrangling for all of the 18 or so presenters at the 2014 Wildlife Expo. The best presentations are the ones where the slides are a simple as possible, and presentation is carried by the storytelling ability of the presenter. For these presentations, most slides are simply a single image or video.

The problem with PowerPoint is that when you drop an image onto a default slide, it is put in the same bounding box with the same margins as bulleted text. Now text absolutely needs some margins to make it more readable. However with an image, the visual margins are already part of the image. The image should be maximized to fill the entire slide (and of course centered and cropped as required). Same goes for videos.

So I created two AppleScript apps. The first one—Create PowerPoint slides from photos or videos —lets you drop a folder containing photos and/or videos onto it (or even just a selection of files directly), and uses those files to create a new presentation from them, one slide per file.†

The second one—Resize and align PowerPoint photos or videos on selected slides—operates on the frontmost open presentation in PowerPoint. It will center, scale, and crop the photo / video on each slide that is selected in the slide pane. You can hold down the Command key or the Shift key to select multiple slides at once. Or Cmd A to select all of the slides.

If you are holding down the Shift key when you run the second script, instead of filling the slide with the entire media (which will crop off the wider dimension), instead it will scale the media down so that if fully fits on the slide, leaving black bars to the sides (or possibly above and below depending on the aspect ratio). It’s hard to describe well, so I suggest you just play around with it both ways so you can see the difference.

Caveats: I didn’t do a ton of testing on these, so it might not work in all scenarios. There aren’t any destructive commands in there (like delete), but even so I recommend you always use these on a copy of your files. Also since it’s in AppleScript, they only works on the Mac. I would love to port them to VisualBasic or JavaScript so it can work cross platform, but I would need access to a Windows box, and I don’t have one just now. If anyone wants to take this on, please do so! I’m happy to help answer questions.

---

* Since I am not registered as a trusted developer with Apple, if I distribute the exported applications you won’t be able to run them without lowering the security permissions on your Mac. So instead, I have provided the AppleScript source code files. You can open them in the Script Editor app yourself, then Export out as an Application.

† For security, Apple has recently added an annoying “Grant Access” dialog box that you need to respond to for each and every image / video file. Here is a good overview of the issue, and also a workaround on where to place your files so you don't have this dialog box coming up all the time.

Expand the storage space of a MacBook Pro (or 13" Air) with a high-capcity micro SD card and short SD adapter

The biggest downside of the most recent line of MacBooks is that they are unable to be upgraded. The memory and storage chips are all soldered directly to the logic board.

However at least with the MacBooks (both Pro and Air) made 2012–2016, there is a workaround. You can use the SD card slot to add more space. If you use a standard SD card, it will stick out from the edge. But you can get a micro SD card and a short SD card adapter, which will sit flush with the case (or at least close enough for practical purposes).

It's my photos, videos and music files that are eating up all my space. So I bought this 200GB micro SD card to use as and expansion to store my media files. (I looked into the 256GB ones, but they were nearly double the price for only 28% more storage.)

There are several different short SD card adapters out there. I tried the one by Adafruit designed for the Raspberry Pi, but unfortunately it doesn't work on the Mac. Or at least it is intermittent so I can't count on it. I ended up going with a BaseQi adapter. It's more expensive, but the review are good and it is designed specifically for this purpose. Be sure to get the right one! There are several different sizes, each designed for a particular year and model of MacBook. There are also some by 8mobility that look reasonable too.

Non-electronic tech gear for the field: design and materials tech

When people talk about tech, they often mean electric devices that need a power source and usually have an on/off switch. However there are at least a couple of different kind of tech that can be just as (or even more) useful: design tech and materials tech. OXO products—especially their measuring cups and can opener—are good examples of design tech. And the items below use innovative materials to better solve problems.

Gorilla Tape - this stuff is far superior to duct tape for field-based repairs. I keep a roll in my car and at home.

 

Blue Monster Compression Seal tape - This stuff is amazing for repairing small plumbing leaks. You can apply it even while the water is still leaking out. (There is a generic version out now for a lot cheaper, although I haven't tried it so I can't vouch for the quality.)

 

Goo Gone - Great for getting stickers, tape residue, and other sticky/gooey residues off pretty much anything.

 

Fix-a-Flat or a tire puncture repair kit - The conservationists we support work in pretty harsh and remote conditions. Getting a puncture in a tire is inevitable, and being able to repair it in the field is invaluable.

 

Add your Facebook events to your Google, Apple, Outlook or other calendar app

I just double-booked myself because and event I had committed to on Facebook wasn’t in my personal Google calendar. So I decided to fix things to prevent it from happening in the future.

I did find articles on the web about how to do this, but since Facebook updates the UX so often, they were of course out of date. Here is the current way (as of Oct 2017):

1. Go to the Facebook Events page (or the Calendar page; it’s there too).
2. Look in the right column. The second module has links for your iCal feeds.
3. Right click on the one you want (in my case, Upcoming Events) and click Copy Link Address
4. For Google Calendar: click the arrow button to the right of Other Calendars
5. Click Add by URL
6. Paste in the URL
7. Click the Add Calendar button
8. Now that the calendar is added, you'll want to rename it.
9. Click the arrow button the right of the Facebook calendar that was just added
10. Click Calendar Settings
11. Change Calendar Name to something like Facebook Events
12. Click the Save button

Donations of appreciated stock (securities) held for over a year are the best way to give to charity; tell your donors

It’s coming up on the end of the year giving season, and you are planning to donate $1000 to your favorite charity. You could just give it via cash / check /credit card like most people do, and they will happily take it. And of course you can then deduct $1000 from your taxable income for the year which will save you $373. But there is a better way if you have appreciated stock.

Rather than me walking through the math here (and risk getting it wrong), I’ll just link to this donation tax calculator that will show you the difference. For a $500 investment that appreciated to $1000, by donating the stock rather than cash, you reduce your taxes by an extra $96 and the charity receives an additional $75.*

One of the charities I donate to and occasionally help with consulting recently sent out an email to donors that simply included a paragraph describing this. They immediately received 2 stock gifts along with several other commitments to donate stock at the end of the year.

Donors already want to help you, and if you give them a way to have it be a win-win for both of you, it will result in more donations. So I recommend making this a regular message in your donor communications.

* For simplicity, I assume that the yearly income is in the 28% federal, 9.3% California state and 15% capital gains tax brackets.

Windows Sysinternals apps are essential tools for managing Windows systems

Since I primarily manage Mac and iOS systems, I haven’t blogged much about Windows. However if you are a Windows admin, then you absolutely need to know about Microsoft’s Sysinternals toolset.

I use Process Explorer as a much more powerful replacement to the standard Windows Task Manager. And Autoruns is a great tool for managing which processes start up with Windows. This is essential when cleaning up all the crap that installers add under the covers to “phone home” or even arguably malware add-ons that get installed with some other driver or utility.

More recently I used SDelete to clean up a system that was being decommissioned. Really hard drive destruction is the best way to ensure data cannot be recovered. But barring that, SDelete is a the next best thing. And best of all, they are all free. Thanks, Mark!

Projector, stand, screen and other gear to use for powerpoint presentations

The folks I support often do presentations in whatever venue they can book for cheap or free. Sometimes it’s just a large living room in a supporters house. So having the right gear is important.

For the projector, I highly recommend one with a “short throw”. That allows you to place the projector just 2 or 3 feet from the screen so it isn’t in the way of the audience or the presenter. I also recommend 1080p resolution, and a reasonably high brightness (at least 2000–3000 lumens) so the image will stand out even with ambient light in the room.

When I researched one for my org, I ended up with an Optoma. I don't remember the exact model, but this Optoma GT1080 looks very similar to it.

I also recommend you get a projector stand to make setting it up super-easy. And definitely get a quality case (like a Pelican)* for storage and transportation.

Finally, if you have the room to transport it, a roll-up screen like this is the best. But if you just need a cheap, portable surface to project onto, get this cloth and some cord and clamps to mount it.

Since this info isn’t readily available, here are all of the small-ish Pelican cases that most projectors will fit in, and their internal dimensions. I recommend at least 1" more that the dimension of the projector to leave enough room for padding.

Case	Interior Dimensions (inches)
Pelican 1120	7.25	✕	4.75	✕	3.06
Pelican 1150	8.18	✕	5.68	✕	3.62
Pelican 1170	10.54	✕	6.04	✕	3.16
Pelican 1200	9.25	✕	7.12	✕	4.12
Pelican 1400	11.81	✕	8.87	✕	5.18

80,000 hours web site and book are great career resources for people who want to make a positive difference

The Centre for Effective Altruism in the UK runs a great website called 80000hours.org. I only just signed up a couple of weeks ago on the recommendation of a respected advisor, and so far it looks really great. Sign up for their weekly email series to get it pushed to your inbox in bite-sized chunks. You can also just read the articles and watch the videos on the site. And if you want the content in book form, they have that too (it's only $4 for the eBook).

YouTube keyboard shortcuts for play/pause, jump back, and jump forward: K · J · L

I always tried to use the space bar to play and pause YouTube videos, but if the focus isn't in the video player itself, it always scrolls the page down. Well no more! I now use the K key to play/pause, and J to jump back 10 seconds. L also jumps forward 10 seconds, but I rarely need that.

Add a "play" animation to embedded movies in PowerPoint so they will work using a presentation remote

Wow, this is huge. For the longest time I thought the only way to get a movie to play in PowerPoint using just a presentation remote was to change the Play setting to Automatically. The default value is On Click, but that never worked; a click would just take you to the next slide. But there is a way to get it to work, and it requires adding an animation to your movie.

Select the embedded movie, then click the Animations tab. If your window is wide enough, you will see options for Play (this is the one we care about), Pause, Stop as well as Fill Color and Grow/Shrink. Otherwise these are buried under a menu button with a yellow star icon called Emphasis Effects.

 

However you get to it, click the Play button and it will add an “animation” to the slide that will play the movie on click. With this set, during your presentation you can now click the remote once to bring up the slide with the movie on it, and then click a second time to start the movie playing.

If you want it to play automatically, you can set Start for this animation to with previous.

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