Welcome to the lab.

Web Excursions for September 26, 2016

[Tweet : ADN : nvALT]

This weeks web excursions are brought to you in partnership with Udemy, and here’s a special offer: Until October 1st, get any course for $15 using promo code UDEMYDREAM.

Hyper Key hack in Sierra using Karabiner-Elements and Keyboard Maestro
For those who’ve upgraded to Sierra and are lamenting the loss of their Hyper Key (because Karibiner breaks in 10.12), here’s a hack using Karabiner-Elements and Keyboard Maestro.
Honestly, the escape key functionality of my original hyper key (tap for escape, hold for modifiers) has become so ingrained in my muscle memory that I’m happier doing a simple hack to make it just an escape key, and then using a basic key combo to trigger a Keyboard Maestro group with my old launching shortcuts.
Expanded Comics
I don’t read a lot of comics, but not because I don’t appreciate the art form. This new app demonstrates a potential future that combines 3D animation, models and sculptures, original music, and other things you’ll never see on a page. Comic fans might scoff and wax nostalgic, but this is motivating for me to dive into graphic storytelling again.
inessential: Memory Graph Debugger Tips
The latest Xcode has a new memory graph debugger, and Brent Simmons shares his tips after his first day of working with it.
The MIT License, Line by Line
From /dev/lawyer, an in-depth look at what the MIT license actually means. It’s something anyone using it should probably understand, but very few of us do.
Pantsuit: The Hillary Clinton UI pattern library
Worth blogging based on the name alone, this is the internal design system for Hillary Clinton’s campaign.
Usar Marked 2 para previsualizar AsciiDoc
A Spanish-language how-to for using Marked with AsciiDoc.

Don’t forget to take advantage of the extensive collection of courses on a wide variety of development and design topics at Udemy, just $15 for a limited time!

Udemy Sitewide  $15

OK, nvALT 2.2 take 2

[Tweet : ADN : nvALT]

So we released the final version of nvALT 2.2 last night, except I threw in a bug that would crash it for everybody except me. Silly static linking issues.

The update is back in the automatic updater (nvALT->Check for Updates), but anyone who already updated will need to download the new version directly (below).

Thanks for your patience. Feel free to donate and keep David and I alive while we finish up work on BitWriter!

nvALT v2.2 (120)

A fork of Notational Velocity with MultiMarkdown preview and advanced Markdown editing capabilities. Other good stuff.

Updated Fri Sep 23 2016.

More info…

nvALT 2.2: bugfixes, Sierra compatibility

[Tweet : ADN : nvALT]

Sorry it’s been a slow week of posting here. Much to do.

Speaking of, nvALT ran into some trouble with Sierra that I hadn’t noticed because I’ve been cheating and running a dev version for so long. That prompted David and I to get this one last release of nvALT out and ensure stability for at least the next year.

In the meantime, we’re getting close to a BitWriter beta. This will be the replacement for nvALT, rewritten from the ground up and using modern code that will be easier to maintain moving forward. Keep your eyes peeled on this blog and Twitter, both ttscoff and nvALTApp will have beta signup and release news.

In the meantime, you can continue to report nvALT issues on GitHub, but I wouldn’t count on any future releases except in the case that I screwed something up on this update that breaks it for everyone.

Note that this release should run on 10.9 (not tested), but that’s the minimum. If you’re running something really old and nvALT is currently working for you, don’t update.

The release should show up in automatic updates (nvALT->Check For Updates), or download it directly below. Stay tuned for more BitWriter news!

nvALT v2.2 (120)

A fork of Notational Velocity with MultiMarkdown preview and advanced Markdown editing capabilities. Other good stuff.

Updated Fri Sep 23 2016.

More info…

Back to School: Udemy $15 courses

[Tweet : ADN : nvALT]

Here’s a quick note to let you know about the current Back to School promotion from Udemy. Learn some iOS and Swift skills for just $15 (normally $200) using the code 15B2SCHOOL (or clicking any of the links below to have it applied automatically).

The coupon works sitewide, but here are some featured courses I’d highly recommend for any developer working with iOS.

iOS 10 & Swift 3: From Beginner to Paid Professional

The Complete iOS 10 Developer - Create Real Apps in Swift 3

The Complete iOS 10 Developer Course - Build 21 Apps

The Back to School promo is running now and ends tomorrow, so if you want to do some learning, take advantage of it!

iPhone 7 and VR?

[Tweet : ADN : nvALT]

I’m not one to spend time on rumors, and rarely invest much energy in speculation, but the technical specs dug up by Softorino while hacking away on the next version of WALTR are intriguing.

The benchmarks they’ve run show that the A9 chip in the iPhone 6 Plus can already handle VR video playback. VR requires 2 streams of at least 4k video quality, and the A9 chip can provide that. An A10 chip in the next iPhone should reasonably be more than capable of it, which makes speculation about an Apple venture into VR a reasonable conclusion.

See the details and results at Softorino’s blog.

Web Excursions for September 05, 2016

[Tweet : ADN : nvALT]

This week’s web excursions brought to you in partnership with Udemy. Learn Anything.

TheAppStore.org - Search and filter the iTunes App Store on the web with your browser
A way faster, better way to search the iTunes and Mac App Stores.
CloudCannon Officially Out of Jekyll Beta
CloudCannon has finished their Jekyll beta, making Jekyll and plugins available to all users on every plan. They’ve also added a bunch of configuration options and cool features like inline editing for Markdown files. If you want an easy way to run a Jekyll blog with an awesome GUI, check it out.
All Shapes And Sizes - Transforming negative into positive, if we can do it, so can you.
A worthy charity of interest to my Scottish friends.

Our vision is to enhance life of Adults with Learning Disabilities/Difficulties (ALD) and/or with mental health issues, by promoting social inclusion to those individuals and to raise awareness & understanding to the public.

By enhancing their lives & sense of wellbeing is to become a valued member of society via inclusion in all things.

Playlist Machinery
A collection of amazing tools for building and managing playlists on Spotify.
Party - Spotify
This is excellent. I’m enjoying Apple Music’s selection, radio, and curated playlists, but this kind of innovation (along with Spotify Running) is making me happily keep my Spotify subscription.

Udemy Banner

What’s wrong with the web forms these days?

[Tweet : ADN : nvALT]

Filling out forms on the web is an inconsistent and often infuriating experience. What follows are some of my major complaints. I’m not a UX professional, though as a front-end developer it’s definitely been part of my job. This post is written from a user standpoint, though. A frustrated, annoyed customer of e-commerce websites, a user who regularly signs up for services, and one who even occasionally fills out a contact form.


A lot of form issues are largely due to over-designing. It happens in Mac apps sometimes, too, where developers want to “spruce” up standard controls and end up breaking standard behavior. While the default controls and behaviors might not always be perfect, it’s a language that users understand.

Bad HTML practices include poor use (or lack of use) of tab indexes, or forms with “fancy” Javascript that breaks the default keys used to focus fields or navigate dropdown selections. This is basic functionality that should never be broken. Even beyond accessibility concerns, pissing users off during checkout on an e-commerce site is just bad business.

If you feel the need to change the design of a form field (and I get it, defaults are ugly and often wildly inconsistent between browsers and platforms), don’t change the functionality. This is especially true of dropdowns. It’s possible to build an autocomplete combo field that is still keyboard navigable. It’s possible to create a form field with placeholder text that becomes a label when the user starts typing without breaking tab index. It’s possible to create custom input fields that still indicate focus.

I think indicating focus on a field might be the second most frustrating issue commonly found in web forms. I never fill out a form by clicking each field; I tab between them. Tab order is annoying enough, especially when most elements can be focused with the tab key but custom dropdown fields are skipped, but it’s worse when I tab and have no idea where the cursor has gone. Highlighting the focused field with an outline is a standard part of the user’s language. Don’t break it without providing an obvious alternative, and for the love of jebus don’t remove the highlight completely.

Animated Forms

Stop this. I recently went through a signup process for Minnesota’s ACA insurance website. It was, if I recall, about 8 pages long. They separated the pages into multiple screens, and added a Javascript animation between them. Worse than just being slow and ugly, it could sometimes break when the crappy Javascript caused too much overhead in the browser. Refreshing the page would erase all of your current progress. If it had been anything other than insurance I absolutely had to have, I’d have been gone after the first try1.

As an aside, the revamped ABC app on Apple TV has similar issues. They added an animated splash screen on startup, complete with annoying and loud audio. Then every menu option leads to an animated splash page before you get to the destination, and you have to hit the select button twice to actually get to the next menu. It’s infuriating, and I rarely use it anymore.

Field Validation

This one is huge for me. When done correctly, inline validation can be wonderful. If you’re going to validate elements such as phone numbers, though, auto-formatting while the user is typing is important for clarity. Frustratingly, though, some automatic phone number formatting (where it will put parenthesis around the area code, auto-add region, and hyphenate the rest properly) doesn’t allow backspacing. On some sites I’ve had to completely leave the field and come back to start typing again. This entirely defeats the purpose. Use formatters, but make sure they work.

If your form validates live while the user types, provide a message letting them know what’s expected. For example, while typing an email address and validating it while typing, add a “Please enter a valid email address” label until it’s complete. But really, don’t do this at all. Validate it when the user leaves the field, and remove the error indicator when it regains focus. Showing an error while typing causes me to have a “just hold your got dam horses” reaction. I don’t need to feel judged before I even finish entering the information. I have no issue with password fields that show a strength indicator, but that’s a different story because it’s showing helpful information and doesn’t make me feel like someone is criticizing my typing speed.

Live validation also fails when it doesn’t account for autofill or paste. Recognize the Ctrl/Cmd keys as valid keyup triggers, and check the entire field again when it happens.

Email address validation is easy. Or it should be. There’s a very simple regular expression to determine if something is a valid email address. It should accept every legal character. I like to use Gmail aliases (email+alias@gmail.com) on sites where I want to easily filter junk mail to any address I provide, but I’d say about 30% of email validators don’t recognize the “+” symbol.

Even worse, and my number one complaint on the web, is email fields that don’t trim trailing whitespace when validating. This was never a big deal to me before iOS text replacement, but now any time I use my @@ shortcut to insert my email address, it adds a space after the replacement. Far too often I have to manually remove that space or the form will declare an error on submission. This is ridiculous. A space is never legal at the end of an email address, and can always just be trimmed off by the validator or processor. It can be done with Javascript prior to submission, or just let the processor do it when handling the form on the server side. Some sites automatically trim it off as you type, which is a good idea, but now that I’ve developed the habit of always hitting backspace, I frequently delete the last character of the email address. Thus, lack of consistency between forms becomes as big an issue as the original problem.

Less often but just as frustrating, I see forms that don’t properly update after an invalid field is corrected. This is especially horrible when the submit button is disabled until the form validates. This is a downfall of only validating on blur (losing focus), and I feel that submit buttons should never be disabled. If the user has corrected the field but not clicked/tabbed out of it, the submit button should handle validating the focused field.

Mobile Impropriety

There’s the obvious part of making forms compatible with mobile devices: responsive design. If I have to zoom and scroll the screen to fill out the form, you’re doing it wrong. You’d think this would only be an issue on older sites, from a pre-smart-phone era, but it’s not.

It’s also quite easy to specify the type of information a field is requesting. Doing so means that on mobile platforms, an appropriate keyboard can be displayed. When a form asks me for a purely numeric input and doesn’t give me the numeric keyboard on iOS, I have a negative emotional reaction. You wouldn’t like me when I’m angry.

I know that this post isn’t going to make a big difference in the vast ocean of the web. I just got bored with silently shaking my fist.

  1. That story gets even worse, as after the 15 minutes of form filling, I got a server error on the last page and had to do the whole thing again. Ultimately there was no verification that the form had been accepted and required a phone call anyway.

Web Excursions for August 29, 2016

[Tweet : ADN : nvALT]

This week’s web excursions brought to you in partnership with Udemy. Learn Anything.

Notion – Docs, wikis, tasks, seamlessly in one.
“A unified workspace for modern teams.” A nice combination of sharing, project management, and documentation wiki with Slack integration.
An SMS bot that stores your own questions and their answers, providing answers back to you with a text-based query. It’s like QuickQuestion for your phone…
A browser-based interface for visually building synthesizer sounds. Control them with MIDI or computer keyboard. As one might expect with an web-based synth, there are social sharing options as well.
Vesper, Adieu
A valuable insight for developers from John Gruber on the demise of Vesper and what he would have done differently.
flickr cc attribution bookmarklet maker
A nifty, customizable bookmarklet that can grab everything you need for embedding an image from a Flickr photo page with Creative Commons licensing. Automatically generate an image link and attribution text/link in HTML, Markdown, or WordPress shortcodes.

Udemy Banner