As part of [rebuilding my website to use Next.js and Netlify CMS](/2020/09/06/on-to-the-next-js-thing), I wanted to reuse components I made for [Next.js](https://nextjs.org) as the editor preview in [Netlify CMS](https://netlifycms.org). Unfortunately for me, I couldn't find any resources about how to do so.

After lots of trial and error, I found a way to initialize the CMS as part of a Next.js page, so I was able to import other components to use as the preview. Here's how I did it. 

> **Disclaimer**
>
> I am not claiming that this is the absolute best way to do this. It is simply the method I discovered. One particular thing to note is that the CMS can take a few seconds to load, since it only starts loading after the first render.

I'm going to assume that you have a Next.js site set up and that the CMS is set up to be available at `/admin` using the `<script>` tag method.

First of all, you'll want to remove the page that's currently hosting the CMS (`/public/admin/index.html`). Then, move the Netlify CMS `config.yml` to the top level of the `public` directory.

Next, install the [`netlify-cms-app`](https://www.npmjs.com/packages/netlify-cms-app) package. We're going to use this to initialise and customise the CMS.

```
yarn add netlify-cms-app
```

Now create a new admin page in Next.js by creating a `/pages/admin.js` file. To start with, just put a blank component in there so that the page loads but doesn't display anything.

```jsx
const Admin = () => <div />;

export default Admin;
```

To actually load and display the CMS, we need to import the `netlify-cms-app` module. But here's the issue: as soon as the module is imported, it'll try to access the global `window` object. That won't work because Next.js will try to prerender or server-side render the page, so `window` will be undefined and the page will crash.

Instead, we'll use a dynamic import to only import the module once we know `window` is defined. We'll do that using the React `useEffect` hook and an inline anonymous `async` function (since dynamic imports are asynchronous).

```jsx
import { useEffect } from 'react';

const Admin = () => {
  useEffect(() => {
    (async () => {
      const CMS = (await import('netlify-cms-app')).default;
      CMS.init();
    })();
  }, []);

  return <div />;
}
```

To break this down a bit:

- We use `useEffect` since it will run the code after the first render, when `window` is defined.
- We define an anonymous `async` function and then call it immediately. This is because `useEffect` doesn't allow the callback itself to be asynchronous.
- We `await` the import, and then access the default export of the module; that's the CMS object we need.
- Once the module has been imported, we initialise the CMS by calling `init()`. This loads the CMS and causes it to replace the current page (which was blank).
- The dependencies of `useEffect` are an empty array `[]` because this should only be run once, after the first render.

At this point opening `/admin` in the browser should display the Netlify CMS. If you get an error about not being able to find the config, make sure you moved `/public/admin/config.yml` up to `/public/config.yml`.

So far all we have achieved is replicating the existing setup. Let's move on to actually creating an editor preview.

The important function we need is [`CMS.registerPreviewTemplate`](https://www.netlifycms.org/docs/customization/#registerpreviewtemplate). This allows us to register a React component for rendering the preview for a given collection in Netlify CMS.

The CMS will pass a number of props to this component, but we're only interested one for now: `entry`. This is an [Immutable.js `Map`](https://immutable-js.github.io/immutable-js/docs/#/Map) containing all the data about the entry. It will contain a key/value pair for each field defined for the collection.

Since I assume you already know how you want to render a preview, I'm going to assume that you have a collection called `article` and you've already created a component called `ArticlePreview` at `/components/ArticlePreview.js`. You'll need to update this component to accept the `entry` prop and extract the metdata from it.

Assuming an `article` has three fields – `title`, `date`, and `body` – here's how the component would extract the data to render it:

```jsx
const ArticlePreview = ({ entry }) => {
  const title = entry.getIn(['data', 'title']);
  const date = entry.getIn(['data', 'date']);
  const body = entry.getIn(['data', 'body']);

  return (
    <div>
      {/* Render the preview here... */}
    </div>
  );
}
```

Here's how to register that component as the article preview:

```jsx
import { useEffect } from 'react';

import ArticlePreview from '../components/ArticlePreview';

const Admin = () => {
  useEffect(() => {
    (async () => {
      const CMS = (await import('netlify-cms-app')).default;
      CMS.init();

      CMS.registerPreviewTemplate('article', ArticlePreview);
    })();
  }, []);

  return <div />;
}
```

All interaction with the `CMS` object has to be done in the `async` function, otherwise it will try to execute before the CMS is initialised.

At this point, opening an entry in the CMS should display using the preview component you defined and registered! I'd recommend reading up on [`registerPreviewTemplate`](https://www.netlifycms.org/docs/customization/#registerpreviewtemplate) to see what other props it passes, if you need to make more complex previews.

For further reference, my admin page is [here](https://github.com/olivvysaur/livasch.com/blob/main/pages/admin.tsx), and my preview component is [here](https://github.com/olivvysaur/livasch.com/blob/485e4726fd222d4ec9300f6357ba9b0afb4b6ddb/preview-templates/PostPreview.tsx). Note my preview component is just a wrapper around the actual [`PostPage`](https://github.com/olivvysaur/livasch.com/blob/485e4726fd222d4ec9300f6357ba9b0afb4b6ddb/pages/%5B...slug%5D.tsx#L21) that I use to render posts on the real site (I like this approach because the preview will always match the final page).

How to Set up Netlify CMS Previews with Next.js

For my first post in almost two years, and to go along with the redesign I've just rolled out, here's the story of why and how I rebuilt this site from scratch on an entirely new technology stack. 

## The bad times

For nearly seven years, this site was hosted on [Github Pages](https://pages.github.com/). There are many benefits to that, the main one being that it's totally free to use. It also means all the content is stored as plain text files, rather than being in a database somewhere, and by the nature of git, the version history is baked right in.

However, I had one major problem with it: editing content required checking out the repository, manually adding a markdown file with the right name and the right metadata at the top, and committing it back to git to wait for it to be processed and published. It's an extremely cumbersome process, and I would usually have to copy an existing file and edit the metadata, because I could never remember the format.

That friction was (partially) responsible for the... *lackluster* amount of content I was writing. If I had an idea for something to write, especially if I was using my iPad, I just couldn't be bothered to go through that workflow.

One of my other issues was that since Github Pages uses Jekyll as its static site generator, running the site locally involved getting a Ruby environment set up with all the right gems used by Github.

It has honestly been about four years since I last successfully ran the old site locally on my machine, because it would always fail with some cryptic error or another. So my process for making structural or design changes was to edit the code directly on github.com, press commit, and wait for it to deploy to see if it worked. Not great.

Some time in 2019, I decided I wanted to totally redesign the site, and use it as a starting point for getting back into writing. By then, I had settled in at Amazon spending all day working on React apps. I had less and less desire to maintain my Ruby-based Github Pages site; if I was going to put in a load of effort to rebuild the site, I wanted to use React.

## A tale of three accidents

I don't remember the exact circumstances, but somehow I stumbled across [Next.js](https://nextjs.org), a React-based framework capable of acting as a static site generator. Using an SSG was important to me because the then-current iteration of my site was statically generated and therefore loaded instantly. While I could have created a React frontend to a CMS like Wordpress, as far as I knew, I'd have to be loading content at render time, which would be a big step down from the pure HTML I was serving up to that point.

So I had my generator. But how was I going to host the content? Github Pages certainly doesn't support Next.js, so I would have had to generate the content locally, then manually commit and push to deploy it. That's even more friction than the previous workflow (and totally impossible on an iPad).

Through another total accident, at some point I found [Netlify](https://netlify.com), a platform that can be hooked up to a git repository, execute any custom build step, and host the resulting content. If it sounds entirely perfect for what I needed... that's because it is. I could create my Next.js site, commit the content as markdown files (same as with Jekyll), and Netlify would build the app and host it for me. Amazing!

But what if it could get even better? Sure, I could build the site as a React app and get the benefits of a static site, but I was still going to have to edit raw markdown files, weird formatting and all. That's where [Netlify CMS](https://www.netlifycms.org/) comes in. It's a single-page React app that can be embedded into any site, and (as the name suggests) acts as a CMS.

Its primary way of working is creating and updating markdown files in git with special metadata stored at the top. Sound familiar? It's basically automating away the painful process I was going through before! And just like Next.js and Netlify before it, it was pure coincidence that I learned about Netlify CMS.

## Time to build

Armed with my site generator, my hosting platform, and my CMS, on 24th August 2020 I [got to work](https://github.com/olivvysaur/livasch.com/commit/f2139eb5307b5f8c888fe2df67fbc1ad85118269). I found an extremely helpful tutorial by Cassidy Williams, [Building a Markdown blog with Next 9.4 and Netlify](https://www.netlify.com/blog/2020/05/04/building-a-markdown-blog-with-next-9.4-and-netlify/) – exactly what I was trying to do.

First I got Next.js set up to read posts from markdown files and render them with [`react-markdown`](https://www.npmjs.com/package/react-markdown). Then, I set up Netlify to run `next export`, which gets Next.js to export static HTML for the site. Finally, I got Netlify CMS set up to read and write those same markdown files being used to render posts.

After that it was "simply" a case of designing and building the actual frontend. The only interesting thing to point out here is my use of [Emotion](https://emotion.sh) and [Emotion theming](https://emotion.sh/docs/theming); instead of using a big CSS file and `--var`s, common definitions like fonts and colours are defined in a [theme](https://github.com/olivvysaur/livasch.com/blob/main/theme.json) and then used in styled React components.

## The going gets tough

Once the frontend was built, there were two more things to do: an RSS feed, and proper styling for the editor preview in the CMS.

RSS was tricky because pages in Next.js are designed to render React on an HTML page. RSS is... not that. It's an XML document describing the feed and its entries. I did a bit of research and couldn't find a solution I was happy with.

One person suggested [creating an "API route" which builds the feed](https://ironeko.com/posts/how-to-add-an-rss-feed-to-your-next-js-site) when the request comes in. Not ideal given that by definition, my feed can only change at build time, so there's no need for so much dynamism.

[Another suggestion](https://logana.dev/blog/rss-feeds-in-a-nextjs-site) involved a build-time script (perfect) but required editing the site's Webpack config to compile the script to the right place before it runs (inelegant). 

My final implementation also uses a build-time script, but it's a simple Node.js script that runs with [ts-node](https://www.npmjs.com/package/ts-node) and simply creates an XML file in the `public` directory, which Next.js serves as-is. I simply added a new `generate-rss` script to my `package.json` and added it to the `build` script so it gets regenerated on every build.

More of a challenge was the Netlify CMS editor preview. When editing a post in the CMS, you get a side-by-side view with the editable text on the left and a preview on the right. By default, the preview has no styling, so it's just a boring HTML document:

![Screenshot of Netlify CMS with the text editor on the left and a plain back and white HTML preview on the right.](/img/2020-09-netlify-cms-preview-no-style.png)

It works, but I'd rather see how the post will look once it's actually published. Thankfully, Netlify CMS exposes a [`registerPreviewTemplate`](https://www.netlifycms.org/docs/customization/#registerpreviewtemplate) function that allows you to do just that. Just give it a React component that renders the preview given the content passed in as props.

The hard part is how and where to actually call this function. Originally I had installed Netlify CMS by adding a `script` tag and pulling it from a CDN. The problem with that is it's used on a plain HTML page, so I didn't have access to any of the React components from the Next.js app I'd already made, like the layout for a post.

Unlike the RSS feed, I couldn't find anyone else who had even attempted to use components from Next.js and put them into the editor preview. I had to figure this one out myself.

Eventually I found a way to use the [`netlify-cms-app`](https://www.npmjs.com/package/netlify-cms-app) NPM package to run the CMS, rather than a static HTML file and the CDN. This allowed me to initialise the CMS in the context of Next.js, giving me access to the other components I'd created. All I did then was create a preview component which extracts the post content from its props and renders the exact same component that I use for posts on the actual site.

Now when I'm editing a post, I can see a live-updating version of it in the preview that looks identical to the page that will be deployed once I publish it – a million times better than editing a raw markdown file in VS Code.

![Screenshot of Netlify CMS with the text editor on the left and a fully styled preview on the right that matches this website's style.](/img/2020-09-netlify-cms-preview-styled.png)

## The end... for now

Implementing the preview was the last thing I did before publishing the redesigned and rebuilt site. I'm very happy with how it turned out – not only does the new version look nicer, but it's much easier to work with, and it has good accessibility too.

That being said, software is never truly *done*... there are still a few more features I'd like to add in future. But for now, I'm happy to share what I've made, and hopefully it'll lead to more than one post every two years.

On to the Next(.js) Thing

The worst part about travelling anywhere for more than a day trip is packing.
More specifically, trying to make sure you have all the cables and adapters
you'll need to charge all the devices you're bringing along.

I used to _try_ to keep one of everything I need in the backpack I use as a
laptop bag. However, on multiple occasions I've either taken something out of
that bag and forgotten to return it, or I've gone somewhere using a different
bag and forgotten to transfer all the cables to the other bag.

After reading
[Casey Liss's post](https://www.caseyliss.com/2018/10/17/go-pack-2018) about his
"go pack", which he uses to keep all his cables and adapters together in one
place, I decided to totally steal his idea (as well as his blog post format) and
create one of my own. 

![Photo of my go pack and the items it contains](/img/2018-12-go-pack.jpg)

> Some of these links are affiliate links, meaning I'll get a small amount in
> return if you buy something.

1 - [GAGAKU Toiletry Bag](https://amzn.to/2zYi8mz) - £13.99

This bag stores all the other items mentioned below. The idea is that if
everything lives in this small bag, it will _always_ be together, easy to find,
and straightforward to transfer between bags if necessary.

2 - [Anker 60W 5-Port Charger with 30W USB-C PD Port](https://amzn.to/2Cgb0DT) -
£29.99

This fairly small brick plugs into the wall and provides four USB-A ports and a
USB-C port capable of
[PD charging](https://en.wikipedia.org/wiki/USB-C#USB_Power_Delivery_specification)
at up to 30W. That's enough ports to charge two iPhones, an Apple Watch, either
an iPad Pro 2018 or a MacBook Pro using USB-C, and one other item such as a
Kindle. It also simplifies travelling to other countries, since you only need
one travel adapter.

3 -
[Apple Lightning Cable (1m)](https://www.apple.com/uk/shop/product/MQUE2ZM/A/lightning-to-usb-cable-1m)
×2 - £19 each

Obviously Apple branded cables are a lot more expensive than equivalents such as
Anker or Amazon Basics, but I've bought enough iPhones in the past that I have
more than enough official cables lying around. Two cables covers charging two
phones overnight.

4 -
[Apple Watch Charging Cable (1m)](https://www.apple.com/uk/shop/product/MU9G2ZM/A/apple-watch-magnetic-charger-to-usb-cable-1m) -
£29

I would never, ever trust a third party Apple Watch cable. I tried using one
once, and my watch shut down from overheating. Apple also offers a 2 metre
version for £39, but I've never found that I needed a longer cable.

5 - [Spigen Apple Watch stand](https://amzn.to/2Sl57dX) - £8.99

I like using my Apple Watch in Nightstand Mode, which is difficult to achieve
with a bare cable, because it tends to disconnect from the watch if you try to
set the watch down vertically. This stand holds the watch and the charging cable
steady for Nightstand Mode.

6 -
[Apple USB-C Charge Cable (1m)](https://www.apple.com/uk/shop/product/MUF72ZM/A/usb-c-charge-cable-1m) -
£19

I wanted to put a USB-C cable in the bag, and this one came with my iPad. I
wouldn't necessarily say this is the best option due to its price, but I
happened to already have it anyway.

7 - [USB-C 7-in-one multi-port adapter](https://amzn.to/2Cf53qK) - £25.99

Any recent MacBook Pro owner is probably a resident of
[Dongletown](https://www.relay.fm/upgrade/114), and I'm no different. This
(totally unbranded) USB-C adapter has three USB-A ports, an SD card slot, HDMI,
and USB-C passthrough. It gets the job done. The HDMI port doesn't support 4K60,
but chances are I'm only ever using it to watch Netflix or Plex anyway, which
don't need 60fps support.

8 - [StarTech Slim HDMI Cable (6ft)](https://amzn.to/2S6QgEa) - £6.93

One time I made the mistake of going away without an HDMI cable, and ended up
having to watch videos by balancing my laptop on my lap in bed. Now I bring this
HDMI cable with me so I can connect to the TV which is usually around somewhere.
I picked this particular one because it's incredibly thin, so takes up less
space in the bag.

9 - [Cable Matters USB Extension Cable (10ft)](https://amzn.to/2Bq278Y) - £7.99

With everything charging through the Anker brick, this USB extension cable is
paired with one of the Lightning cables to allow one of the two phones to be
charged on the opposite side of the bed.

10 -
[Apple EarPods with 3.5mm Headphone Plug](https://www.apple.com/uk/shop/product/MNHF2ZM/A/earpods-with-35mm-headphone-plug) -
£29

Normally I use either AirPods or Bose QuietComfort headphones, but if I'm ever
in a situation where one of those is out of battery (or I forgot to bring them)
then EarPods will do in a pinch. As mentioned before, I've bought far too many
iPhones in the past, so I have an abundance of these laying around. I
specifically picked the 3.5mm variant over Lightning so that they also work in a
MacBook Pro or a Nintendo Switch.

11 -
[Apple Lightning to 3.5mm Headphone Jack Adapter](https://www.apple.com/uk/shop/product/MMX62ZM/A/lightning-to-35mm-headphone-jack-adapter) -
£9

The aforementioned EarPods are no use for an iPhone without this adapter. I
still had this adapter in a drawer from my iPhone 7.

---

Overall the cost of this go pack, if you were to buy everything right now, would
be just over £200. However, as mentioned, I already had a lot of this stuff
going spare already; I only spent around £55 purchasing the bag and some of the
items to fill it with. I believe that £55 is well worth it to avoid some of the
stress of packing.

Go Pack

In macOS 10.11 El Capitan, the full screen feature gained the ability to display
two apps side by side in split view. The most common way I've seen people
activate split view is to make an app full screen, then use Mission Control to
drag another app on top. However, as I discovered recently, there's a much
faster and less annoying way to do it. 

There's no need to make one app full screen first; simply make sure both windows
are on the same display. Click and hold the green full screen button in the top
left of the window until the window shrinks and a blue overlay appears on one
half of the screen.

![GIF of starting the split view process by holding the green button](/img/2018-08-SplitScreen-Holding.gif)

Drag the window to either the left or the right, depending on which side you
want it to appear in split screen.

![GIF of dragging the window to one side of the screen](/img/2018-08-SplitScreen-Dragging.gif)

Let go of the window and the other windows on the display will enter a mini
Mission Control style view. Click one of the small windows to put it on the free
side in split view.

![GIF of adding a second window and entering split view](/img/2018-08-SplitScreen-Choosing.gif)

Interestingly, this method is the one Apple lists in its
[support documentation](https://support.apple.com/en-gb/HT204948), but I didn't
know it existed, and I've never seen anyone else do it.

Quick Tip: Enter macOS Split Screen Faster

On the surface, Logitech's new Slim Combo keyboard case for the new 10.5-inch
iPad Pro seems like it should be a better and more practical version of their
Create keyboard for the 9.7-inch iPad Pro. However, stick your iPad into the
case and use it for a while, and you'll start noticing its flaws and downsides.



![An iPad propped up in the Logitech keyboard case. There's a kickstand behind the iPad itself and the Apple Pencil is held to the top edge with a fabric loop.](/img/2017-06-slim-combo-product-shot.jpg)

The Slim Combo comes in two pieces; one acts as a shell case for the iPad and
the other is a keyboard which magnetically attaches to the bottom. Unlike the
Create case, which was a single piece, the Slim Combo acts more akin to Apple's
Smart Keyboard, which can be detached if you don't need it. Both pieces are
mostly made from black plastic which feels kind of cheap; the outside has a nice
textured fabric, but the plastic feels as though it may break at any time.

Also unlike the Create and the Smart Keyboard, the Slim Combo doesn't naturally
prop up the iPad into a typing position. On the back of the shell case is a
kickstand which folds out to stand the iPad at various angles; this is great
because it can be set to any angle, rather than the other keyboards which only
offer one or two angles. However, this is a case where ease of use takes
priority. It's very easy to fold out the Smart Keyboard and start typing,
whereas it's very annoying to turn the entire iPad around, fold out the Slim
Combo's kickstand, and turn it back round to find that you've chosen an angle
that's _just_ right to reflect a bright light in your face. While it's nice to
have the option of various angles, being able to open up the iPad cover and have
it automatically stick upright is just _nicer_.

Once you have the iPad propped up, the keyboard itself is surprisingly nice for
that of a case like this. It hasn't really iterated on the design of the
Create's keyboard, but it holds the same standard; there's _enough_ key travel
to feel like a real keyboard (although a mechanical keyboard, this is not) and
the backlight is a useful improvement over the Apple keyboard. A very welcome
improvement is the addition of a row of function keys above the number row
including a Home button, access to Spotlight, and volume controls (still no
escape key though). A lot of people will prefer the feel of the real moving
plastic keys, as opposed to the "bubble-wrap keys" on the Smart Keyboard.

![Two iPads side by side. One is in the Logitech case and one is attached to an Apple Smart Keyboard. The Logitech keyboard is about twice as deep as the Apple keyboard.](/img/2017-06-slim-combo-keyboard-comparison.jpg)

There's one major downside once you have the keyboard folded out on the Slim
Combo: the wrist rest, which seems as though it should be a nice feature, gets
in the way and moves the iPad itself too far away. The iPad still doesn't
support full keyboard navigation, so you still need to touch the screen fairly
often, and the keyboard on this case pushes the screen so far back that it
becomes uncomfortable to use. The 12.9-inch version of the Slim Combo allows the
wrist rest to be folded back, bringing the screen back closer, but for some
unexplained reason the 10.5-inch version didn't receive this ability. Compared
to the old Create and the Smart Keyboard, the amount of unused space on this
keyboard worsens the experience of using an iPad with a physical keyboard.
Additionally, unlike Apple's keyboard, the keyboard cannot be folded back behind
the device; if you aren't using it, it has to be removed entirely.

Now let's talk about the other major flaw, the sheer size and bulk. For a
product with "slim" in its name, this case makes the sleek iPad Pro feel more
like lugging around a Titanium PowerBook. In fact, the Slim Combo actually makes
the iPad bulkier and heavier than the Create. I really like the feeling of
carrying around an iPad which is thinner than a pencil; I really _don't_ like
making my iPad feel like a full-sized laptop in my bag.

![The side view of the Logitech case and the Apple Smart Keyboard next to each other. The Logitech case is about a third thicker than the Apple one.](/img/2017-06-slim-combo-thickness-comparison.jpg)

Overall, for £109.95, the Slim Combo doesn't offer anywhere near as much value
as the Create did, and it certainly doesn't live up to its name. Even though I
really liked the Create with my 9.7-inch iPad, I've returned the Slim Combo and
opted for the 10.5-inch Smart Keyboard instead. The Smart Keyboard may be £40
more expensive, but it's a much nicer experience, and feels a lot more like an
iPad keyboard should.

Review: Logitech Slim Combo for 10.5-inch iPad Pro


I've written a tiny browser extension for Safari and Chrome called
[Playlist Abandoner](https://github.com/olivvysaur/PlaylistAbandoner). It does
absolutely nothing until you go to a playlist page on YouTube
(youtube.com/playlist?list=xyz). On a playlist page, it adds a little button
next to each video in the list. That button opens the watch page for the video.

![Screenshot of a button with a tooltip saying "Watch Outside Playlist".](/img/2017-01-playlist-abandoner.png)

"But wait," you say, "doesn't clicking the video _already_ open the video's
watch page?!". Well, yes, but there's one key difference: when you click on a
video in a playlist, it opens the video in the context of the playlist, which
means that when the video ends, the next one will start playing automatically.

Playlist Abandoner opens the watch page from _outside_ the context of the
playlist, meaning that you'll watch that one video and nothing else. Well,
unless you click on another video manually, of course.

I mainly built this extension for myself; I make heavy use of the "Watch Later"
system on YouTube, and most of the time I only want to watch one video from that
list at a time. With Playlist Abandoner, I just click the magic new button and
I'm taken to that video, by itself, and when it ends, it just… ends.

I'm sure there's a very small market for this extension, because the main point
of YouTube playlists is to be able to watch them all in one go. But if it sounds
like something you want, it's available to install from the
[Chrome webstore](https://chrome.google.com/webstore/detail/playlist-abandoner/bofdplnnckbbkffmkpmndfljedbldafo).

For Safari, it's a little more complicated; to create an actual `.safariextz`
file, you have to be a member of the Apple Developer Program, which costs
$99 per year. Seeing as I don't (yet) have any iOS apps to publish in the App Store, I
don't really want to throw away $99
a year to publish a free Safari extension. To install the extension in Safari,
you'll need to follow the instructions
[here](https://github.com/olivvysaur/PlaylistAbandoner).


I Made a Thing: Playlist Abandoner


On Thursday, Apple unveiled the latest MacBook Pro, with a fancy new multi-touch
screen sitting above the keyboard in place of the function keys. And of course,
instead of focusing on the exciting new features of the laptops, people are
pointing out all the bad things.

I'm not saying you're not allowed to be disappointed that this shiny new
computer doesn't have an SD card slot, or that the 15-inch model "only" has 16
GB of RAM. But people are saying that Apple doesn't care about the Mac any more
because they _removed the startup chime_.

That's right, it's apparently a huge deal that these Macs don't make a loud
"BOOOOONG" sound when you first turn them on.

Now, I am aware that the startup chime
[had a purpose](https://en.wikipedia.org/wiki/Macintosh_startup), to signal that
the startup diagnostics passed and the machine is fine to continue booting. But
do we really need our computers to audibly tell us that every time we turn them
on? There are other sounds a Mac can make at startup which indicate a fault; by
removing the startup chime, it makes those fault sounds much more obvious.

I bet you never shut down your Mac other than restarting it for software updates
and maybe to use Boot Camp. So you probably hear that chime incredibly rarely
nowadays anyway.

So why the big fuss about the lack of a chime on these MacBook Pros? Nostalgia.
Because that's just how it's always been, so changing it must immediately be a
sign of doom.

[On 512 Pixels](https://512pixels.net/2016/10/the-startup-chime-is-dead/),
Stephen Hackett says:

> However, the startup chime is ingrained into the _experience_ of having a Mac,
> I'm sad to see it go. It’s tradition. It’s like losing the Happy Mac all over
> again.

"Tradition". "Part of the experience". These things may be true, but forgetting
how loud your system volume was last time you shut down your computer and
disturbing a quiet room with a BOOOOONG isn't a _good_ experience.

Paired with the fact that apparently these computers
[turn on as soon as you open the lid](https://youtu.be/kFolvM_uozU?t=10m40s),
even if they were shut down, I think this is actually a great feature. Clearly
Apple is attempting to design these laptops to feel like they're always ready to
use in an instant. You don't even need to care whether it's in sleep mode or
turned off. Just open the lid and your computer is there waiting for you. Isn't
that a great idea for the _experience_ of using a Mac? Having a startup chime
would break that illusion.

Keeping things around just because they've always been there isn't how you
design future generations of products. Just ask the headphone jack on your
iPhone 7.

Nostalgia may be a nice feeling once in a while, but it is not a feature.


Nostalgia is Not a Feature


> **Update 17th January 2017**
>
> Joe Kuhns has written a
> [Safari Extension](https://github.com/JoeKuhns/PiedPiPer.safariextension)
> which adds a PiP button to YouTube videos, as well as Plex, Netflix, and a
> handful of others. It doesn't add any additional functionality over what I
> outline below, but it makes it faster to enter PiP.

There seems to be some confusion about whether Picture-in-Picture, introduced in
Safari 10.0 and macOS Sierra, is supported by YouTube videos. I've seen a lot of
people saying it's not possible because YouTube uses a custom video player, not
the standard one.

Yes, it's true that the standard video player shows a PiP button in the playback
control bar, and that button does not appear in the YouTube player.

But PiP _does_ work on YouTube; just right click on the video twice.

![Screenshot of activating PiP on a YouTube video](/img/2016-09-youtube-pip.png)


Yes, macOS Picture-in-Picture Works With YouTube

I don't normally write about technical development topics, but today I'm making
an exception, because finding the source of my problem was incredibly difficult.
I'm hoping that this post will serve me in the future when I inevitably come
across this problem again. 

For the university assessment I'm working on at the moment, I have to use the
[web2py](http://web2py.com/) Python framework to create a web application. Part
of the framework allows you to create and process HTML forms, including
performing validation on the user's input.

The problem I had today was that I was using a form, and specifically, using the
`IS_NOT_IN_DB()` validation function. The issue arose when calling the
`process()` method on the form – if the validation failed, then an exception was
being thrown:

```python
<type 'exceptions.Exception'> Validation error, field:box-name <validators.IS_NOT_IN_DB object at 0x1125e4990>
```

Now, I don't know about you, but having an exception which uses the base
`Exception` type, and simply dumps a (useless) `__repr__()` string as the
message, isn't that useful. In fact, I believed that this was how the validation
was meant to work – if it failed, this exception would be thrown.

That's all great, except after testing my form for a while, I noticed a bug
where, if the validation failed, the next submission of the form would simply
reload the page and not do anything. Uh oh.

After a lot of debugging using the in-browser web2py debugger (I don't recommend
this), I came across the following code, in `gluon/html.py`:

```python
for k, validator in enumerate(requires):
  try:
    (value, errors) = validator(value)
  except:
    msg = "Validation error, field:%s %s" % (name,validator)
    raise Exception(msg)
```

I didn't realise it at first, but this code is actually _masking any exceptions
thrown lower down in the framework during the validation process_!

As all good framework debugging should require, I commented out the
`try`/`except` statement to gain access to the actual exception being thrown,
and – lo and behold – the validator was throwing an exception:

```python
<type 'exceptions.TypeError'> 'Rows' object is not callable
```

The validator was complaining because I had passed it a set of DAL `Row`
objects, rather than a set of database fields. Modifying the call to
`IS_NOT_IN_DB()` and passing it the correct argument worked straight away, and
no new exceptions were thrown.

Maybe the web2py team thought they were helping by masking the exception being
thrown, but I don't think they were, particularly. If they hadn't done that, I
wouldn't have spent over an hour trying to fix this problem. Maybe from an
end-user perspective, an error about validation is nicer than an error about
objects not being callable. But I'd argue that no error would be nicer.

Exceptions When Validating Forms in web2py

This past Sunday, I took a trip to the nearest Apple Store for an Apple Watch
try-on appointment. Obviously, spending about a minute and a half with each
model isn't enough to write any meaningful reviews, but I do have a few thoughts
about the models I tried on. 

### 38mm vs. 42mm

It could just be that the images on the Apple site are massive, but the watches
seemed much smaller than I expected in real life.

I was swayed by the fact that the Leather Loop only comes in the 42mm size, and
[Apple's own acknowledgment](http://www.apple.com/uk/watch/battery.html) that
the 42mm gets better battery life, so the watches I tried on were the 42mm.

The difference between the two sizes isn't _huge_, but I didn't actually try on
any 38mm watches, so I can't speak for what the difference is like when they're
on your wrist.

### [Milanese Loop](http://www.apple.com/uk/watch/apple-watch/stainless-steel-case-milanese-loop/)

The Milanese Loop is the band I _thought_ was my favourite, going by the images
on the website. However, after seeing it in real life, my opinion changed
dramatically.

I'm not sure why I thought it would be any different, but there's no getting
around the fact that the Milanese is made entirely of metal. It's very shiny,
especially under the bright Apple Store lighting — too shiny for me. I'm not a
big jewellery fan (says the person spending hundreds of pounds on a watch), so a
big shiny bracelet around my wrist isn't for me.

I'm not really sure how the band could be improved — the main benefit is that
the entire surface is magnetic, so it's "infinitely adjustable", as Apple is so
fond of saying. That doesn't really work with anything other than metal.

### [Black Leather Loop](http://www.apple.com/uk/watch/apple-watch/stainless-steel-case-black-leather-loop/)

This was my second favourite band from the website, but again I was in for
disappointment.

As others like
[Marco Arment](http://www.marco.org/2015/04/10/new-apple-stuff-impressions) and
[Stephen Hackett](http://www.512pixels.net/blog/2015/4/on-the-try-on-apple-watch-appointment-experience)
have said, it's such a thin leather cover over the magnets that it feels hard.
It also seemed to rustle and crackle when I moved with it on my wrist.

The other problem I had was that it just plain didn't fit me; at the correct
tightness, the end of the strap was hanging over the watchface by about two
segments. I _think_ this was just due to only the Large size being available to
try on, as the other 42mm bands fit me fine.

An issue that both the Milanese and the Leather Loops would share is that I
would probably find myself playing with the magnetic attachment, repeatedly
peeling it off and attaching it back again. While that's not going to break
anything (you'd hope), it would be distracting at the very least.

### [Classic Buckle](http://www.apple.com/uk/watch/apple-watch/stainless-steel-case-black-classic-buckle/)

Before getting to the store, I had no real intention of trying on, or buying,
the Classic Buckle. I thought I'd give it a go once I was there, because I had
some spare time during the 15 minute appointment.

The leather feels quite nice, but again it felt quite hard. Not as hard as the
Leather Loop with its built-in magnets, but still not as soft as you'd expect
leather to be.

The buckle has the same flaw that all buckles have — if your wrist happens to
fall in between two of the available sizes, you have to compromise by either
wearing it too loose or too tight.

### [Space Grey Sport](http://www.apple.com/uk/watch/apple-watch-sport/space-gray-aluminum-case-black-sport-band/)

This was another one that I wasn't planning on trying on, but reading some
people's reviews of the watch where they said it may be a good idea to go for
the cheaper model for the first generation, I thought I'd give it a go.

The _fluoroelastomer_ band feels incredibly soft. In fact I'd say that my
expectations for the leather and the Sport band were switched; the leather was
about as hard as I expected the Sport to be, and the Sport was as soft as I
expected the leather to be.

The pin style fastening is quite difficult to use when you've never touched it
before. (It doesn't help that I wasn't allowed to put any of the watches on
myself, until the _second_ time I tried the Sport.)

The problem was that the store employee "helping" me was clearly afraid I'd drop
it if I tried to put it on without his help. While I tried to fasten the pin, he
held the watch body to keep it on my wrist. In fact, the way I put on a watch is
to hold the strap between my arm and my body while I mess around with the
fastening with both hands; if I had been allowed to try this, I'm sure I would
have found the Sport band much easier to fasten.

Sweat may be a small problem, but it's a problem with my current "normal" watch
too, and that has a leather strap.

The Space Grey coloured aluminium is, in my opinion, the nicest looking watch
body. It's not as shiny as the steel model is, and it doesn't look as plasticky
as the silver Sport. Granted, I didn't get to see the Space Black steel model,
but I don't think it would have been nice enough to convince me to drop nearly a
thousand pounds on it.

### The end result

After trying on the four models, I ended up placing an order for the Space Grey
Sport. The main reason is the colour of the watch body, and the fact that the
Sport band actually felt the nicest. The price difference helps a bit too, but
that wasn't my main concern at all.

Unlike some others, my trip to the store _reinforced_ my decision to buy an
Apple Watch, rather than making me second-guess myself. Getting to actually play
around with watchOS was fun, and it isn't nearly as complicated as some people
are making it out to be.

If you're not sure about an Apple Watch, I'd advise you to go for a try-on
appointment, just to see what it's like to have one on your wrist. As always,
these are _my_ opinions, and mine alone; your opinions will almost certainly be
different once you've seen the watch in person.

Trying on Apple Watch

Since updating to iOS 8, I've been using the Health app for tracking things such
as steps walked and weight.

The problem is, since my iPhone is set to UK English, the Health app takes that
to mean that I want to use metric measurements. This means that it tracks weight
in kilograms, when really I want to use stone and pounds.

I looked for a setting to change Health to imperial units, but the app doesn't
actually have a single setting to its name.

I decided the way to get around this was to set up a function in
[PCalc](https://itunes.apple.com/gb/app/pcalc-the-best-calculator/id284666222?mt=8&uo=4&at=10l7rn)
to convert from stone and pounds to kilograms. This isn't exactly friendly since
it adds another step, but without a set of
[very expensive scales](http://www.amazon.co.uk/gp/product/B00BKRQ4E8/?tag=josh-asch-21),
weight tracking in Health is a manual process anyway. 

Using the function in PCalc is fairly simple. You type in the imperial
measurement in the form stone.pounds as a fake decimal:

![12.11 entered into PCalc](/img/2014-09-pcalc-stone-before.png)

and activate the function to have it converted to kilograms.

![12st 11lbs converted to 81.2kg in PCalc](/img/2014-09-pcalc-stone-after.png)

The downside to using a fake decimal like this is that if the pounds value is
less than ten, you would have to write something like 12.06, which, while still
obvious, is easy to forget.

Here is how the function is set up:

![Steps in PCalc to build the stone to kilogram function](/img/2014-09-pcalc-stone-function.png)

It tries to be clever, and if you forget the leading zero, it will assume you
meant 12.06 rather than 12st 60lbs. That is, unless you're entering 12st 1lb,
which must be typed as 12.01, because 12.1 means 12st 10lbs.

I know it'd be less complicated to enter a number of pounds, but that would then
involve multiplying the stone value by 14 first. I prefer this method.

Of course it would be much nicer to just be able to enter data into Health in
imperial units, but this works fine until then. You can download the function
[here](/downloads/stone-to-kg.pcalcfunctions).

> **Update, 14th March 2015**
>
> With iOS 8.2, the Health app now allows you to select which units to use for
> each type of measurement.
>
> To change this, open the single-measurement view by tapping on its graph, then
> at the bottom will be an entry called `Units`. That option will allow you to
> choose what unit you'd like to use.
>
> This mostly solves my issue with entering weight, because I can now choose
> between kilograms, stone, and pounds. However, I'm not _completely_ happy,
> because there's still no option for stone and pounds combined; either you can
> enter a number of pounds, or a decimal number of stone. I'm content using
> pounds for now, though.

Stone and Pounds in PCalc


I like Reeder for Mac a lot (the public beta of version 2 is
[available now](http://reederapp.com/mac)) but the icon seems outdated in the
dock to me. I made a new icon based on the iOS version of Reeder.

Like the old icon, it has two states, one for when there are no new items:

![An app icon in the macOS dock. It's a grey circle with a darker grey star in the centre.](/img/2014-04-reeder-normal.png)

and one for when you have unread articles:

![An app icon in the macOS dock. It's a grey circle with a white star in the centre.](/img/2014-04-reeder-new-items.png)

The icons are available to use; download them
[here](/downloads/reeder-icons.zip).

All you have to do to use the icons is go to Reeder in the Finder, right-click
and choose **Show Package Contents**. Then, navigate to **Contents → Resources**
and replace the existing icons, `reeder.icns` and `reeder-empty.icns`, with the
new ones.

The only problem is the icons will revert to the old ones whenever you install a
new version of the app.


Alternative Reeder for Mac Icons

The popular new game on the App Store at the moment is
[Threes!](https://itunes.apple.com/gb/app/threes!/id779157948?mt=8&at=10l7rn&ct=thr).
It looks sort of like a sliding number puzzle, but the concept is completely
different. The idea is, starting with a 1 tile and a 2 tile, you match tiles
together to form ever-increasing multiples of three.

The catch is, a tile can only pair with a matching tile (except 1 and 2), there
are only 16 spaces on the board, and every time you make a move, a new tile is
added. The game is over when no more tiles can move.

So, should you buy it?

### The good

Threes! is an excellently designed game. It has a fun aesthetic and all the
tiles are individual characters. The first time you create a tile with a certain
value, the game stops to give you a little biography about that tile. They all
have different personalities, which makes the game a lot more engaging than if
it had just been numbers on a grid.

![Screenshot of Threes. It's a 4x4 grid of 3D tiles where the front edge of the tiles each have a different face.](/img/2014-02-threes-game.png)

The soundtrack is perfect. Its style fits in well with the game's design and
character, and is catchy enough to stick in my head all day and make me want to
play even more. It loops round so it might seem like you're hearing it over and
over, but that's probably just because you've accidentally been playing non-stop
for an hour.

There are so many little details that have been added that make it even better.
If two matching tiles are adjacent, the eyes on the edge of the tiles turn to
look at each other. When you have a high-value tile on the board, and create
another one somewhere else, they gasp and get excited at the prospect of being
matched together.

### The bad

There honestly isn't a lot to put here. The only thing I don't like is the fact
that every time you finish a game, the keyboard pops up for you to 'sign' your
game. This doesn't make a lot of sense, since Threes! has Game Center
integration, so if someone else is playing on your device, your Game Center name
will be on the global leaderboard anyway. It's not too difficult to just hit
Return each time it shows up, but I'd rather not have to go through that every
time.

### Should I get it?

Absolutely! I've been playing it for hours in the last three days since it came
out, and I'm still enjoying it as much as I did from the start. It doesn't
require much effort to play (you can play with a single thumb), but it still
puts up a good challenge. It's definitely the kind of game you can just pick up
and play anytime, anywhere. It's putting it down once you do that's the hard
part.

Threes! is currently £1.49 [on the App Store][1], but that's an introductory
price, so it'll be increasing soon.

Should I get… Threes!?


[Steven Owens, on The Sweet Setup](https://thesweetsetup.com/apps/best-calendar-app-iphone/):

> It is the easiest to use (for adding/editing events) and the easiest to read
> (for checking schedules) for most people. Fantastical’s natural language
> parsing is second to none, making it fast and easy to add events, and it has a
> simple-yet-powerful design.

I was going to write a review of Fantastical myself, but now I don't have to,
since this review on The Sweet Setup says everything I would have said and more.
You're doing yourself a disservice if you're not using Fantastical.


Fantastical is the best calendar app for iPhone

> **Note**: EmojiBoard is no longer under active development, and has not been
> updated with new Emoji since 2013. It is also no longer being hosted on my
> site. I'm keeping this post around as a historical archive.

I like to use Emoji symbols when I'm using my iPhone or iPad, but I don't like
having to keep the Emoji keyboard turned on. I always end up hitting the 'change
keyboard' button by accident. I set up a few text shortcuts to the symbols I use
the most, but there's no easy way to access the other symbols. So I made one.



![Screenshot of a webpage which has three sections, each filled with emoji categorised by type.](/img/2013-12-EmojiBoard.png)

I call it EmojiBoard. It's a web app which lists all the Emoji symbols that work
on iOS, allowing them to be copied for use in any app. It's laid out in the
exact same way as the Emoji keyboard to make it easy to find certain symbols,
and there's a recents section at the top which collects the 21 most recent
symbols you've used.

It works best on iPhone and iPad, and will probably work on Android, but doesn't
work on desktop, since it relies on touch.

I Made A Thing: EmojiBoard


Version 8.0 of Messages.app, shipped with OS X Mavericks, has a new feature
which automatically inserts Emoji symbols when you type common text emoticons,
such as replacing ":)" with a smiling Emoji face.

Personally, I prefer to send the actual text rather than an Emoji symbol, but I
couldn't find anywhere in the app's preferences to turn it off. After a lot of
searching, it turns out the answer is simple. Just click in the text field in
Messages and deselect **Edit → Substitutions → Emoji**, and emoticons will no
longer be replaced with Emoji symbols. You can also right click in the text
field and deselect **Substitutions → Emoji** from the menu.

![A menu expanded in macOS with Edit, Substitutions, Emoji highlighted.](/img/2013-12-Disable_Emoji.png)


Disable Automatic Emoji in Messages on Mavericks


With the release of iOS 7, Apple introduced
[iTunes Radio](http://www.apple.com/itunes/itunes-radio/), a service similar to
Stations in Rdio or Spotify Radio. Unfortunately, iTunes Radio is only available
in the US at the moment - although
[rumour has it](http://www.macrumors.com/2013/10/07/apple-to-expand-itunes-radio-to-u-k-canada-australia-new-zealand-and-more-by-early-2014/)
that the service will be expanding to other countries, including the UK, by
early 2014.

However, it's fairly easy to access iTunes Radio now from any country. All you
need to do is set up a US iTunes account and log in to that account on the
device you want to use to access iTunes Radio. If you don't already have a US
iTunes account, follow
[these steps](http://www.makeuseof.com/tag/create-itunes-account-access-usonly-contents-credit-card/)
to get one set up without having to enter credit card information.

Once you have a US iTunes account, log in to it from the iTunes store and then
return to the Music app on iOS or the library screen in iTunes desktop and you
should see a new Radio tab. That's it! You have access to iTunes Radio.


Access iTunes Radio Outside the US

If you're anything like me, you like your iTunes library to look neat and tidy,
and to contain all the information it's supposed to, even if your content didn't
come from the iTunes Store.

For instance, in iTunes 11, the Description field for movies and TV shows became
much more prominent. So prominent, in fact, that it purposefully points out that
the description is missing if you haven't added one.

![A list of three episodes of How I Met Your Mother. Under each episode is text that reads "No Description Available".](/img/2013-04-No_Description_Available.png)

Short of describing movies and episodes of TV shows yourself in 256 characters,
there's no way to consistently add the Description in. That is, unless you use
[MetaZ](http://griff.github.io/metaz/). 

MetaZ is a new implementation of MetaX, a tagging program which stopped getting
updated a while back. It allows you to load in any video file and update its MP4
metadata, which iTunes can then read and display.

![Screenshot of MetaZ's main interface. The main section has a form that has the same metadata fields as iTunes.](/img/2013-04-MetaZ_Main_Window.png)

Using MetaZ, metadata fields that aren't editable in iTunes can be edited and
saved. For example, the Date field cannot be set in the Get Info panel in
iTunes, but shows up when set:

![A list of three episodes of Doctor Who. Under each episode is text displaying the date the episode was released.](/img/2013-04-Episode_Dates.png)

You might be thinking, "Great, now there's _even more_ data I need to find so
that my iTunes metadata is complete!", and you'd be right. However, I haven't
mentioned the best feature of MetaZ.

After importing a video file, MetaZ will automatically search
[Tag Chimp](http://www.tagchimp.com), [TMDb](http://www.themoviedb.org) and
[The TVDb](http://thetvdb.com) to find the appropriate data for that file,
including description, date and more.

Simply select a file in the right-hand pane, then once MetaZ has finished
searching, choose a metadata source in the left-hand pane. The middle pane will
then update with the data from your chosen source. Select the checkbox next to
each item you wish to save. You can also manually make changes in the text
fields if you want.

![The main section of MetaZ with the form filled in with data about an episode of How I Met Your Mother.](/img/2013-04-MetaZ_Loaded_Metadata.png)

When you are finished editing, click **Write** in the toolbar and the metadata
will be saved into the file. Once MetaZ has finished writing, iTunes should be
updated automatically with the new data. I've shown the process here with a TV
show episode, but the same applies for movies as well.

Keep iTunes OCD at Bay with MetaZ

[Letterpress](https://itunes.apple.com/gb/app/letterpress-word-game/id526619424?mt=8&at=10l7rn)
is the fun new word game from Loren Brichter, of Tweetie fame. Since you've
probably played the game before I won't go into details about the game itself
(you could always go to the
[Letterpress page](http://www.atebits.com/letterpress/)).

These are just some handy tips to help you do better when playing Letterpress. I
can't guarantee you'll win more games than you did before. 

### Play the longest possible variant

The rules state that you can't play a word which is at the start of another word
that has already been played. For example, if someone plays **PHOTOGRAPH**, no
one can play **PHOTO**. However, you _are_ allowed to extend previously played
words. If **PHOTO** is played first, then **PHOTOGRAPH** is still allowed.

Because extending words is allowed, your opponent can easily steal tiles back
from you by adding one or two letters to the end of your word. If you play
**DOLPHIN** and there's an **S** on the board, your opponent can take all the
tiles you just won by playing **DOLPHIN**.

To combat this, always try to play the longest version of the word that's
possible. Add **S** or **ING** to the end of your word to make sure it can't be
extended any further. Of course, this isn't foolproof, since if you play
**PLAYERS** it's still possible to play **PLAYED** afterwards, which steals most
of the tiles you just used.

### Remember the "cheating" words from Scrabble

Letterpress seems to use a similar dictionary to Scrabble, so it lets you have
the two-letter words some people consider "cheating":
[**QI**](https://www.merriam-webster.com/dictionary/qi) for when there's a Q but
no U, and [**ZA**](https://www.merriam-webster.com/dictionary/za) for when you
can't remember any other words containing a Z.

Obviously these words don't score you many blue tiles so use them only when
you're desperate for a word with an obscure letter.

### Don't forget about your own tiles

It can be very easy to focus only on stealing red and grey tiles, and forget
that you're allowed to use your own blue tiles to create words. You won't gain
any points for using blue tiles, but it might make finding a good word a bit
easier.

### Play for territory

Since you need to own the most tiles to win the game, protect the ones you own
by surrounding them on all sides. The best way to do this is to start in one
corner and work outwards. Here's an example of what I mean, starting from the
lower right corner:

![Eight images of a grid showing the progression of a Letterpress game. A dark blue region starts in the lower right corner and expands outwards in each successive image.](/img/2012-12-Letterpress_Territory_Example.png)

Playing this way might not keep the most important letters protected (if there
is only one E, for example, you'd probably want to grab that early on), but it
means you most likely have more tiles protected than your opponent.

### Have fun

Don't forget, the whole point of Letterpress is to enjoy the time you spend
playing it. There's no reason to even be competitive. You and a friend could
just try and find all the words on the grid with
[a certain theme](https://twitter.com/olivvysaur/status/282226813567131648).

How To Win At Letterpress

Use a passcode to keep your iPhone or iPad safe, but think four digit codes
aren't long enough? Since iOS 5, there has been an option to swap the 4-digit
numerical passcode for an arbitrary length alphanumeric one. 

To set up a longer passcode, open Settings then select **General → Passcode
Lock**. Now turn the **Simple Passcode** switch to the **Off** position.

![iPhone Passcode Lock settings with Simple Passcode turned off.](/img/2012-12-Passcode_Lock_Settings.png)

You'll be prompted to enter your current passcode (if you have one), and then to
enter your new passcode. With Simple Passcode turned off, you can enter either
numbers, letters or both. However, if you only use numbers in your new passcode,
you'll still be given the numerical keyboard on the lock screen.

![iPhone lock screen with a long passcode entered into a text field.](/img/2012-12-Long_Passcode_Lock_Screen.png)

You can also add letters to the passcode, but the regular iOS keyboard will show
up on the lock screen instead.

Longer Passcode on iOS Devices

One of the main features of iOS 6 on the iPad and iPod touch is the ability to
use a phone number for iMessage and FaceTime. Unfortunately it's not the most
intuitive thing to set up. 

### What you need

- An iPhone running iOS 6 or later
- An iPad or iPod touch running iOS 6 or later
- An Apple ID set up to use iMessage

### Method

1. Turn iMessage off on your iPhone. Open **Settings → Messages** and slide the
   **iMessage** switch to the **off** position.

2. Turn iMessage back on by sliding the switch back to the **on** position.

3. Turn off iMessage on your iPad or iPod. This can be done in the same way as
   on the iPhone. If you don't see a switch labelled iMessage, you should see
   your Apple ID's email address. Tap this and then tap **Sign Out** from the
   menu.

4. Turn iMessage back on on your iPad or iPod. If the switch isn't there, either
   tap **Use your Apple ID for iMessage** or enter your password, depending on
   what you can see.

5. You should see a notification such as, "+44 7700 123456 was added to iMessage
   on the iPhone 'Mr iPhone'". You will then be asked if you want to use this
   number for iMessage and FaceTime on the device you're using. Tap **yes** and
   iMessage and FaceTime will be set up with your phone number.

How to Use a Phone Number for iMessage on iPad and iPod touch

[Keyboard Maestro](http://www.keyboardmaestro.com/main/) is extremely powerful,
but sometimes it’s also really useful for simple things, too. Setting up
[TextExpander](http://smilesoftware.com/TextExpander/index.html) style
functionality only requires a couple of steps.

### The trigger

The first thing to do is set the trigger for the macro. From the New Trigger
dropdown, select `Typed String Trigger`. Then in the text box type the trigger
to expand. For example, for typing an email address a good trigger might be
`eml`.

The dropdown to the right of the text field works the same as the ‘case’
dropdown in TextExpander. Selecting `case must match` means that typing `Eml`
_won’t_ match `eml`. Choosing `case does not matter` means that it will.
Finally, `case affects actions` would mean that if you capitalise the trigger,
the expansion will be capitalised.

The last thing to do is make sure that the checkbox
`Simulate [X] deletes before executing` is checked, otherwise the trigger phrase
won’t be deleted before the expansion is inserted.

![Screenshot of Keyboard Maestro trigger settings set up as described above.](/img/2012-08-Trigger_Settings.png)

### The actions

There are only two actions required to turn the trigger into an expansion.
First, add an `Insert Text` action from the Text category. Leave the dropdown
set to `Insert text by pasting`, and type the expansion into the text area. The
Insert Token dropdown can be used to add all kinds of variables such as the
current date, the current iTunes track or the result of a calculation.

![Screenshot of Keyboard Maestro "Insert text by pasting" action described as above.](/img/2012-08-Insert_By_Pasting.png)

After setting up the expansion, add a `Delete Past Cliboard` action from the
Clipboard category. This is used because the Insert Text By Pasting action adds
the expansion to the clipboard, replacing anything previously copied. Change the
value to 0 (the default is 1) and the macro is done.

![Screenshot of Keyboard Maestro "Delete past clipboard" action described as above.](/img/2012-08-Delete_Past_Clipboard.png)

### The end

Here's what the entire macro should look like:

![Screenshot of the entire Keyboard Maestro macro, combining the trigger settings, insert text action, and delete past clipboard action. ](/img/2012-08-Entire_Macro.png)

Now in most applications typing the trigger will insert the text entered into
the macro.

TextExpander Functionality Using Keyboard Maestro

I recently received my [iZettle](https://www.izettle.com/gb) card reader as part
of their beta program. Anyone can sign up to the program, but I thought I'd
share my thoughts on the product (and to be honest, save you the bother of
getting one yourself).

### The reader itself

From a manufacturing perspective, the iZettle feels a bit cheap. Of course you
might expect this from something that will ultimately be given away free, but
even then this still seems flimsy. It only takes a small amount of pressure to
bend the top in towards the bottom. However, that said, the dock connector end
does seem fairly sturdy and doesn't feel like it could break off inside your
iPhone.

![The iZettle device. It's a black rectangle with an iPhone connector on one side and a slot for a card on the other.](/img/2012-07-iZettle.jpg)

Unfortunately, due to the iZettle's purpose, reading chip-enabled cards, the
thing is pretty big. When connected to an iPhone, the phone's size increases by
about a half, and once a card is inserted, that pokes out enough to make it
around two phone lengths long. If I was running a shop or a stand using the
iZettle as my only payment method I think I'd get a bit sick of carrying this
huge thing around.

![THe iZettle connected to an iPhone. A card is inserted into the iZettle and sticks out about halfway.](/img/2012-07-iPhone_iZettle_Card.jpg)

### Card support

This is the main problem with iZettle. The support for cards (at least in this
country) is downright terrible. The only cards supported are MasterCard,
American Express and Diners Club. That's it. No Visa, the most common card type
in the UK. In fact, because of this I couldn't actually test taking any payments
with the iZettle, because I don't know anyone with a MasterCard or Amex.

### The companion app

Truth be told, the iZettle app isn't actually that bad. It's clear and lets you
take a payment straight away after opening the app. You can take a payment
without using the card reader, but again, Visa isn't supported so I couldn't
test that out.

You can also use the app to keep track of cash payments as well, although
nothing actually happens in the app except a transaction is logged. The tender
screen on the iPad is very helpful though, showing three amounts that are most
likely to be paid that can be tapped easily, or allowing an amount to be typed.

![The iZettle payment screen. A total of £2.99 is displayed, and three buttons below the total show £3, £4, and £5 options.](/img/2012-07-Cash_Payment.png)

The iPad version of the app allows you to add products to a catalogue, then use
those products to build an itemised receipt that can be emailed to the person.

With regards to security, when taking a payment the cardholder has to sign on
the device, which renders the chip reader a bit useless seeing as reading the
magnetic strip is enough if you're authorising using a signature. If the
authorisation is done using a signature, the iZettle didn't need to be the size
it is, since it could have just been a small accessory the card can be swiped
through.

### Pricing

The good thing about the iZettle is you can pick one up for free at the moment
by [requesting an invite](https://www.izettle.com/#register) to the beta
program. I couldn't find any information about whether it will cost anything
once it is released generally. The app is also free to download.

When it comes to the transaction fees, iZettle takes 2.75% of all transactions
using a MasterCard or Diners Club card, and 2.95% on Amex transactions. If you
don't use the card reader and enter card details manually, the fee is £0.10 plus
3.5% of the transaction amount. These fees don't seem too bad compared to the
amount PayPal take, for example.

### Should I get one?

The answer at the moment would have to be no. Unless you happen to know that
every payment you're going to take will be using a MasterCard, you'll end up
turning so many people away it won't be worth getting out the iZettle each time
just to put it away again. The app is very nice, especially the iPad version,
but without good card support it's nearly useless.

Review: iZettle Card Reader

Is your iPhone, iPod touch or iPad having problems and needs to be restarted?
Read on to find out how to force your device to either restart or just shut
down. 

### Restarting

To force a device to restart, hold down both the Sleep/Wake and Home buttons
together. The screen will turn black, then the Apple logo will appear, at which
point you can let go of the buttons.

### Shutting down

If you need the device just to shut down and not turn back on, follow the above
steps, but once the Apple logo appears, only let go of the Home button and keep
holding the Sleep/Wake button.

How to Force Reset and Shutdown iOS Devices


There are many things I dislike. One of them is stale notifications clogging up
Notification Center on my iPhone and iPad. When I open an app from a
notification, I expect that notification to be cleared from the list, but sadly
a lot of apps don't do this.

I did some research and found out it's incredibly simple to clear out your app's
notifications in Notification Center.

If your application uses badges, you should be able to clear out entries in
Notification Center by setting your badge to zero:

```objectivec
[[UIApplication sharedApplication] setApplicationIconBadgeNumber:0];
```

Or if your badge is already set to zero, you can set it to non-zero, then back
to zero straight away and that should work.

```objectivec
[[UIApplication sharedApplication] setApplicationIconBadgeNumber:1];
[[UIApplication sharedApplication] setApplicationIconBadgeNumber:0];
```

If that doesn't work, you can try setting the list of scheduled local
notifications to itself; this keeps any scheduled notifications intact, but also
removes old ones from Notification Center.

```objectivec
UIApplication* application = [UIApplication sharedApplication];
NSArray* scheduledNotifications = [NSArray arrayWithArray:application.scheduledLocalNotifications];
application.scheduledLocalNotifications = scheduledNotifications;
```

I can't guarantee that this will continue to work forever; as of writing this,
it works with iOS 5.


iOS Development: Remove Old Notifications From Notification Center

Around the time version 10 was released, the option in iTunes to "Create MP3
Version" seemingly disappeared for a lot of people. It turns out, it hasn't been
removed from iTunes, but there's a setting you need to change to get it back.



If you've never changed any settings in iTunes, it's likely the option you'll
see if you right-click a track is "Create AAC Version". AAC is a great
alternative to MP3, since it generally gives better quality, but it's useless
for burning MP3 CDs, since you can't burn an AAC track to an MP3 disc. If you
try to burn a disc using iTunes and select "MP3 CD" you'll get this message:

![Error dialog in iTunes with a list of filenames. Each one says "Only files that are already in MP3 format can be burned to an MP3 CD.](/img/2011-08-Can't_Burn.png)

What you need to do is convert those files to MP3 format. However, in order to
do that, you need to get back the "Create MP3 Version" option. Here's how:

1. Open the iTunes Preferences and then open the General tab of the preferences.

   ![The General tab in the iTunes preferences window.](/img/2011-08-General_Preferences.png)

2. Near the bottom is an option which starts "When you insert a CD:". To the
   right of that is a button labelled "Import Settings..." - click that, and
   another window will open.

   ![The Import Settings window in iTunes. At the top is a dropdown labelled "Import Using", with the "MP3 Encoder" option selected.](/img/2011-08-Import_Settings.png)

3. At the top is a drop down labelled "Import Using:". Change that drop down to
   the "MP3 Encoder" option. Click OK on both windows and you're all set to
   convert tracks to MP3.

4. To convert a track to MP3 format, right-click it and choose "Create MP3
   Version". iTunes will create a second copy of the track in MP3 format.

Once all the tracks you want to burn are in MP3 format, you'll be able to burn
an MP3 disc just fine.

Recover iTunes' Missing "Create MP3 Version"

In Lion, Dashboard is given its own space, which is easily opened with a swipe.
That means (to me, anyway) that the Dashboard key on the keyboard (F4) is
useless. So I remapped it to open Launchpad. 

### What you'll need

- [FunctionFlip](http://kevingessner.com/software/functionflip/) by Kevin
  Gessner - this allows you to disable the special function of specific function
  keys.
- [OS X Lion](http://itunes.apple.com/gb/app/os-x-lion/id444303913?mt=12&at=10l7rn) -
  because, you know, Launchpad is a feature of Lion.

### Method

1. First off, you'll need to
   [download](http://kevingessner.com/software/functionflip/) and install
   FunctionFlip. It's a preference pane, so you'll be able to access it from
   System Preferences in the future.

2. Once it's installed, open it up in System Preferences (it should open
   automatically once it's installed). In the drop down list on the right,
   select the keyboard you'd like to remap the key on.

3. Now find Dashboard in the left-hand panel. It should be the fourth in the
   list. Check the box next to it, which will disable the special function of
   the key (Dashboard) and turn it into a regular F4 key.

   ![FunctionFlip with the F4 checkbox selected.](/img/2011-07-FunctionFlip.png)

4. Now click Show All at the top of System Preferences and navigate to the
   Keyboard preference pane. Open up the Keyboard Shortcuts tab once you're in
   there.

5. In the left-hand side of that tab, click on Launchpad & Dock. Now select Show
   Launchpad on the right-hand side. Double-click to the right of the selected
   row to edit the shortcut, then press F4 on your keyboard. That's it! Pressing
   the F4 key should now show Launchpad!

![The macOS System Preferences Keyboard Shortcuts pane. "Show Launchpad" is mapped to F4.](/img/2011-07-Shortcuts.png)

This is especially useful for those of us with a Magic Mouse, since the mouse
doesn't have a gesture for showing Launchpad.

Archive

2020

2018

2017

2016

2015

2014

2013

2012

2011