It’s ShowTime

Over the weekend I finally got time to work on something I’ve been meaning to get round to for quite some time now.

Introducing ShowTime, an insanely simple way to show your taps and gestures while demoing your iOS app.

Why another one?

I know, if you Google “show touches iOS app” you’ll get a few results. Some old with no recent support and some newer with some support. The reason I still decided to make ShowTime is because none of the solutions I’ve tried work with both single- and multi-window iOS apps.

The last two projects I’ve inherited at work both display new content in multiple windows. This would mean replacing each window with one of the “show touches” window solutions, which isn’t a trivial amount of work.

No, what I want is something that has little to no set up whatsoever, works with multiple windows automatically and can show the level of pressure shown on devices that support 3D Touch. Oh and it needs to be pure Swift code.

So I made one myself.

Why show touches on screen?

If you’re watching someone use an app on their phone, you can see what their fingers are doing so the gestures make sense. In contrast, if you’re watching someone use an app on a screen or video without being able to see their hands, you suddenly loose a lot of context, especially around multiple-touch gestures.

We work hard on making apps, and demoing them is part of our job as professional developers. As an iOS developer we don’t have a native way of showing touches on screen like Android do, so we have to get creative.

How does it work?

ShowTime uses method swizzling, a technique used to replace a default implementation of a class’ function with your own. Swift itself doesn’t support method swizzling, but because any Swift type that inherits from NSObject uses the Obj-C runtime, it is possible to swizzle their methods.

Thankfully, UIWindow inherits from NSObject so it’s possible to swizzle its methods, and the one we’re specifically interested in is sendEvent(_:) which takes a UIEvent as its argument.

ShowTime replaces the default sendEvent(_:) method with its own, and intercepts the event to extract touches. It then displays those touches on the window receiving sendEvent(_:) and then lets the window carry out its default implementation of sendEvent(_:).

This means that all instances of UIWindow (and its subclasses) will automatically get this behaviour, so it doesn’t matter if new windows are created, touches will always be shown.

How to set up ShowTime

There’s actually nothing to do to set up ShowTime other than to include ShowTime.swift in your project.

That said, you can customise the behaviour if you want. You can change the fill and outline of each visual touch, whether force is shown visually, whether to include the number of taps inside each visual touch (great for demoing maps), and more. By default ShowTime shows a blue visual touch, because it contrasts well with most content.

My recommendation for keeping ShowTime around without putting it into production code is to create a demo branch in your repo which has ShowTime installed. You can then merge develop into this branch whenever you’re demoing something, and because there’s such little setup with ShowTime you’ll rarely get merge conflicts.

 

Hopefully you’ll try ShowTime during your next client demo, internal demo or while creating a product video. If you do, please let me know how you get on!

Extending NSCoding

NSCoding is used often through many iOS, macOS, watchOS and tvOS apps, and usually results in instances that conform being archived into data for transportation or persisting.

So lets extend NSCoding so we can easily archive that object. It’s very simple but very useful:

Now any type that conforms to Archivable will have to conform to NSCoding and will also be easily archived by calling instance.archivedData. Because we’ve extended the protocol itself, all types that declare they conform get this behaviour for free. Neat ?

Detect Mac OS X Screen Lock & Unlock With Objective-C

I really couldn’t find very much on Google about how to detect when OS X has it’s screen locked. Screen lock is not the same as the log in window; screen lock is basically just a system overlay that keeps everything running but locked and secure, while on the other hand the log in screen completely logs the user out and kills the session.

Screen lock is a function that can be activated in the Security panel of System Preferences, but also the Keychain menu bar application can lock the screen for you, or you can press ctrl+shift+eject/power.

I finally stumbled upon this answer on StackOverflow, and in case that link ever dies I thought I would add it here too.

In your .m file you’ll need to set up a  NSDistributedNotificationCenter which listens for screen locked notifications:

And then of course implement the two selectors:

 

Bring Back Swift’s Old Half-closed Range Operator

Swift

If you’re one of the many (many) people who dislike the change Apple made to the half-closed range operator, then rejoice, because with this snippet of code you can bring it back:

[Edit: there’s a better version of this code at the end, see it now.]

And then you can use it just like before:

This really just shows the power of Swift, in that we can define a lot of how we want it to work ourselves.

Here’s an updated version which is more concise:

 

 

Sequencr jQuery Plugin

This jQuery plugin is great for when you want to animate a set of elements in succession, that is, not all at the same time.

Sorry, but my maths isn’t great and I’m not sure what term to use instead of  modifier for overlapping the animations. If anyone knows, please comment and I’ll sort it out.

Thank you to Alan Neville on Twitter, apparently the term I should be using instead of  modifier is  convolution. I will update the code accordingly!

Click here to jump straight to the minified plugin code.

Animations:

There are no default animations set, you must pass an object literal of animations and their values to the  animations  property.

Animation Time:

Pretty self explanatory, changing the  animationTime  property will change how long each animation will take, in milliseconds. The default is 1000 milliseconds (1 second).

Classes:

You can choose to have classes added to each element after the animation has finished by adding a string to the  classes property.

Delay:

The delay before any animations start, in milliseconds. Changed with the  delay property. The default is 0.

Easing:

The type of easing you want to use, the default is “swing”. Can be used with easing plugins wherever you’d use  easing in a standard jQuery animation.

Convolution:

Previously called the  modifier.

The default setting is to have each element animate once the previous element has finished, but you can change the  convolution value, with 1 being default. Setting convolution:2  will cause the next animation to start when the previous animation is halfway complete, but you can choose any number. The higher the number, the sooner the next animation will start. Choosing  convolution:0 will cause the animations to all fire at the same time.

Time Between:

You can set the time between animations by changing the  timeBetween  property. The default for this is 100, and the value you pass will be in milliseconds.

Example:

Plugin code:

Add this to your jQuery/JS file before any code that uses the plugin:

Check A MySQL Table Exists

There may be times when you need to check a whole table exists. Cases for this are quite rare, but it is possible:

This example assumes that you already have a connection to a MySQL server.

Avoid Logs To The Console Breaking In IE7 & 8

As I’m sure you’re aware, if you try to log to the console in a browser like IE7 or 8 where there is no console like this:

Then it will break your script. Of course, the simple solution to this is to make sure there’s no call to the console object in your code, however during testing this can be quite tedious. At the expense of a few lines of code you can get around this by adding this at the top of your JS file:

Firstly we create a new object called c, and then add a method called log which first checks if the console exists, and then calls the regular console.log() method if it does.

You would use this the same as the console, except it’s a bit quicker to write:

Now if you accidentally, or purposefully, leave that in your code it won’t break IE7 or 8, or any other browser which doesn’t implement the console object. You could of course add other console methods quite easily.

Because I’m lovely, here’s an already minified version of the  c object, so it takes up even less space.

Go forth and log to the console as much as you wish.

Smartly Using Conditional Comments

For some time now I’ve had the standard way of using IE conditional comments to check for IE8 and IE7:

But thanks to the latest WordPress theme ‘twentyfourteen‘, I’ve found a much smarter way of being able to keep all your extra IE code in one CSS file:

Here, it simply checks first for IE7 or lower, then IE8, and adds a respective class, or it just uses a regular <html> tag. This way you can target  browsers directly in your core CSS file:

In all honesty, I rarely have to actually use conditional comments nowadays, but for the rare times that I do this is a much more elegant way of implementing them.

Object Literal Delegates

Furthering on from my introduction tutorial to object literals in JavaScript, this is a slightly more advanced tutorial on how to set up delegates. A delegate is essentially a callback that one object can register for, usually receiving data from the object doing the delegating.

In this tutorial, you’ll learn how to:

  • Set up a method to add an infinite number of delegates
  • Set up a method to remove a delegate
  • Send messages to the delegates

Here’s a working example:

If the setup of the objects themselves is confusing then make sure you’ve read my introduction tutorial, but here’s a rundown of what I’ve done:

There are three objects here, the Map object and two other objects which will be a Map delegate. The Map object has a property called  delegates, which will hold an array of all the delegates you add. The Map object also has three methods: .addDelegate(), .removeDelegate() and .sendDataToDelegates(). These are all pretty self-explanatory.

The two delegate objects, MapDelegate and AnotherDelegate both have to implement  .coordinatesChanged() which is a required method because otherwise the script will break when Map tries to call it. You can make a method optional by first checking if it’s defined before calling it for each delegate.

As you can see, the delegate objects both implement the .coordinatesChanged() method, but they do different things with the data (one prints the coordinates to the console, the other alerts the user with a dialog). All they care about is that the coordinates have changed and what the new coordinates are, they do their own thing with the new data.

Object Literals; Something Every New JavaScript Dev Needs To Know

JavaScript is a funny thing, it’s extremely powerful in helping us make amazing and interactive websites (especially coupled with the fantastic jQuery library), but it’s really difficult to keep the code tidy and structured. Enter ‘Object Literals’.

Object literals are essentially a list of key:value pairs. Each key can hold anything as a value, even another object.

Here’s an example of passing another object literal as a value to the  born  key.

Note that the last key:value pair in an object doesn’t have a comma after, if you add a comma it will break the script in some browsers (namely IE).

So you’ve learned about the basics of an object literal, but you need to know how they’re actually useful. You can assign an object literal to a variable: Continue reading “Object Literals; Something Every New JavaScript Dev Needs To Know”