Matias Singers

Unicode symbol as text or emoji

2015-04-21T00:00:00+00:00

John Gruber asked on Twitter how to force a unicode symbol to render as text insted of emoji. Jason Weather replied that appending U+FE0E forces the symbol to render as text.

I had recently researched a bit on the inner-working of the new emoji skin tone modifiers¹ in Unicode 7.0.² The basics: if a emoji skin tone modifier immediately follows certain characters they should be rendered as a single glyph.

See Unicode technical report #51 for more info.

Standardized variants

The character mentioned by Jason on Twitter is a variation selector under the standardized variants sequence in Unicode 7.0, U+FE0E is named VARIATION SELECTOR-15.

Variation selectors:

“Combining characters; in conjunction with the preceding character these indicate a predetermined choice of variant glyph”
— Unicode Consortium U+FE00 code chart

The basic functionality of variation selectors are comparable to the emoji skin tone modifiers in that they choose a certain variation of the preceding character.

Currently only VS-1, VS15 and VS16 have been defined and implemented, check out a list of VS-1 variant glyphs.

Character	Description	Style
`U+FE0E`	`VARIATION SELECTOR-15`	text style
`U+FE0F`	`VARIATION SELECTOR-16`	emoji style

Unfortunately it’s a little hard to demonstrate these things since OS and browser support varies so much.

Character	Emoji	Normal	Text
`U+2764`	❤️	❤	❤︎
`U+21A9`	↩️	↩	↩︎
`U+25B6`	▶️	▶	▶︎

Result on OS X 10.10.3: Chrome 42 and Safari 8.0.5 - the result on iOS with MobileSafari was identical to Safari. ³

I’ve used the Unicode converter on rishida.net quite a lot to convert to/from different Unicode representations. Taking another look at the solution by Jason and running it through the converter we see that the ↩ vs ↩︎ corresponds to: U+21A9 vs U+21A9U+FE0E - notice the U+FE0E at the end of the converted string.

🏻🏼🏽🏾🏿 Each skin tone is based on the Fitzpatrick Scale ↩
Support for skin tone modifiers was shipped in iOS 8.3 and OS X 10.10.3 ↩
Result was the same in MobileSafari on iOS devices running iOS 7.1.2 and iOS 8.3. ↩

Update: Anil Dash brought up a good point that the text style version of symbols should be in the options flyout on emojis on iOS. 2015/04/21

Update: Michael Harry showed that Google were also having problems with symbols being rendered as emojis in their search results. 2015/04/21

How to fix slow gem installs

2015-04-19T00:00:00+00:00

If you’ve ever run gem install, you know how long it can take to complete. Trust me, you’re not alone: plenty of examples showcase similar frustrations in dealing with slow gem install.

Most larger Ruby projects comes with extensive documentation (awesome! 👍), unfortunately the process of turning RDoc into HTML and ri can be quite time-consuming - especially on larger projects or slower machines.

Fortunately, it’s possible to turn off ri and rdoc processing on gem install by executing the command with flags --no-ri and --no-rdoc:

$ gem install rails --no-rdoc --no-ri

Now keep in mind that RDoc and ri is actually pretty cool and if you use them often, instead of online documentation, then you might want to skip this.

If you want this as your default behavior add this to your ~/.gemrc file:

gem: --no-ri --no-rdoc

Another option is to create a Shell alias for gem install that in addition also prefixes with sudo to avoid those pesky “You don’t have write permissions …“:

# Alias
$ alias gemi=”sudo gem install –no-ri –no-rdoc”

# Usage
$ gemi rails

Using webpack with shims and polyfills

2015-04-08T00:00:00+00:00

I’ve been getting into webpack a lot lately, partly because of the amazing experience of using React with a hot reloader like react-hot-loader.

If you haven’t used webpack in a project yet, go play around with it right now! For a quick React hot reloader boilerplate checkout react-hot-boilerplate or react-webpack-boilerplate.

In a recent project I wanted to use the new fetch API, if you are not familiar with the background story go read Jack Archibald’s “That’s so fetch!” post.

The overall browser support is starting to pick up, with Chrome 42(beta), Firefox 39 and Opera 29 all shipping with it by default. Internet Explorer is currently listing it as “under consideration” on their platform status page.

Luckily for us GitHub has been maintaining a great polyfill github/fetch since October 2014, which means we can already use this in production. Using the polyfill without a bundler like webpack would mean adding a <script> tag to your template.

I couldn’t figure out the “webpack way” of including the polyfill in my bundle, and after reading the webpack wiki page on shimming modules I still couldn’t quite figure out the syntax.

That was until I stumbled upon this gist by Luís Couto, showing exactly how to use the fetch polyfill with webpack.

The important part of the webpack config:

plugins: [
  new webpack.ProvidePlugin({
    'fetch': 'imports?this=>global!exports?global.fetch!whatwg-fetch'
  })
]

It uses the imports-loader and exports-loader for webpack, so make sure you have them installed:

$ npm i imports-loader exports-loader -D

For more information about shimming modules in webpack, checkout the documentation.

Update: Corrected small typo spotted by @stkhlm, thanks! 08/04/2015

Update: Updated npm install to use -D for devDependencies, thanks to Gio d’Amelio! 30/01/2016

Release: grunt-xcode v2

2014-10-01T00:00:00+00:00

complete rewrite + new features: grunt-xcode

I started building the initial version of grunt-xcode around November last year. The primary reason for the project was that I was getting tired of manually having to do iOS builds for our clients - it needed to be a part of our Grunt build task.

I stumbled upon shenzhen which actually worked fairly well for me as a command-line tool, so I thought “hey let me just wrap this in JS”. That was probably not the wisest decision, but grunt-xcode v1 ended up sort of working for us (not so much for everybody else).

To be honest the code was quite ugly and I didn’t like the dependency on a RubyGem - it just didn’t feel right. I also started getting some bug reports on GitHub and email.

Rewrite

The primary goal of the rewrite was to remove the dependency on shenzhen and use the built-in xcodebuild tool instead.

Features:

remove dependency on shenzhen
added support for all parameters available in xcodebuild
show progress indicators for archiving and export tasks
show stdout if Grunt is run with the --verbose flag

Usage

I’m actively using grunt-xcode for a client project and it’s been working out great for me.

Installing grunt-xcode is just as simple as any other npm module:

$ npm install grunt-xcode --save-dev

require('load-grunt-tasks')(grunt);

grunt.initConfig({
    xcode: {
        options: {
          project: '/path/to/my/awesome/App/App.xcodeproj',
          scheme: 'Release'
        }
    }
});

grunt.registerTask('default', ['xcode']);

For a list of all options please refer to the README.

Hopefully the codebase is a lot more readable now, that was at least the goal.

Please do let me know if you run into any issues with grunt-xcode, I’m sure there are multiple cases I haven’t tested properly.

Download YouTube videos and songs

2014-09-10T00:00:00+00:00

youtube-dl allows you to download any video or song from YouTube, Vimeo, SoundCloud and 410 more sites.

youtube-dl have quickly become one of my favorite command line tools. Say goodbye to faulty browser extensions and sketchy websites, and say hello to downloading everything from any of the major video/audio sites right from your command line.¹

Installation

You can download the binary on the official download page - I always choose the easier Homebrew installation:

# Homebrew installation (preferred)
$ brew install youtube-dl

# UNIX installation with curl
$ sudo curl https://yt-dl.org/downloads/2014.09.06/youtube-dl -o /usr/local/bin/youtube-dl
$ sudo chmod a+x /usr/local/bin/youtube-dl

Usage

$ youtube-dl http://www.youtube.com/watch?v=DwYPG6vreJg
[youtube] Setting language
[youtube] Confirming age
[youtube] DwYPG6vreJg: Downloading webpage
[youtube] DwYPG6vreJg: Downloading video info webpage
[youtube] DwYPG6vreJg: Extracting video information
[download] Destination: Douglas Crockford - Advanced JavaScript-DwYPG6vreJg.mp4
[download] 100% of 169.41MiB in 00:43

Supported sites

Most of the leading video sites like YouTube, Vimeo, Dailymotion are supported, including a bunch of news, sports, trailers and of course porn sites. For a full list please see supported sites on GitHub.

# List all available sites
$ youtube-dl --extractor-descriptions

Is your favorite site missing from youtube-dl? Then please do head over to the GitHub repo and check out the Adding support for a new site section. Open source contributors are constantly improving the tool with support for new sites.

Video formats

youtube-dl supports a long range of formats and resolutions, that are passed in the -f, --format FORMAT parameter.

Every format has a format code that can be specified when downloading a video, including special name codes like: "best", "bestvideo", "bestaudio", "worst", "worstvideo" and "worstaudio". If no specific format is specified the best quality format is chosen.

To list down all available formats for a video URL use -F, --list-formats, the output will look like this:

$ youtube-dl -F http://www.youtube.com/watch?v=DwYPG6vreJg
[youtube] Setting language
[youtube] Confirming age
[youtube] DwYPG6vreJg: Downloading webpage
[youtube] DwYPG6vreJg: Downloading video info webpage
[youtube] DwYPG6vreJg: Extracting video information
[info] Available formats for DwYPG6vreJg:
format code extension resolution  note
171         webm      audio only  DASH audio , audio@128k (worst)
140         m4a       audio only  DASH audio , audio@128k
160         mp4       144p        DASH video , video only
242         webm      240p        DASH video , video only
133         mp4       240p        DASH video , video only
243         webm      360p        DASH video , video only
134         mp4       360p        DASH video , video only
244         webm      480p        DASH video , video only
135         mp4       480p        DASH video , video only
17          3gp       176x144
36          3gp       320x240
5           flv       400x240
43          webm      640x360
18          mp4       640x360     (best)

Rip music from videos - YouTube songs to Spotify

In addition to the video formats, youtube-dl also supports a whole range of post-processing options. Check out the GitHub repo for a full list of options.

I primarily use the -x, --extract-audio option to convert videos files into audio-only files - do note that the options has a couple of extra dependencies: ffmpeg or avconv and ffprobe or avprobe.

Shell alias `yt`

I pretty much only use Spotify for listening to music, unfortunately more obscure remixes and new releases often aren’t available for streaming through Spotify, so I end up needing an offline copy. Luckily youtube-dl supports downloading tracks from SoundCloud, where I find a lot of great new music - but as described earlier it supports extracting music from videos as one of the post-processing options.

Because I end up extracting audio from video files fairly often, I’ve created a quick little shell alias for downloading the audio from for example YouTube:

# alias for youtube-dl extracting audio
alias yt='youtube-dl --extract-audio --audio-format mp3'

Additional parameters

I’ve mentioned a couple of the parameters for youtube-dl in this post, but it supports a ton more. All options are well documented in the options section of the README.

One of my favorite hidden features is the ability to download your entire Watch Later playlist from YouTube or Vimeo, perfect entertainment for a long-haul flight.

Tool updates

The rate of updates to youtube-dl is very frequent, and there seems to be a lot of active contributors to the project. The original creator of the project Ricardo Garcia have long since stepped down as a maintainer, check out his post regarding the team working on it now: The fantastic youtube-dl team.

I once encountered a problem where I couldn’t download a video off YouTube because of a problem with encrypted signatures, I apparently had an old version of the tool and a simple update fixed the problem:

# Update youtube-dl
$ youtube-dl -U

I shall avoid all talk about copyright laws and other legal implications of using this tool. ↩

Update: Corrected small typo spotted by @soerenr, thanks! 10/09/2014

Generate .gitignore files with Bash function

2014-09-06T00:00:00+00:00

No more copy/pasting lines from old .gitignore files

Every Git repo needs a .gitignore file, these often vary from project to project and creating them can be a tedious process.

This process used to, at least for me, involve copy/pasting from previous projects only to end up with a new project-specific Frankenstein-like file. Around a year ago I stumbled upon the site gitignore.io which makes it super simple to generate .gitignore files without resorting to copy/pasting from old projects.

The only problem was that when I start new projects I’ll usually be in my Terminal or editor of choice, and I don’t want to switch contexts by going to a website to generate the file.

gitignore.io offers an official and very simple command line utility, that’s documented here - but it doesn’t quite do as much as I wanted it to.

Luckily @soerenr sent me a link to this great little Gist by kqr.

I haven’t written much Bash besides a couple of small scripts here and there, but I thought I could add one little feature to the original gist by kqr. The ability to append existing .gitignore files.

Here is the full slightly edited function:¹

function gi() {
  result=$(curl "http://www.gitignore.io/api/$1" 2>/dev/null)

  if [[ $result =~ ERROR ]]; then
    echo "Query '$1' has no match. See a list of possible queries with 'gi list'"
  elif [[ $1 = list ]]; then
    echo "$result"
  else
    if [[ -f .gitignore ]]; then
      result=`echo "$result" | grep -v "# Created by http://www.gitignore.io"`
      echo ".gitignore already exists, appending"
      echo "$result" >> .gitignore
    else
      echo "$result" > .gitignore
    fi
  fi
}

The code should be fairly self explanatory and straight-forward to understand. To use the function in your Bash shell:

# Add the function to your ~/.bash_profile

# Remember to source your ~/.bash_profile after adding the function
$ source ~/.bash_profile

# Show available keyword types
$ gi list

# Create new, or append to existing, .gitignore file
$ gi sass

I created a PR with my edit and kqr wrote a great suggestion. I’ll update this post with improvement from kqr. ↩

Spotify International Pricing Index

2014-05-07T00:00:00+00:00

The Big Mac Index for Spotify Premium pricing

See the project here: Spotify International Pricing Index

Just after moving to Malaysia it shocked me how big the price difference was between Spotify Premium in Denmark and Malaysia.

One of the main reasons for the large price difference can be found in the particular catalog size in each country. I scoured the web looking for a way to get the total number of tracks available for each country, unfortunately Spotify doesn’t seem to make this data publicly available.¹

I’ve always wanted to do a simple project with data visualization with D3.js, so this a perfect opportunity to play around with that.

I wanted to replicate the charts from Big Mac Index, but with simpler interaction. The goal was basically a simple Javascript-generated infographic. I tried to match the styling of the Spotify OS X and iOS app as best as possible with similar colors and fonts.

Getting the pricing data

I wrote a simple little script in Node.js that crawls all the individual country pages for the pricing info. It then adds a little more relevant country info to each country from restcountries.eu and lastly converts the local price to USD with the help of money.js. Check it out on GitHub: spotify-crawler

Luckily Spotify keeps a nice and simple list of all their available countries. They also don’t force a location based on IP which would make crawling much harder without the use of proxies in different countries.

I exposed a simple API with all the countries on Heroku if you want to look at the data: http://spotify-pricing.herokuapp.com/api/

World map choropleth

I started out creating a map from the ground up, but quickly discovered datamaps.js.².

The datamaps.js library includes features like hover, popup, legend, etc. – all features which I would have had to reproduce if I followed the tutorial.

I hit some limits in the use of the library and had to make some edits to the main source file - I’ll try contributing the changes back to the source.

I associated the different fill colors based on which price-difference quantile each country fell into – still not convinced that this is the most correct way of doing it but the result looks reasonable. Getting a specific quantile with D3.js is as simple as:

var sortedDifferences = _.map(_.sortBy(countries, 'priceDifference'), 'priceDifference');

var quantile = [
  d3.quantile(sortedDifferences, 0.2),
  d3.quantile(sortedDifferences, 0.4),
  d3.quantile(sortedDifferences, 0.6),
  d3.quantile(sortedDifferences, 0.8)
];

Assigning a fillKey/fillColor can then be done by comparing each priceDifference and observe which quantile it falls into.

The fill colors themselves are calculated with the small Javascript library tinycolor.js which provides powerful color methods like .lighten and .darken – you may have seen similar methods in Sass.

Bar chart with negative values

The original chart from The Economist that I was trying to reproduce:

This was the first chart I started working on, since it was my first time working with D3.js it was also the chart that took the longest to replicate.

I followed this brilliant example from Mike Bostock showing how to build a simple bar chart with negative values.³

I added some additional text elements and labels, but the end result is pretty close to the example.

Scatter plot

I originally didn’t plan on reproducing this chart, but after making the first two charts I could just create this one as well - a fun little challenge. I started off with yet another great example from Mike Bostock.

GDP data varies widely between different sources, be it IMF, CIA or World Bank. I ended up using the GDP per capita, PPP (current international $) data from World Bank, and their API was fairly easy to use. All data are from 2012 because it was the latest year without estimated numbers in the World Bank API.

5 countries still returned null from the World Bank API: Andorra, Argentina, Liechtenstein, Monaco and Taiwan. These countries are not shown in the scatter plot chart. The CIA list of GDP (PPP) per capita does contain these countries, but the reported numbers are from different years.

This whole project gave me an opportunity to dust off some of the math and basic statistics I had learned years ago – and never really used since. I was about to create my own trend line calculation when I found yet another example from Mike Bostock showing how to calculate a trendline.

Wrap up

I’m currently paying for the most expensive Spotify Premium plan in the world when converted to USD.

So will I be making the switch? Probably not, I still want to listen to Danish tracks which aren’t available in the cheaper countries like Philippines and Malaysia.

Check out the GitHub repo for the project here: spotify-pricing

Further additions that I want to implement are recording price changes over time, and automatically adding new countries as Spotify expands further internationally.

If you know any way to get this data, please let me know. ↩
There is a great tutorial on how to create maps with D3.js here: http://bost.ocks.org/mike/map/ ↩
Mike Bostock is the creator of D3.js ↩

Update: Corrected small typo spotted by @nikreiman, thanks! 08/05/2014

Cross-platform mobile apps with Steroids

2014-05-01T00:00:00+00:00

Mobile HTML5-based apps that feel native.

Update: Since I published this blog post, AppGyver have changed quite a few things(and I’ve not kept up with all the changes). Check the AppGyver website for the newest updates.

For a long time mobile app development have been in two very separate camps, native development and HTML5 development. In between these two camps there has been multiple attempts at trying to bridge the gap between Web code and native elements.

Maintaining completely separate codebases often isn’t feasible for many smaller teams, so many teams often opt for one of the countless cross-platform development frameworks like Adobe AIR, Appcelerator Titanium, Intel App Framework or Xamarin.¹

The most popular and widely used cross-platform framework is without a doubt Cordova/PhoneGap.² This particular framework enables developers to use standards-based web technologies to bridge traditional web applications and mobile devices. It’s always been stated that the larger goal of Cordova is to at some point make itself obsolete as browser vendors eventually implement many of the APIs.

The downside to Cordova have long been that the feel of the resulting apps were clearly not native, it was easy to spot the differences between these hybrid-apps and native apps.

http://www.tipsyandtumbler.co.uk/blog/boydlee/what-is-native

Description

Steroids promises to bridge this gap by providing rapid development with the ease of HTML5/JS portability at native code speeds.

If you’ve already used Cordova before you’ll feel right at home with Steroids since it builds on the foundation laid out by the Cordova project. This also means that you have access to all the APIs exposed by Cordova, and not to forget the growing list of plugins for the platform.

Steroids gives you access to a number of native UI elements such as the navigationBar, tabBar, modal, drawer but most important of all is the native views which allows you to have multiple native-wrapped WebViews running at the same time. The ability to have multiple WebViews stacked really gives the illusion of a high performance native app, especially when you destroy a WebView to for example go back from a child-view.³

One important feature about Steroids that’s often forgotten in the coverage of the development platform, is that it enables non-Mac users to develop and compile iOS apps since all compilation and deployment is done in the cloud. No more need to have a local version of Xcode to compile and deploy applications to the App Store.

Setup process

Installing Steroids and getting everything up and running is quite a simple process.

Create a free AppGyver account here
Install the required tools
- Git
- Python
- Node.js
If you’ve used npm before then this process should be familiar to you:

# Install the Steroids CLI package:
$ npm install steroids -g

# Connect the CLI tool to your AppGyver account:
$ steroids login

# Now you're ready to create your first project:
$ steroids create ProjectName

To run your project on a real device simply download the AppGyver Scanner for iOS or Android, and run the following command:

$ steroids connect

For full instructions please refer to AppGyver’s guide.

Android support

I’m not sure if AppGyver was more focused on iOS in the beginning, or if supporting iOS native UI elements was simply just easier – but it’s clear that support for native UI elements on Android is seriously lacking behind that of the iOS side. This is unfortunate since equal support on both platform would make Steroids the perfect tool for developing cross-platform web apps.

Preliminary support for Android 4.4(KitKat) was just released last week, but there’s still lots of bugs and problems with the support. There has been a lengthy discussion on this GitHub issue, please refer to it for the newest developments.

AppGyver currently seems to be focused on the development of an Android Simulator, since there is only support for the iOS simulator at this point.

Possiblities

One of the great things about Steroids is the before-mentioned ability to spawn new native WebViews for each of your views. This means that you don’t have to build traditional single-page apps like you would’ve done before. Using multiple WebViews however comes with some adjusting since communicating between each view is a little more complicated compared to the communication in a single-page app.⁴

With each WebView running a completely separate JavaScript runtime you can’t share global variables or data between them, and singletons like AngularJS services would be maintained separately for each instance of ng-app.

To help developers overcome these limitations Steroids have implemented a couple of HTML5 standards that should let you do most of the things a traditional single-page app could do.

`window.postMessage`

Steroids implements a simplified version of the postMessage standard, most notable differences being no event.origin and event.source attributes, and no targetOrigin in the API call.

A Steroids app running in the app package is walled-off from the general Internet, so all postMessage calls are automatically sent to every WebView in memory. Even though it’s a simplified version of the postMessage standard it’s tremendously powerful and useful in the building of Steroids apps.

Steroids includes and example of how postMessage can be used with the native drawer UI element:

$ steroids generate example drawer

`window.localStorage`

The implementation in Steroids makes the localStorage available in all your views, which makes it a great way to share data between separate views. Storing objects in localStorage can be done with JSON.stringify(object) and JSON.parse(string).

One key difference to using localStorage in Steroids is that the users won’t have access to developer tools, which means that they can’t manipulate the data you store in localStorage. The stored items will also be persistent through app updates, but it will be removed if the app cache is emptied.

Steroids also provides a more robust database for sharing data between WebViews, the AppGyver Scanner comes bundled with the PhoneGap SQLite plugin.

See this guide by the AppGyver team on prepopulating the database.

Background service-layer

One of the suggested ways of handling the data between different views is to implement a service-layer always running in the background. A document that runs all your applications singletons, making use of the above-mentioned standards it’s quite simple to accomplish.

Steroids have the ability to preload WebViews with the steroids.views.WebView.prototype.preload function. Running a background view can be done like this:

var backgroundView = new steroids.views.WebView("services.html")

backgroundView.preload();

Workflow and deployment flow

If you download the before-mentioned AppGyver Scanner app (iOS or Android)

workflow/deployment http://marcgg.com/blog/2013/08/29/appgyver-steroids-iphone-hybrid-javascript/#the-scanner-app

Features coming

AppGyver announced a couple of weeks ago that they had raised $2.5M in funding to expand the Steroids development platform. AppGyver said that they were planning on using this newly raised capital to expand the team and build out their strongly requested enterprise features.

As described above AppGyver allows developers to use the already existing Cordova plugins on the platform, some of these plugins are either outdated, poorly supported or simply just doesn’t work very well with the Steroids platform. That’s why AppGyver will also be expanding their own add-ons, the idea is to provide a complete library of maintained and well-supported plugins to help developers quickly build their applications.

At this point AppGyver have published 4 add-ons: Facebook, Urban Airship for push notifications, OAuth.io and their own GPS add-on. The following add-ons are announced, but not yet published.

Another new feature that AppGyver is teasing on their website is something called App Reload which promises “Continuous Integration with App Stores”. This sounds close to something they’ve earlier discussed, dynamic updating of assets over-the-air without submission to the App Stores. It’ll be very interesting to see how this’ll work once it’s available.

See PropertyCross for comparisons and further information about cross-platform frameworks. ↩
Please see this post by the Ionic team on the differences between Cordova and PhoneGap: http://ionicframework.com/blog/what-is-cordova-phonegap/ ↩
Official documentation on Native UI elements ↩
AppGyver’s description of multi-page apps(MPA) ↩

→ Reverse-Engineering Sonos API to Create Own iOS and OS X app

2014-04-23T00:00:00+00:00

Nathan Borror wrote a great post about reverse-engineering the Sonos API in order to create a custom iOS application, OS X client and turning off speakers when he leaves home.

Nathan also documented the design- and code-wise progress on GitHub.

I enjoy posts like these where somebody is scratching an itch by reverse-engineering an already existing product. Wish more of the posts on HN were like this one.

∞

SummaList RSS feeds OPML file

2014-04-22T00:00:00+00:00

SummaList promises to “summarize all the best tech & startup newsletters.” sending you one weekly e-mail with summaries of the best newsletters.

I don’t want to receive any more emails, and generally just like to have all my feeds/newsletters combined in my RSS reader¹ - so I crawled the RSS feeds from all the sites currently on SummaList.

For a similar service that offers summary of interesting content do check out Blinkist.

Grab the OPML file with RSS feeds of all² the newsletters from SummaList below.

Just switched to the new beta of Reeder 2 for Mac, and syncing with Feedbin ↩
Sites without RSS feed: Corbett Barr ↩

Download

Sass Unit Testing

2014-04-02T00:00:00+00:00

We all know that testing is good, and most of us hopefully already write tests for our front-end JavaScript code – but is it needed for our Sass code as well?

We need to think about long-term maintenance as our Sass projects and libraries gets more and more powerful. Just look at some of the things Sass can do today, things nobody would’ve imagined just a few years ago:

The term Sass unit testing is not referring to visual regression testing of the visual end-result, but instead logical unit tests focused on the core functions of a library. The term is also not referring to linting of sassor scss, if that’s what you’re looking for scss-lint may be for you.

The logical testing of functions that an entire project relies on, just makes plain sense – additionally creating tests upfront prevent regressions later. Testing your individual functions will force you to break up your code into small modular functions, and maybe even adopting techniques like object oriented css.

Continuous integration

If you’re using continuous integration in your deployment process you are probably already running existing tests before deploying, the first step to making sure your Sass doesn’t break on deployment is making sure that it can compile with errors.

In case you’re already using Grunt for your local development workflow it would make sense to just make Grunt run your test and build tasks. If you’re using Travis it’s just a few simple steps to make your Grunt tasks run on every new build.

No matter what build system you are using, the key is that the build will fail if compilation of Sass/Compass fails - the last thing we want is for broken output css to make it into production.

Bootcamp

A BDD-style framework that doesn’t rely on any frameworks.

Bootcamp is developed by James Kyle who have done some crazy things with Sass, checkout his GitHub. The syntax for Bootcamp is clean and obvious, especially if you’ve worked with BDD frameworks in other languages before. You begin a new test suite by calling the mixin describe with the title for the spec suite and then the @content block inside:

@include describe("A suite") {
  @include it("contains spec with an expectation") {
    @include should(expect(true), to(be(true)));
  }
}

Specs are called by the mixin it which just like describe takes the name/title and a @content block. The spec contains at least one expectation which evaluates to either true or false, a spec with at least one false assertion is a failing spec.

The syntax for defining suites and specs are important, but the matchers that are available in assertions are just as important. Bootcamp comes with a bunch of rich matchers already included. An extensive list and demo of each matcher is right here.

It’s possible to disable suites and specs by changing the mixins to xdescribe and xit, just like Jasmine.

Installation

You can install Bootcamp from either npm or Bower:

$ npm install bootcamp --save-dev
$ bower install bootcamp --save-dev

After installing Bootcamp you’ll probably want to add it to your Sass :load_paths, instructions for Grunt and Compass:

npm   './node_modules/bootcamp/dist'
bower './bower_components/bootcamp/dist'

tests.scss

@import "bootcamp"; // or "[node_modules|bower_components]/bootcamp/dist/bootcamp" if you didn't set load_paths

@include runner-start;
@import "specs/example";
@include runner-end;

To run Bootcamp and get the results of the test suite simply compile the tests.scss file. If you’re using Grunt in your workflow please see a full working example in the official documentation.

The wiki for Bootcamp includes a full working example.

True

A TDD-style framework inspired by QUnit.

True is developed by the talented Eric M Suzanne who also gave a great talk at SassConf ‘13.

In True you define a suite with the mixin test-module with the title of the suite/module and again utilizing the @content block:

@include test-module('Column Math') {
  @include test('[function] is-symmetrical()') {
    @include assert-true(true, 'Number should be symmetrical');
  }
}

Individual specs are defined with the mixin test which again takes a name/title. True contains 4 different assertion-types: assert-true, assert-false, assert-equal and assert-unequal.

Installation

True can be installed with RubyGems:

$ gem install true

After installation you’ll need to add the following line to your config.rb:

require 'true'

It can also be installed with Bower or by copying the Sass directory from the project.

After install creating a test suite is a simple as creating a main test file. tests.scss

@import "functions/all"; // functions we want to test
@import "true";

@include test-module('Column Math') {
  @include test('[function] is-symmetrical()') {
    $s: is-symmetrical(12); // externally defined function

    @include assert-true($s, 'Number should be symmetrical');
  }
}

A great production example of True can be seen found Susy Next.

Going forward

As Chris Eppstein mentioned in his talk “It Takes a Village to Raise a Website” at SassConf ‘13, the community/ecosystem really needs to rally around these new unit testing frameworks.

We as a community need to figure out what it is that we want to test. What is missing in the current frameworks and maybe even in the Sass language. How are we going to do unit testing in Sass in the future.

Do we want a standard set of assertions and matchers in the Sass language, which we as a community can build different language/syntaxes on top of?

Update: Corrected mistakes in section about True, especially about dependencies on Compass, Ruby etc. Thanks to Eric for correcting me. 25/04/2014

Free our bank data

2014-03-27T00:00:00+00:00

Full disclaimer: I worked for Spiir a couple of years back.

Why is it that you as a banking customer aren’t the owner of the data you generate?

The reason for this post was a recent incident in my home country Denmark, a Danish startup Spiir was reported to the police by the third largest bank in Denmark, Jyske Bank who is accusing Spiir of using “hacker-methods” to unlawfully gain access to users’ financial data.

Background

Spiir enables users to get a complete overview of their economy by analyzing transactions. In the early days of Spiir, the only way of getting your transactions from your bank into Spiir was by exporting, one account at a time, into CSV files and then importing these into Spiir. It worked, but it was too much of a hassle and broke the immediate feedback-loop that was important if users were to spend time on something as unsexy as bank data.

Spiir started a partnership with another Danish bank, Lån & Spar Bank, that allowed for automatic transfer of data from the bank to Spiir — if the customer wanted so. Most of the other banks were not as keen on this kind of partnership, even though their users were publicly asking for the integration.

Spiir then started looking at alternative solutions, so that their users could do what they wanted with their own bank data. It was clear that the banks were using relatively simple APIs for their own clients (mobile applications, etc.), which could potentially allow users to programmatically access their own data more easily than the manual CSV export.

After substantial investments into the legal aspects of this new kind of integration, Spiir launched an automatic synchronization of the bank data to Spiir. The legal aspects of this synchronization are clear because Spiir is only accessing the bank’s API on instructions from the user and not in a way that the user himself couldn’t access it. Furthermore, Spiir is only accessing the user’s data for the use of that specific user. The legal justification from Spiir can be found right here.

It is this particular integration that Jyske Bank find illegal. We are talking about a service that simply accesses an API on behalf of a customer who wants to use their own data in a way that the bank doesn’t approve of.

Even though Jyske Bank keeps calling Spiir’s methods for hacker-methods, it is clear to anybody who have the slightest technical knowledge that those claims are without merit. An example of the hack can be seen in this Gist by @soerenr.

Market disruption

This is a market ripe for a significant technological disruption, and we are already seeing players attacking this market from multiple positions.

We see it in the customer-facing sides of the market with startups such as Simple, Numbrs, Moven, Holvi, Tink, RocketBank, and so on. But I think, just as importantly, we are seeing startups focused on making the data from financial-institutions more easily accessible for developers and users:

Plaid recently raised a considerable funding round
figo seems to be gaining momentum in Germany
Open Bank Project sounds very promising
Standard Treasury(YC S13) aims at easing the hassle for businesses integrating with banks

It is time for the banking world to wake up and realize that the world around them have changed completely.

Free your own data

We should demand that our providers, no matter what type (bank, email, social network, etc.), set our data free. After all, we are the ones who generated and accumulated the data in the first place - is it not only fair that we can do whatever we want with it?

Every time I see company fighting this hard to keep user data to themselves, I can’t help but think that either they are relying on a dying business-model or they just simply don’t get what is happening around them. I don’t see how companies that actively fight against their customers’ wishes can survive in this day and age.

I, of course, know that change takes time, especially when it comes to big slow-moving companies such as banks, but that shouldn’t stop us from pursuing more open data from the services we use everyday.

Matias Singers

Unicode symbol as text or emoji

Standardized variants

How to fix slow gem installs

Using webpack with shims and polyfills

Release: grunt-xcode v2

Rewrite

Usage

Download YouTube videos and songs

Installation

Usage

Supported sites

Video formats

Rip music from videos - YouTube songs to Spotify

Shell alias yt

Additional parameters

Tool updates

Generate .gitignore files with Bash function

Spotify International Pricing Index

See the project here: Spotify International Pricing Index

Getting the pricing data

World map choropleth

Bar chart with negative values

Scatter plot

Wrap up

Cross-platform mobile apps with Steroids

Description

Setup process

Android support

Possiblities

window.postMessage

window.localStorage

Background service-layer

Workflow and deployment flow

Features coming

→ Reverse-Engineering Sonos API to Create Own iOS and OS X app

SummaList RSS feeds OPML file

Sass Unit Testing

Continuous integration

Bootcamp

Installation

True

Installation

Going forward

Free our bank data

Background

Market disruption

Free your own data

Shell alias `yt`

`window.postMessage`

`window.localStorage`