Pocket

The Pocket logo.
The Pocket logo.
The Pocket logo.

A nice little discovery today thanks mostly to this article. Pocket is a very handy free service that allows you to save web pages (mostly articles but videos and images too) for later reading. Not just reading though, which is one of the two cool features I’ll point out later. It has apps for desktop, Android, iOS and even things like Chrome Extensions. I have downloaded and installed the Chrome extension, Chrome App and app for Android (4.2.1). There are two main wonderful things about this app.

1. Auto-sync

As soon as you save to Pocket, it immediately pushes the content to all your other devices or places where you are logged in. So your phone can auto-download the content. (There is an option to make this only over Wifi). So as soon as I save an article on my PC, I can immediately view it on my phone. Okay, great you’re thinking. Why not just read it on my PC? Well here comes the second epic feature!

2. Text-to-speech

The Android app has been designed to integrate with Android’s built in TTS. In the menu of the app (when viewing an article) simply select TTS and you can listen to the article there and then – so much better than reading it! I can now do other things at the same time. Oh, but you don’t like the Google TTS voice? Not a problem. I searched the app store and quickly found IVONA. IVONA is high-quality, free TTS voices that install and can be selected for your phone. To install IVONA follow these steps:

  1. Go to the Play Store and search for IVONA Text-to-speech
  2. Download and install it
  3. Open IVONA Text-to-speech – this will take you to the IVONA website
  4. Go down the list and find a voice for your language then click on it to open it in the Play Store.
  5. Download and install the voice’s app.
  6. Run the voice’s app and it will download and install the necessary files.
  7. to set this as your phone’s voice go to: Settings -> Language & input -> Text-to-speech
  8. Select IVONA as your preferred TTS app
  9. Click the “Settings” icon next to the IVONA option
  10. Click “Settings for IVONA Text-to-speech” option
  11. Click on the voice you just installed

Done! Your new voice is installed. This voice will now be used for all apps on Android that use the built-in Android TTS service but Pocket is the first app I’ve found that will make good use of it. Enjoy listening to articles and queueing others up for later 🙂

1 bug in 5000 lines and it’s all thanks to…

Typescript.

TypeScript has to be one of the best new technologies that I am using this new year. After being offline for 7 days with my old Linux Laptop and just the latest Chrome browser, gEdit and the TypeScript compiler, I wrote over 5000 lines of code, testing it in just that one browser. With TypeScript picking up all my silly syntax errors and Chrome finishing off all the function/programmatic errors, the JavaScript that TypeScript helped me produce was next to flawless. I got home, tested it in all the major browsers (and some minor ones) and all I got, was one error in IE8 – even that barely counted as an error…

To clarify, the error I got in IE8 was simply the indexOf function not existing which, in a sense, is fair enough because IE8 is pre a lot of new features. (Though users who insist on not upgrading are more than a little irritating!) TypeScript and the TypeScript compiler really do make development faster, easier, much more robust and much easier to maintain.  Here’s just a few of the bets things is does: (I apologise now if this gets too close to a sales pitch for TypeScript, but it really has been that great to use!)

Static Typing

This has to be TypeScript’s most powerful tool – if it weren’t, what would be the point? I won’t discuss how to use it etc. since the TypeScript site does a good job of that but I will say that it works. Beautifully. Sure, when compared to properly typed languages such as C# it’s not quite as smooth and one or two of the jQuery definitions aren’t correct but it is smooth, easy and intuitive. There are other alternatives to TypeScript such as ones from Google, but as far as I can tell, you need to add definition comments  to everything. A messy and inconvenient solution. For every one line of code, I don’t want to have to write another that says what it was. TypeScript’s type definitions are inline using angle braces – a nice, simple solution that doesn’t impede my development at all. So a quick tip/trick then:

Got a variable that TypeScript says is of one type, but you know that it isn’t? E.g. a jQueryEventObject but you know really it is a MouseEvent? Well, there’s a nice easy hack to solve this but still keep TypeScript’s powerful type checking:

var event = <JQueryEventObject>{ };
var mouseEvent = <MouseEvent><any>event;

That simple cast to an any and then to the type you wanted solves the compiler issues and keeps TypeScript’s powerful static type checking later on in your code. Most of the time you probably won’t need this though – the provided function and type definitions are pretty accurate. I’ve only had slight issues with jQuery and had to extend the basic jQuery UI definitions file to include most of the basic of the UI widgets. My jQuery UI definitions file is downloadable for anyone to use, just click here (Note: File will be updated every so often – I will try and blog when I do so please follow me for updates).

Classes and Interfaces

JavaScript is a pain when it comes to developing large projects where you’ve got lots of UI controls and really you’d like a class for each with a common interface to handle them. To do this in JavaScript would be a nightmare to write manually, which is largely what the world has been stuck with. However, with TypeScript, life just became a whooollle lot simpler! Modules (namespaces), classes, interfaces, extension (inheritance) and implementation (implementing an interface) work just like Java as per standards but when you combine that with VS2012 intellisense and the TypeScript compiler, you get neat, efficient JavaScript that just works. And not just in IE, in any browser.

Declarations and Inferred Types

Okay so you might think I’m just listing TypeScript’s main selling points and perhaps I am but it’s only because it works – superbly. Declaration files allow you to take away that nasty native JavaScript from with your ts files and just declare what else will be included in your final HTML pages. And if you can’t be bothered to declare types for everything, the TypeScript compiler will infer the types based on first assignment – it will even infer types for native JavaScript code to help protect you! (or at least that’s what it seems to be doing 🙂 )

Overall Review

I’m sold on TypeScript. If I were in a big company now, this would be a must on the upgrades list. Microsoft have done a fantastic job with the compiler – it produces reasonably efficient, neat JavaScript which sticks to standards so well, that if it works in one browser, you can be certain it’ll work in all the major browsers (Firefox, Opera, Safari, Chrome, IE 8-10 and of course every Android or iPhone browser I have gotten my hands on). Not only that but when it comes to debugging it, the unminifed files are so perfectly laid out (retaining much of the layout of the original TypeScript), that I’ve had no issues with getting lost in the mountains of code that go into a complex UI.

A small project

A small example of just one part of a project that I am working on is shown below:

HTML5 (SVG) Gradient Picker using TypeScript
An HTML5 (SVG) gradient picker written using TypeScript.

At the top of the image you can see the gradient picker bar with the colour stops hanging below. The rest of the page is a large-scale, change-as-you-edit preview of the gradient that fills the whole page. This has compatibility with all the latest major browsers and also IE9 and mobile devices. Using SVG allows for the best compatibility while also using the least JavaScript processing time and is probably the easiest way to create linear and radial gradients that work across the web. Sadly, I can’t put the code up for the world to use but I can say that TypeScript made programming the whole thing much, much easier. I was able to extend (inherit) from an Event Manager class that I created a month ago to handle creating and firing custom onChange events etc. and easily use this jQuery ColorPicker plugin by adding to the jQuery declarations file. Even better, I am now able to use the gradient picker just like I would a UI control in C#. Just add a reference to the ts file, then create an instance of the control with its container div id! Very similar to jQuery, but using my own internal standard and written in TypeScript. If at any point I need to add to this, I can easily just inherit from my original code and then extend it as much as I like. Something that always feels a bit awkward in jQuery really…you don’t get proper extension really.

Converting to TypeScript

While converting my current JavaScript projects to TypeScript was a fairly laborious and somewhat slow process, I was able to dramatically improve the maintainability of the code. Since re-writing in TypeScript meant re-writing a lot of the code, I decided to do a full re-write from the ground up.  I should point at now that I didn’t have to re-write everything. TypeScript will allow you to put plain JavaScript in ts files and compile it – you just don’t get as many of the benefits of TypeScript.

Re-writing meant I could build in future-proofing, update from XML to JSON data format, improve stability and best of all – readability! If there is anything web developers hate JavaScript most for, it has to be that it is notoriously difficult to read. By the time you’ve finished adding in code to fix browser quirks and used all the little tricks you know to improve running speed, your JS code just looks messy. Even the TypeScript compiled JS code isn’t that nice to read. I think the best I’ve seen is jQuery but they do an extraordinary job of sticking to a neat layout – something a lot of developers just don’t do. (Not that I’m any better a lot of the time). But TypeScript has many of the same code formatting features as C#, which means your code looks good. I like the Visual Studio way of laying code out, and I love that it will now do it for TypeScript. Can it get any better? Well it certainly does. VS2012 will even allow you to collapse code blocks, comments and all the usual things you’d expect from a sane language. Unlike old versions of VS which didn’t really support JS or CSS, VS2012 does code collapse, decent syntax highlighting – the full works – for HTML, CSS, JS, TypeScript – you name it!  And with Web Essentials, CSS is even simpler too – auto add browser specific modifiers etc. – that’s a different discussion though. Ultimately, TypeScript and VS2012 are the reason I  can now open up my code and jump straight to where I want to be and read the code easily.

Conversion to TypeScript also allowed me to use proper inheritance. Duplicate copies of code is always bad. It’s even worse when you know you have duplicate copies. It becomes horrendous when you have to regularly make changes to the bit of code that you know is duplicated! I had this very same problem in my project. One bit of code, used in two places. In one place, it had it’s own “class” per se and worked fine. In the other, it was included within an extension class. Except that they were independent of each other. It wasn’t really an extension class, more of a duplication and addition. The JS was so complex, I found it impossible to get inheritance working let alone have just one copy of the code. From a maintenance point of view, this was awful. However, using TypeScript and its powerful module, class and interface capability, I was able to write just one class and then extend for my other class. One piece of code, in one place and any changes get applied in both places automatically – #wonderful.

Any projects anyone?

If you’ve got a project that you’re doing in TypeScript or you’d like a little help to get you started, please contact me! I’d love to hear about what others are doing and am always happy to help. Just visit my Contact page for my email address.

Have fun and happy coding!

(Please like/tweet if you liked this article or found it interesting/helpful!)

Sharing Mouse, Keyboard and Clipboard

So you’ve got a computer and a phone – right? Just like most people…but what most people don’t realise is that you aren’t limited to just using one at a time. We’ve all probably heard of dual-screen (one computer, 2 screens, double the area to work on) but until recently, I hadn’t heard of mouse/keyboard/clipboard sharing (nicely shortened to ShareKM). ShareKM allows you to share your computer’s keyboard, mouse and clipboard with your Android phone. It’s very simple, very easy to set up (well, with some caveats) and above all, allows you to utilise the power of all your devices at once!

I’ll deal first with sharing from an Android (Galaxy S2, but any Android phone would do) to a Windows 7 PC.

Requirements:

  1.  A Windows 7 PC (and enough permissions to install stuff)
  2. A Rooted Android Phone (Galaxy S2)
  3. Access to the Play Store on said phone

Why Rooted?

Well, “rooted” really just means that apps can have access to Android’s (i.e. Linux’s) low level interfaces and allows them to override (or, if you prefer, “interfere with”), the main functions of the operating system. Our use of this is to override the default kayboard/mouse I/O operations and also to take control of the clipboard. The app also takes over the phone’s screen rendering to place a mouse cursor on the screen and also adds 2-touch mouse support (Ctrl+Left Click+Drag Mouse).

Most phones are not rooted when you buy them. Most contracts do not allow you to root your phone without voiding the warranty.

It’s at this point that I have to say, continue at your own risk.

Though I would not regard what we are doing as particularly risky. I spent about a day studying online forums and researching how to root my phone safely and I haven’t looked back since – I haven’t had a single problem, I haven’t ever bricked my phone and I still have all the music on my phone that I did 3 months ago – I haven’t lost any data (just a few app settings…but not data). So, to root your phone you…search on the internet. Every phone is different and there isn’t really one set way of doing it. It’s been quite a while since I did mine but here’s a few pointers and links to help:

  1. Rooting your phone means changing the fundamental way your phone works
  2. This means changing the operating system permissions to allow you to grant apps root access
  3. Underneath the Operating System is what is called the Kernel
  4. The Kernel handles A LOT of the fundamental workings of your phone. Crucially, it can handle root access
  5. Stock (i.e. manufacturer-installed) kernels block root access.
  6. Your aim is to replace the kernel with one that allows root access.

Point (6) is where the risk is. The kernel handles the boot up and low level commands of your phone. Without it, your phone just won’t run. If replacing it goes wrong and you can’t boot into Download Mode (which allows you to replace any file on your internal SD using software on your computer which would allow you to try replacing your kernel again till it works), then your phone is bricked. Sounds scary? Please don’t be. Bricking your phone is surprisingly difficult unless you deliberately ignore advice or rush through things without thinking. Follow tutorials/videos (mostly videos) properly, and you’ll be fine. If you don’t understand something – research it! Google is a wonderful tool 🙂

You’ll here the terms ADB, Odin, Heimdall, Download Mode, Kernel, Recovery Mode and ClockworkMod (CWM) used a lot. A brief summary of what they are:

  1. Kernel – see above paragraphs.
  2. Download Mode – Instead of booting into the main operating system, your phone starts a different system which allows you to send ADB commands to it via USB. (Please don’t tell me you don’t know what USB is…)
  3. ADB – Android Debug Bridge. Okay so it sounds unrelated but ADB allows you to send the phone a whole range of commands including ones to replace files, for our purposes, the kernel files.
  4. ClockworkMod (and Recovery Mode) – A very talented programmer took an Android Kernel and adapted it to add an extra mode (similar to Download Mode) except it is totally separate, it runs Recovery Mode, it allows you to “flash” i.e. overwrite almost any file in the system making installing new operating systems or kernels very easy. It also provides extremely useful (if not vital) backup and restore functions. ClockworkMod is not installed by default – the first time you root your phone, this will probably be the kernel you install as replacement (or at least a variant of it – there are many).
  5. Odin/Heimdall – These are pieces of software that run on your desktop (or laptop) computer. They connect to your phone via USB and send the ADB commands along with any specified or necessary files. They are a nice way of dealing with ADB.

So to root your phone you’ll do something along the lines of:

  1. Download new kernel files
  2. Download and install Odin or Heimdall (one or the other, doesn’t make a great deal of difference. I used Heimdall but Odin seems to have a better user interface.
  3. Make sure phone is fully charged – this really does matter!
  4. Reboot phone into Download Mode (usually press and hold Power, Home and Volume down buttons together, then press Volume Up to confirm that you wanted Download Mode).
  5. Plug phone into computer using USB – don’t expect this to be enough power to keep your phone charged; it may well not be!
  6. Start Heimdall or Odin
  7. Flash (“copy”) new kernel files to phone, overwriting the stock (default) kernel.
  8. Eject phone safely
  9. Disconnect USB, close Heimdall/Odin
  10. Power off phone.
  11. Power on phone as normal – don’t hold any keys etc.
  12. Phone should boot as normal.

After your phone starts up, you may well want to immediately shut it down and boot into Recovery Mode and make a backup. This will prevent you losing any data in the future and avoid the risk of permanently bricking your phone. I have not succeeded in losing any data because the one time something went wrong, I simply restored to my previous backup! It is helpful if you have an external SD card as the backups are quite large.

Helpful links (as promised):

  1. The best tutorial I know of – this guy is great! Straight forward, to the point and easy: Galaxy2Root.com – How to root S2  This is a 9 step tutorial with all the downloads that you need.
  2. The Odin XDA Forum page, for latest versions: http://forum.xda-developers.com/showthread.php?t=1738841
  3. Heimdall home page: http://www.glassechidna.com.au/products/heimdall/ (Scroll to bottom of page for downloads, no install required)

Advice: If searching Google, the XDA Developers site is very helpful!

Setting up ShareKM

ShareKM works via Wifi, USB or Bluetooth. The app is called “Share Keyboard & Mouse (Beta)” but really, apart from slightly poor English, there isn’t much “beta” about it. If you have a few connection issues at first, reboot PC and phone, then plug in your phone (via USB – recommended for best responsiveness), then start up the phone client and then finally the desktop client. This only works on Windows! Search the Play Store for ShareKM, install the app.

Now go to: https://sites.google.com/site/droidskm/ then download and install the Desktop Setup file.

To set it up:

  1. Disconnect phone from computer (and close the app if you have opened it)
  2. Start ShareKM(USB) – it installs a different link for USB, Wifi and Bluetooth. Use USB for best performance.
  3. If the window is hidden, right click the tray icon and click “Show” (in bold at the top).
  4. Click “Setting” (yes, it should have an “s”) in the bottom righthand corner.
  5. Select where your phone is relative to your screen (probably “Bottom”)
  6. I suggest you ignore the other optins for now – fiddle with them later if you like.
  7. Click “OK”
  8. Now, start up the phone app
  9. Plug in phone using USB
  10. Both should say connected, then the phone app will hide itself.
  11. Your keyboard, mouse and clipboard are now shared!

Sharing between computers – Synergy

I also share my keyboard, mouse and clipboard simultaneously (and stably) with my Debian Laptop. To do this, I use are rather more professional looking piece of software but one which is still free and a completely open and donation funded project, called Synergy. Synergy does the same as ShareKM but between PC, Linux or Mac (in fact, ShareKM was created based on Synergy!). Just go to Synergy-foss.org and download the software for your systems. Its very reliable and very easy to set up.

Enjoy the delights of making better use of your hardware and utilising all that power “to the max”!