I'm a technologist, mobile specialist, experienced software developer, author, and public speaker. My thoughts, ideas, rants, comments & most of the code you'll find here are my own. Feel free to use any of this, but be sure to identify the source.
Topics You'll Find Here
This site contains content on a bunch of different topics including Mobile, Mobile Development, Microcontrollers, and other topics that strike my fancy. I've written a couple of mobile development books, so mobile and mobile development tend to dominate lately.
Like What you See?
Like what you see here? Found something useful? If you benefited from anything I've posted here, please think about buying one of my books or making a purchase from my Amazon Wish List.
I had an opportunity this week to present at the Advancing Technology in Wilmington Meetup in Wilmington, NC. The sponsors of this organization found the video of my presentation from the ReactiveConf 2017 and asked if I’d like to speak to their group. I, of course, said yes.
The session I delivered covered how to implement A/B testing in a React Native application using Visual Studio App Center. Here’s a link to the session.
Since the ReactiveConf session, Visual Studio App Center hit General Availability (GA) and the SDK I used for my session upgraded from the preview Mobile Center SDK to the production grade App Center SDK. I decided I’d upgrade the app and presentation for the latest version of App Center and repeat the session from last year. Since last year’s presentation, App Center’s received some new features, so I was able to show off a little more of the product. Also, I had as much time as I wanted for my session (instead of only 30 minutes at ReactiveConf) so I was able to slow down and cover everything a little more thoroughly.
You can find the deck for my presentation on slideshare and the sample app source code is up on GitHub.
I take a lot of screenshots for my books, magazine articles, blog posts and product documentation. I’ve gotten pretty good at it, not because I have any special skills, instead its all about the tools I use.
I use TechSmith’s Snagit tool on Windows and macOS; I’ve had licenses for this product for more years than I can count. Originally just for grabbing whole screen or window captures, the product’s matured a lot over the years and now offers some very flexible options for grabbing screenshots. I love the scrolling window options, although there’s a free Chrome plugin that does that as well.
On Linux, I use the free Shutter application, it does everything I need it to do on Linux (which is usually just screenshots of terminal windows or application screens. If I need a full length browser window capture, I’ll usually just grab it from a Windows PC or Macintosh.
One thing these tools don’t do is give you an easy way to hide or replace confidential information in screenshots. In Snagit I use the Snagit Editor to blur out or color-fill areas of an image to hide information I don’t want displayed in the screenshot. I sometimes use Corel’s PaintShop Pro to do the same thing, the only difference is whether i’m doing this as part of snapping a screenshot or simply editing a file later. These editing tasks, by the way, are the limit of my image retouching capabilities and I’m very glad that both tools make this easy.
A feature I’d really like in Snagit, and its funny that I’ve never thought to tell them (TechSmith) this, is that I’d really like to be able to somehow select text elements or inputs on a screen and tell Snagit to blank them out or replace selected content during the screen capture. This way, I can capture my screens and blank out the private information in one seamless process instead of having to capture the image, open an editor, and make my changes. If you’re listening TechSmith, make this happen please?
When working with screenshots of web pages or web applications, there is a relatively easy way to get change the content on the page before capturing the screenshot. I’ve noticed that a many writers don’t use this technique, so I thought I’d write about here and show you how it works.
Using your browser’s developer tools, you can edit the content of any page. When you save your changes, those changes reflect immediately in the browser window. Then, when you take the screenshot, it shows whatever you want it to show on the page - hiding personal or confidential information you don’t want in the screenshot.
Let me give you an example, since I work for Microsoft, I thought I’d use the Azure portal as an example. If you look at the following figure, you can see that the portal thinks my email address is joe dev at acmedynamite dot com and my user name is Joe Developer. Those aren’t my actual account details, I simply changed them before taking the screenshot.
You’ll should edit out the PII, replacing it with useful, but non-confidential data. For example, many sites use Globally Unique Identifiers (GUID) in URLs to help the server identify the resources, and those often end up in URLs. If you look at the previous figure, you can see that the name for an automatically generated mobile app resource I created in Azure consists of the word mobile plus a GID. Since the full, internal name for resources you use in your app are something you won’t want others accessing, when I take a screenshot of a page loading that particular resource, I’ll simply let the page load, then edit the URL displayed in the browser, removing any information others can use to access that resource, before taking the screenshot. The edited URL doesn’t affect anything, all the existing links on the page will continue to work as expected.
The only problem you’ll have is if you put focus on the browser’s address bar and press the enter key (triggering a load of the edited URL). Unless what you’ve typed is a valid URL, the browser won’t be able to find the page and you’ll see an error. Another option is to take your browser screenshots omitting the browser chrome (including the address bar). When you do this, all you get is the rendered page, so you won’t need to worry about PII from the page address appearing in your screenshot.
Google Chrome Dev Tools
To ‘fix’ content on a page using the Chrome browser, open the browser to the page you want to screenshot. Next, open the Chrome developer tools (press Ctrl-Shift-I on Windows) then select the Elements tab (highlighted as step 1 in the following figure).
Use search to locate the text you want to edit; press Ctrl-F on Windows or Command-F on macOS, then type the text you want to find on the page (step 2 in the figure). Chrome will highlight the selected text on the page (step 3 in the figure).
Double-click on the selected text in the window as shown in the figure below, then type the text you want to replace the selected text.
When you press the Enter key to end input, the page will update with your changes. Close the developer tools (Ctrl-Shift-I on Windows) and take your screenshot.
You can also use the Chrome Inspector to locate the source for a particular element on the page. Click the icon highlighted in the following figure, then point to the page element you want to edit. The developer tools will highlight the selected text in the Elements pane - simply double-click on the text you want to edit and make your changes.
Firefox Dev Tools
The Firefox developer tools work a little differently. Open the page you want to screenshot in Firefox, then press Ctrl-Shift-I to open the developer tools. Then use the search field highlighted in the following figure to find the content you want to edit. If your page has more than one instance of your search text, Firefox doesn’t display a visual mechanism to navigate between the different instances. Instead, press enter in the search field to navigate to the next instance.
As you did with the Chrome developer tools, simply double-click on the text you want to edit, make your changes, then press the Enter key to commit your changes.
Edge Dev Tools
In the Edge browser, things are about the same except that you press F12 to open the developer tools. Once there, you can use the search window highlighted in the following figure to find the text you want to update. Notice that for multiple search hits, Edge gives you arrows you can use to move between instances.
As you can see, it’s pretty fast and easy to ‘fix’ web pages, removing PII, before taking screenshots.
I’m staying in San Francisco this week and when I checked into my hotel, they offered me an opportunity to use a digital key to get into my room. That seemed like a fun and interesting thing to do, so I said yes and began the process.
For some bizarre reason, Hilton requires some legal process to get my key; I had to agree to some terms in order to use this option (I don’t understand why, and I didn’t read them before I accepted them). I eventually got an email letting me know that my digital key was being generated and would be delivered to my phone (actually the hotel app on the phone) once my room was ready. When I got to my hotel and opened the app, I saw what you see in the following figure; a button in the lower-left corner with an option to open my room using the app. Nice!
When I tapped on the key, I was instructed to get close to the door I wanted to open as shown in the following figure. I’m assuming it’s using Bluetooth Low Energy to detect if I’m close to the door, and hopefully it knows which door I’m close to.
Once the system recognizes the phone/app, the page/screen changes to a button you can use to actually open the door. God forbid that you’d be in a hurry, as this process takes much longer that it takes to pull a key out of your pocket and use it. If there was a rapist or robber on your tail, you’d be a victim before you could ever have the door open.
The challenging aspect of this feature is that this process only works when all of the intermediate parts work as well. When I got back from breakfast this morning, I opened the app and the app hung with a incompletely rendered screen. After poking around for a short while (closing and reopening the app a couple of times), the app finally told me that there was a problem and it was on the hotel’s end of things. Comforting information, but not even at all useful as I’m standing outside my room and can’t get in. Sigh.
The problem eventually resolved itself and I could get into the room, but what options did I have in light of this failure? Call the hotel and hope they could get me into my room remotely? Would they even do that? Doubtful. I imagine they’d either send someone to the room with a key or I’d have to traipse down to the hotel lobby and get a physical key. Either way I’d probably have to prove who I am even though the app knows who I am and where I am.
When I went to the gym this morning, a sign outside the door said I could find the fitness room key in the app. I’d not seen an option for that in the app, so I stood outside the fitness room for a few minutes fumbling around in the app until someone left and I could just go in their the opened door.
It turns out that that little unlabeled blue key icon on the middle-top right of the screen opens some options for the key system. You can either access your room key or the key manager (whatever that is).
I only needed one key, so I had no idea what the key manager would be used for. I imagined I’d use it if I needed keys to two rooms (when I’m traveling with my family for example). Well, this inappropriately labeled option grants me access to other keys I’ll need when I’m staying at the hotel as you can see from the following figure.
From a UX standpoint, the list of public keys should not be hidden away under a double sub-menu, those options belong on the bottom of the main key screen or under a separate, but easy to locate, tab on the key page. It should take one tap, or at worse two taps, to get to the fitness center key. In this app, it costs me three taps at a minimum, but only if I’m able to figure out in a hurry what that key icon means to me.
Should that icon be a key, or something that says “other keys”? Which would enable the app user to get to other keys the most quickly? Yeah, the latter option. Even using a single key icon here is misleading, a simple icon with a stack of keys or a key ring would have helped me understand more quickly what that particular button was for.
This system works, more or less, but could use some TLC (tender, loving care). This process is a great example of what happens when the person who designs and implements a system didn’t take the time to validate the UI with the everyday user. A little time with actual users would have helped them understand that the UI metaphors they selected simply didn’t work.
American Airlines sent me an interesting infographic this week, it summarized all of my flight activity for the year. It was interesting to see that with all of my flights, I flew enough to circle the globe twice this year. Surprising, until I remembered that I flew to Israel and Slovakia this year. No surprise that Seattle was my primary destination considering I now work for Microsoft. Here's the infographic.
My desktop PC (yes, I use a Windows Desktop for most of my personal work) had a hard drive crash a few weeks ago. This particular PC is three years old, so I expected to see some failures. It wasn’t too bad as my system has a 512 GB SSD as its boot drive, but an 8 TB RAID array for all my apps, data, games, etc. I ordered a replacement drive and was quickly back in business.
Weirdness ensued when I tested the ‘bad’ drive using the manufacturer's diagnostics and it passed with flying colors. I assumed that the original failure was just a fluke, so I ran the tests a few more times and set the drive aside to use when another drive failed.
A week or so later, another drive in the RAID array failed. Knowing I had a ‘good’ spare lying around, I swapped the drives and got to work. Unfortunately, the array came back up, but then quickly failed again. Since I knew the drive tested good, I started looking for other sources for my problem.
I swapped all my drive cables, split the array across two power supply rails, but the problem persisted. At this point, I ordered a new motherboard and installed it only to find that the problem persisted. Thinking through this, I started swapping the drives around and noticed that the problem moved with the drive. I then swapped the old, bad drive back in and the problem persisted. Crikey, two bad drives.
I should have swapped the drives around before I ordered the motherboard; if I’d done that, I would have noticed that the failure followed the drive, eliminating the possibility that it was a motherboard problem. My second failure was assuming that the original failed drive was still good It turns out that the drive works when first connected, but then fails a while later. The evidence showed that, but I ignored it when the drive passed diagnostics.
I finally ordered another replacement drive, plugged it in, and I’m all set; everything is working as planned.
I also used this as an opportunity to format my system and do a clean installation of Windows. This is the only system I’ve EVER upgraded (from Windows 8 to Windows 10, what happened to Windows 9, I can’t tell you), and I was having some problems. The biggest of which was that my Windows Store instance was corrupt, and I couldn’t install or upgrade any Windows Store apps on the system. I encountered some problems with the re-install, I’ll share those experiences in my next post.