tomo's blog

Should you use Kotlin?

tomo — Sat, 08 Jul 2017 05:53:09 +0000

Submitted by tomo on July 8, 2017 - 12:53pm

I spent some time looking at a relatively unknown programming language called Kotlin today. Kotlin was designed by a company rather than by academics in a computer science department. The company happens to make and sell an IDE so perhaps they are hoping that as the language becomes more popular and programmers need an IDE to use it they will become customers of JetBrains, the company behind Kotlin.

The basic description of the language goes like this: Kotlin is a statically-typed programming language that runs on the Java Virtual Machine

Kotlin is yet another language that compiles down to other bytecode "languages". It can even compile to JavaScript so that it can be run in browsers or V8. Thus it is a lot like Scala (which normally compiles for the JVM but also has a compiler to JavaScript).

It aims to fix many of the problems of Java, yet be usable by mere mortal coders unlike Scala.

Whereas Java programs can only be object-oriented, Kotlin can have simple procedures as well.

Since the main compile target is the JVM, Kotlin makes the most sense as a Java replacement, e.g. for Android development. Google is now supporting this internally.

Kotlin does not make sense for web development or systems programming.

Testing Bitcoin with Testnet wallets and coins

tomo — Tue, 27 Jun 2017 13:21:00 +0000

Submitted by tomo on June 27, 2017 - 8:21pm

crypto bitcoin

Bitcoin is, among many things, a software system with many participants running Bitcoin software and who all connect to each other over the internet forming a Bitcoin network. It's a live system yet the software that runs it is continuously under development. This is what the Bitcoin Core dev team does, and sometimes they allow other people to participate in development like an open source project. There are other developers who also develop other Bitcoin code which fulfills the same purposes. Then all of the various Bitcoin nodes run a version of the software.

Of course, any online software needs a safe place to run in development and be tested. For Bitcoin, this is called Testnet. Bitcoin's Testnet is an actual separate Bitcoin blockchain and all the nodes or miners which connect to or mine blocks for this blockchain. It's like if there was a backup copy of the Internet which had its own shadow websites and browsers which could browse them and the information on the shadow Internet was not the same as the real Internet.

To use Testnet as a consumer (i.e. to send or receive Bitcoin transactions) you need a wallet like with Bitcoin. But the wallet needs to support testnet. Assuming you don't want to download the testnet blockchain locally and use a heavy wallet, there are a few light wallets which support testnet.

Copay.io has a multi-platform (including binaries for OS X) wallet which allows you to configure wallets for testnet. Just create a new (personal) wallet and in the advanced options enable the checkbox labeled Testnet. Then use it like you would a normal Bitcoin wallet, but with testnet addresses.

Note: Copay doesn't support signing messages (testnet or otherwise)

Electrum is another light wallet which connects to servers instead of using a local copy of the blockchain. To use Electrum with Testnet just run it with the --testnet argument. E.g. /Applications/Electrum.app/Contents/MacOS/Electrum --testnet

Note: You might find a working testnet Electrum server here: list Right now testnet.hsmiths.com:53012 using ssl is working.

Electrum does support signing messages. Unfortunately, currently all known testnet servers are down so you should try Copay unless you need message signing in which case you can sign messages with another piece of software using an exported copy of your Copay wallet (you could import into Electrum even).

There was a website called TestnetWallet.com but it has been offline. It was basic, no support for message signing.

You could also try something like Bitcoin Signature Tool just to do the message signing.

Mycelium is an Android Bitcoin wallet which has a Testnet version. This supports message signing. It's Android only and so, while convenient for transacting while outside, it's not as convenient as a desktop wallet for testing.

Once you have a testnet wallet, you need some coins. Obviously you don't want to waste real bitcoins on testing and they won't work anyways. So you need to either mine some testnet coins (in which case you didn't bother fussing with a light wallet) or get someone to send you some. You shouldn't have to actually buy testnet coins.

You can get free testnet coins from a testnet faucet. They often go down and run out of coins. This one works for now: https://testnet.manu.backend.hamburg/faucet

Just get a small amount of testnet coins (as in a fractional amount of a single testnet BTC) from a faucet and test with even smaller amounts and send some back to the faucet if you can.

@mixin and other CSS @at-rules in Sass/SCSS

tomo — Tue, 27 Jun 2017 08:34:41 +0000

Submitted by tomo on June 27, 2017 - 3:34pm

scss css sass

You've probably seen CSS rules which start with the at-sign such as @font-face for custom fonts or @media used for responsive styling based on screen size. Maybe you've even used @keyframes for CSS animations. These so-called at-rules can go around normal CSS rules (normally a rule would simply be one or more selectors followed by lines of rules within curly braces).

But the @-rules are rarely sprinkled throughout a stylesheet.

In preprocessed CSS like Sass, many new at-rules are possible. Here we're using Sass/SCSS.

What's SCSS? It's Sassy CSS, and .scss is the new, preferred Sass file extension. Use .scss instead of .sass and the old grammar.

Sass brings with it many of its own @-rules of much more variety than normal CSS supports. Think of the Sass at-rules as new keywords (like the reserved words in a programming language). Basically, any new keyword which Sass adds is preceded by @, and other programming language-like features in Sass use prefix characters like $ for variables (also :, %, #, &).

Sass also includes at-rules which already existed in normal CSS but gives them a slightly different meaning. This includes @import and @media.

Other useful Sass at-rules are @extend, @include, @at-root, as well as "control" words useful in functions for adding logic: @if, @while, @each, etc.

But a really useful feature of Sass is the @mixin, and related at-rule @function. The two are similar, providing reusable shortcuts to cut down on repeating big chunks of code. But a mixin is a type of macro, perhaps familiar to C-language family users or even assembly language programmers. Macros are preprocessed and churn out code in the same language as the source. A function, on the other hand, is written in the programming language and executed. So they are processed at different levels and a macro is processed before a function or any other code.

Sass mixins are useful for simplifying many lines of vendor-specific rules (e.g. rules that start with -webkit- or -moz-, etc.) for new experimental CSS features into a single line. This line then expands into all the vendor rules because they are generally very similar lines with a single value. This value can be used by the mixin as an argument, much like a function.

There is about to be native support in CSS for mixins. However, the native mixins will not support using arguments and the syntax is different from Sass mixins. So it will still make sense to use Sass and preprocess into native CSS.

If, instead of repeating chunks of text, you want to calculate values, then use Sass @function instead of @mixin. A function can use any math expression that can otherwise be used in Sass, as well as having controls (like @if or @each) to take different paths using logic and looping.

How to read a SPF record and allow Google Apps Gmail to send for your custom domain

tomo — Sat, 23 Jul 2016 05:28:06 +0000

Submitted by tomo on July 23, 2016 - 12:28pm

spam dns spf email

An SPF record is a hack. It's a way of using the DNS protocol to say who is allowed to authoritatively send email as a domain name. It does this by using a DNS TXT record (as opposed to an A or MX record). TXT can contain any text. An SPF record is a specially encoded TXT record like this:

"v=spf1 ip4:198.51.100.26 -all"

The v=spf1 indicates that this is an SPF record, considered version 1 of the spf standard.

After the version, there are any number of 'directives'. In this example, there's only 1 directive and that is ip4:198.51.100.26. The type of directive here is ip4 but it could also be a or mx or include or ipv6. It can also be ptr or a few other things. And the final -all can be thought of as the final directive which is a catch-all. If it wasn't at the end, then no other directive after it would ever be matched. It is meant to fail any query on this spf record which doesn't match any earlier directives and the minus sign before all signifies that it fails. Other symbols instead of - could be + (pass), ? (neutral), or ~ (soft fail). If there's no sign then neutral is assumed.

So to create a SPF record for use with Google Apps for custom domains, first we go into our custom domain's DNS records settings. We create a new record of type TXT. The value starts with: "v=spf1 -all"

Now, nothing will be able to pass spf for your domain. So we need to add directives which will pass. The directive we want for Google Apps then we add the directive include:_spf.google.com so the record becomes: "v=spf1 include:_spf.google.com -all"

Now, this form of -all is strict and may cause some mails sent from Google to fail. To loosen the restriction change it to ~all instead: "v=spf1 include:_spf.google.com ~all"

Once you're finished saving your TXT record (and have kicked bind/named if needed) then you can do a quick validation test of your new SPF record using the tool found here

Import multi-line cells in CSV format into Google Sheets

tomo — Wed, 20 Jul 2016 06:13:04 +0000

Submitted by tomo on July 20, 2016 - 1:13pm

csv spreadsheet google docs

In Google Sheets (and Excel or Mac Numbers should be similar for most of this), you normally enter a cell's value by hitting enter which moves to the next cell. But if you need multiple lines in a single cell, you need to know the trick of holding command/Apple-key when pressing enter.

If you want to import a CSV file into Google Sheets but get the same effect, then you need to escape the new-line markers.

First, a cell which contains more than one line (instead of each line being on a new row) needs to be "escaped" with double quotes at the start and end of the cell's value. Next, your file needs to use the "carriage return" (CR) character to demarcate new rows instead of just a newline (LF - line feed). In most programming languages, a new line ends with the "\n" special character. But for the format we want, we need only use "\n" for separating lines within a cell. Then we need to use the "\r" carriage return character to separate rows.

Example:

apple,"From time to time
The clouds give rest
To the moon-beholders."\r
potatoe,"A single line"

You can verify the format which Google Sheets expects for a CSV import by creating a CSV export from Google Sheets, and having cells with multiple lines in it. Then open the resulting file in a code or text editor which can display DOS file endings (carriage returns).

JavaScript Namespaces and Closures instead of Global Variables

tomo — Tue, 12 Jul 2016 07:07:00 +0000

Submitted by tomo on July 12, 2016 - 2:07pm

javascript closure namespace

Have you heard? Global variables are bad, mmkay? So what should we do if we want to create a variable in our script and be able to refer to it elsewhere, globally?

What's in a Namespace?

A JavaScript namespace is just an idea or practice rather than an explicit feature of JavaScript. That is, you don't create a "namespace object" or declare a namespace. Instead, you would implement a namespace by creating and using an object which would contain sub-variables within it, so that those variables didn't pollute the namespace of the global scope (i.e. everything under the window object in the JavaScript DOM).

var aNamespace = {};
aNamespace.aVar = 'A public variable';
aNamespace.getAVar = function () { return aNamespace.aVar; };

Why do we need this? As JavaScript scripts get bigger, as they include more 3rd party libraries, there is more chance for variable naming conflicts. Creating variables inside a namespace reduces the possibility of conflict to just the name of the namespaces colliding, which can happen with libraries which use the $ variable such as jQuery. If you're using jQuery and another library at the same time which defines $ for its own use, then your code needs to be able to refer to the correct $ object depending on where it's called. The solution is to create an enclosing function around your jQuery code, passing jQuery in as a local variable $, e.g.

(function($){
  // now $ is a local variable, not the global one
  $('#foo').bar();
  $('.bar').baz();
  $('#foo .bar').show();
})(jQuery);

This example doesn't demonstrate namespaces, besides jQuery being a namespace, but shows how variable scoping inside functions can be used to separate or protect a variable in the global scope.

Closures returning namespaces

In the first example, we showed a simple namespace which demonstrated variables and methods (which is just a function in a namespace, there's no other distinction within JavaScript). A namespace's variables and functions can be defined when the namespace is defined or added to the namespace afterwards. But what if we have a lot of variables, including only internally-used ones, and member functions which are just helpers and don't need to be used outside the namespace? This is where we want both private and public members. But JavaScript has no private or public keywords! The concept, like namespaces, doesn't exist as a native language feature of JavaScript. But we can still use normal JS objects to implement private properties.

var aNamespace = (function () {
  var aPrivateVar = 'This is private and cannot be accessed directly';
  return {
    aPublicVar: 'This can be accessed directly',
    getPrivate: function () { return aPrivateVar; },
    setPrivate: function (v) { aPrivateVar = v; }
  }
})();

This code (1) creates a namespace, (2) creates a closure around private variables in the namespace (by returning a reference to a function which references a variable defined in the scope where the function was defined thus forcing the variable to remain accessible by that function when that function is called even when execution is outside the parent), (3) creates an anonymous function which returns the namespace object and then immediately calls the anonymous function to return the object to set aNamespace to it.

There is also the convention of using underscores before property names to have them be considered private instead of public but doesn't actually offer any protection unlike the above closure pattern which doesn't provide any backdoor way to access the private members.

Cross-platform node scripts: better-npm-run to the rescue

tomo — Mon, 06 Jun 2016 04:47:55 +0000

Submitted by tomo on June 6, 2016 - 11:47am

node.js javascript

We know that Node.js is awesome and JavaScript is the ultimate cross-platform language. Node has support for Windows despite the node command being a command line program. Windows users can use the command line shell for node. But the Windows shell environment isn't completely compatible with what Unix/Linux/Mac users are used to (i.e. Bash). The npm package Better-npm-run helps deal with running tasks with node across platforms including Windows.

Get it here: https://www.npmjs.com/package/better-npm-run

This package enhances what your scripts in your package.json for your node project can call. So instead of writing complex command lines which will only run in a POSIX shell (or not, but definitely not in cmd.exe) you can specify the various command line parameters such as inline setting of environment variables (e.g. PATH=/foo/bar). Windows shell also doesn't support the conditional && to run another command on one line depending on the return value of the left-hand side command.

Unfortunately, for more advanced stuff which can't be supported just by adding configuration to package.json, they recommend creating .sh shell scripts and calling them. Thus you'll still have problems running the same code and configuration on Windows.

There are other npm packages which help you right npm scripts as configuration rather than command lines, e.g. cross-env. Using this approach, it is possible to take over the duties of Grunt/Gulp with just node scripts and packages.

Note: better-npm-run should be a devDependency and be installed on the platform where it will be run. A local relative install of better-npm-run on one platform like Linux will not then run on Windows.

Web viewports for mobile responsive websites

tomo — Mon, 16 May 2016 00:39:00 +0000

Submitted by tomo on May 16, 2016 - 7:39am

mobile web responsive css

What is a viewport? You may have seen the meta-tag named "viewport" on newer mobile-friendly websites. The mobile (iOS) version of Safari introduced the "viewport meta tag" and "scale" on the viewport for mobile (scale optionally being one of the special values minimum-scale, maximum-scale, and user-scalable).

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

A viewport is like a logical window. You are on one side of the window looking through to the website. Sometimes the window (viewport) is big, sometimes you stand close to it. In some cases, you can see all that there is to see in the window, other times the walls around the window block some part of the view.

Confusingly, there are two different viewports, the layout viewport which is the whole rendered web page whether you can see it all or not, and there's the visual viewport which is the window metaphor I used above.

For normal desktop websites viewed on a mobile device the layout viewport will be much bigger than what's visible on the screen and the screen will be zoomed into some main part, as if through a window or camera viewscreen (this is the so-called visual viewport) of the content (text) and the text will be big enough to be legible. On desktops, the viewport will be the size of the browser window.

For this reason, many websites explicitly set the viewport metatag to "width=320, initial-scale=1". A lot of smartphones (iPhones and older Androids) have a width of 320 CSS pixels in their visual viewport (320px width in portrait) and so the mobile website will fit perfectly and will not be zoomed in at first. Trying to solve more problems, by limiting scaling (e.g. setting minimum-scale and maximum-scale both to 1.0 in the meta tag) fixes some problems but can prevent people who need to zoom to view your site to not be able to use your site now.

But a lot of smartphones will say there are more pixels, and what that means is confusing. When it comes to mobile devices and CSS, a pixel is not a pixel. With denser screens (think Retina), there can be more than one hardware pixel for a single CSS pixel.

If that's not confusing enough, consider all the possible "widths" for a web page we now have in CSS: width of the html element, or the body element, the desktop-browser-window-viewport width, etc.

Besides setting a value for viewport width in the meta value, we can use media queries (@media in CSS).

Height works similarly to width but can usually be ignored if you take care of width.

Embed a YouTube video player and control it via JavaScript

tomo — Fri, 13 May 2016 21:32:09 +0000

Submitted by tomo on May 14, 2016 - 4:32am

youtube javascript mobile safari

YouTube has long made it easy to share and embed videos into websites by giving you the HTML code to just copy and paste wherever you like. Over the years, different technologies have been used to play videos on the web, from Flash object elements to pure HTML5. YouTube's newest API for adding videos to web pages takes care of the technology, automatically choosing the best delivery method on a user by user basis.

YT did have something called the "YouTube JavaScript Player API" but this is out of date so don't use it. Instead use the new YouTube IFrame Player API, so called because it creates an iframe which loads YouTube and lets YT handle loading the right code, e.g.. Flash if it's needed.

With this API, you can programmatically load videos (or even lists of videos), step into them in the middle of the video if you wish instead of just the beginning, and play the video triggered by JavaScript. This means you could have a video playing when the page loads, or seconds after the page loads, or triggered by events like scrolling down or pressing keys or clicking the mouse. You can really control the video player however you want and can create your own custom interface for it.

Get a player object with YT.Player.
Load a video into the player: loadVideoById (pass in videoId, which you can get from the video's URL).
Play it! player.playVideo()

There are two problems with YouTube control under JavaScript. A big one is that iOS Safari doesn't support it! JavaScript on Safari cannot cause a YouTube player to play or be controlled. If you need something that works for iPhone/iPad users, then you need to just show them a normal embedded YouTube player and tell them to play it themselves. You can't create a custom player interface for them.

Another problem with YouTube JavaScript on mobile is timing. Mobile browsers (like Chrome on Android) are running JavaScript slower than desktops to begin with. There's also the issue of buffering videos. I've found that smartphones using the same web code and the same Internet connection buffer more often when playing a video. You can detect buffering by subscribing to the player's onStateChange events, which will fire when the player starts playing, is paused, and also when buffering.

Even when accounting for buffering, I've found that the player's events can be delayed significantly, or that player actions happen significantly before the events fire. If you are trying to control the player using timers (setTimeout) then you'll be off by a second or more on mobile.

If you want to play a segment of a video (e.g. seeking to time 31.5 seconds and playing for 28.5 seconds) then you can achieve it more accurately using the arguments passed in when you load the video. Use the options startSeconds and endSeconds.

How to detect a swipe touch event on mobile browsers with JavaScript

tomo — Fri, 13 May 2016 17:19:00 +0000

Submitted by tomo on May 14, 2016 - 12:19am

javascript mobile swipe

Browsers have supported various mouse-based events like clicks, down to the detection of when the mouse button is down and when it's released. You can know the coordinates of the mouse cursor, all in JavaScript. Mobile interfaces have brought some new gestures beyond what desktops provided. One big set of such UI events is from the smartphone's screen allowing touch and even multi-touch. Multitouch allows more types of UI events.

Many mobile apps support swiping, not just as a way to move a visible object around thescreen but applied for the whole screen. Tinder uses left swipe and right swipe to make processing potential sexual encounters quicker. Ebook readers use the same motion to flip through pages.

Some browsers support swiping, and all the main mobile browsers support it. There are some desktop browsers, like Firefox, which don't support the touch events which other browsers implement.

To detect swipe motions in JavaScript in a browser you can simply subscribe to the tocuhstart and touchmove events. In the callbacks to those events you'll receive event objects with an array called touches as a member, which has the X and Y coordinates of where the touch occurred. So you note the coordinates when a touchstart happened, then when a touchmove occurs afterwards, the vector between the two coordinates from touchstart to touchmove is the swipe motion. This is different from a click, but requires the user to put their finger down and then move it across the screen to another position.

Here's an example from StackOverflow:

document.addEventListener('touchstart', handleTouchStart, false);        
document.addEventListener('touchmove', handleTouchMove, false);

var xDown = null;                                                        
var yDown = null;                                                        

function handleTouchStart(evt) {                                         
    xDown = evt.touches[0].clientX;                                      
    yDown = evt.touches[0].clientY;                                      
};                                                

function handleTouchMove(evt) {
    if ( ! xDown || ! yDown ) {
        return;
    }

    var xUp = evt.touches[0].clientX;                                    
    var yUp = evt.touches[0].clientY;

    var xDiff = xDown - xUp;
    var yDiff = yDown - yUp;

    if ( Math.abs( xDiff ) > Math.abs( yDiff ) ) {/*most significant*/
        if ( xDiff > 0 ) {
            /* left swipe */ 
        } else {
            /* right swipe */
        }                       
    } else {
        if ( yDiff > 0 ) {
            /* up swipe */ 
        } else { 
            /* down swipe */
        }                                                                 
    }
    /* reset values */
    xDown = null;
    yDown = null;                                             
};

There are also libraries that can do this for you, like Hammer.js. Hammer.js does a lot more than just swipes, it does pinches, rotates, and more, but adds another dependency to your project, even if it is smaller than alternatives. It's also buggy (while doing way more), whereas the above works on my Android devices.

There's also a dead project called Swipe.js.