Category Archives: Software

tween.js mega changes

Yesterday I had my every-two-months lucky day in which I could sit down and work on tween.js, and DID I GET THINGS DONE!!!

The first thing I did was to get rid of the minified version. Since the build process wasn’t fully automated, I often forgot to produce and check-in that minified version, and people who used it would get all sorts of weird errors that I didn’t see (specially in Safari and iOS, as the polyfills we added would be in the uncompressed version, but not on the minified, sigh!).

Then I started using semantic-release as my invaluable helper for producing releases. Each time a push to the git repository happens, another service (Travis) runs a battery of tests to make sure nothing is broken. If the tests pass, semantic-release will get in action and (probably not in this order):

  • determine what’s the next “semver” for the package. This is a function of the type of commit you made (a bug fix, a new feature, docs, chore…). Important / breaking commits will cause bumps in the first digit, etc. (I suggest you read more on semver if you’re interested). The type of commit is specified by having the commit message follow a certain syntax. E.g. a feature will be feat: implement feature A
  • tag the commit with the version. E.g. v16.0.1. I believe this is what bower people use and desperately need, and I never provided because I don’t use bower and so didn’t notice.
  • create a github release changelog thingie in github. These go to the releases page in github
  • publish the new version of the package to npm

I think semantic-release can do so much more than this, but just having all these steps performed for me is A W E S O M E. So once I established this “infrastructure” I could go on and fix many other long-standing issues and also merge PRs and address questions.

Since we don’t have to produce a minified version, I got rid of gulp which is what I was using it for. Installing tween.js with npm is now very very lean because I also added an .npmignore and so it just essentially installs the code of the library only. Your trees will not include the examples anymore. Not that it was incredibly big but every byte counts to some people, it seems 😛

I also added jshint (for code correctness) and jscs (for code style) verification as part of the test suite. This was something that would put me off reviewing PRs… and specially explaining to people that it was not OK to change the whole whitespace in the file, or that they should respect the existing guidelines (even if it’s in the contributing file that very few read). So the rules are now there, and everyone has to abide to them, or the tests don’t pass and so the PRs are not accepted.

Interestingly, I added these steps using the advice in Kate Hudson’s talk from Nordic.js front-end automation with npm scripts, where she showed how you don’t actually need a task runner–I recommend you to watch it! Or check out her reading list on the topic.

Next up was dealing with a ton of sorta old and sometimes outdated PRs that had been lying in the guts of github for months. As I explained in my previous tween.js post, something had happened and I hadn’t even seen the notifications for these.

I prioritised FIXES first. Many people are coming up with some novel ideas and features, and I’m grateful for that, but I decided to focus on accuracy and robustness for now. Some aspects of the code are a bit obscure and I am not sure I understand them well, mostly because I just merged them in when someone proposed them, and now I’m paying the price when strange edge case errors are reported.

Of course, I’m still not done by any means, because there was a massive backlog and the day only has so many hours, and I’d like to do human things such as sleeping, etc.

This is brings us to this interesting paradox: many people use tween.js, including big agencies who charge a bunch for their projects, but only a very few submit code or respond to my pleas for help. Maintaining a JS library has become way more demanding over the years. Back in 2011 people didn’t care about npm, bower, tags and releases and what not, so working on tween.js was way more simple and less time consuming. I could have just put a zip file on a website, and people would be happy with that, for all that is worth.

But since I changed roles at Mozilla I am travelling a lot more, and it literally devours your time. I am not complaining about that, but I need quiet time to sit and get heads down on code, and I’m not having much of that lately. Mozilla supports me working on tween.js but I do have my own work duties which take priority. All my coding time is happening during working hours, and when I’m off work I like to enjoy my free time doing things such as being outdoors or just talking to people face to face, not via a bug tracker. Or despair about the list of issues and PRs growing and me not having time to even acknowledge them 😩

But before totally blaming open source for its toxicness, I decided to own this a little bit myself, and totally revamped the README file to make it a bit more welcoming and clear (I took heavy inspiration from Express). I have also filed some bugs and tagged them as help needed or good first bug respectively. If you enjoyed tween.js and want to give back by contributing to these bugs, you’d gain extra points of awesomeness.

People like roadmaps, so this is what I’d like to see next:

  • Review all pending bugs and PRs and resolve or close them.
  • Fix the things that have to be fixed and ensure all code is tested and clear before adding new features, because it is getting to a point where it is unwieldy and scary to even look at a diff (what even does this thing do!?). Hopefully the new automation will help here, and we can focus on logic and not on chores!
  • Divert all new feature ideas to the future ES6/ES2015/ESWHATEVER version of tween where everything will be super modular and you should be able to use parts of it as you need and hack other types of tweening engines as you see fit.

This is it for now. Thanks for reading, and happy tweening!

Organising my music collection with find and ffmpeg

Since I bought a Synology NAS I’ve been spending time sorting out my music library. Let’s say it’s been a very relaxing hobby as I get to listen to music I hadn’t listened to in years, and it brings back great memories and also brings me to research about “what happened to that indie artist whose protected demos I downloaded from MySpace using Firebug in 2007” and I end up in a YouTube hole looking for remixes and live versions of my favourite tracks, so that’s fun.

People always ask me why do I bother keeping an MP3 collection, when “I could just use a service like Spotify”. The answer is: I like indie music and obscure music and bootlegs and all sorts of things that the record label won’t put on Spotify, mostly because often the record label has either disappeared or there isn’t even a record label to start with (as is the case with unsigned artists). So curating this sort of collection is a very interesting hobby–sometimes I feel like I own the last copies of the music of some artists as their myspace pages have disappeared, etc.

But there are things I do not really enjoy doing, namely repetitive stuff.

So whenever I can automate something I will do. The terminal is really great for that–and this is a bit of an exercise to improve my bash skills too! 😎

Task 1: remove unneeded files from a folder and its subdirectories

Sometimes you download a bunch of music files and they’re organised in directories. And maybe there’s a lot of .url or .rtf or .txt files you don’t care about. You could go and delete them manually, or you could just use find to remove them in just one command:

For example, to delete all .m3u playlists in a folder and its subdirectories:

find . -iname *.m3u -delete

You could just run it without the -delete switch to make sure you’re not deleting too much (there is NO going back with this! no recycle bin!)

find . -iname *.m3u

Task 2: Rename cover [whatever].jpg to folder.jpg

Apparently these Synology devices will use folder.jpg to display the cover art of each album, assuming each album is “a folder” and there is such a named imaged file in the folder. But these files are sometimes not named like that; they might be cover.jpg or random-string-of-letters-and-numbers.jpg. Again, you could rename them manually, or you press the turbo pedal and go megafaster with this:

find . -iname *.jpg -execdir mv {} folder.jpg \;

Warning: this is somehow a bit too “fire and forget”, and might fail if there are already existing folder.jpg files or just more than one file in the directory. I haven’t tested those scenarios, but what you can do before running the actual renamer is to use find to list the files that match the .jpg pattern. If you find one per folder, then you’re good to go:

find -iname *.jpg

Probably an over-the-top improvement would use ImageMagick‘s convert to list the size of the files and just rename to folder.jpg the largest one, or whatever, but I am not so obsessed with perfection, and besides I’m only running this on one artist’s folder. Also: maybe if you’re having so much logic, perhaps it’s better if you write that logic in an intelligible sort of script such as Python or Node.js. Your future self will thank you forever, unlike if you write Bash code full of back ticks and other mysterious powertricks you find in Stack Overflow and painfully assemble together, only to forget immediately.

Task 3: convert the files to a format you actually like

I’ve also got music files in formats I don’t like. I’m a bit of a savage and don’t care so much about FLAC or sound purity (here, I said that), because I don’t actually listen to music in high end equipment, and besides I used to listen to music in tapes that had been used and reused so many times you could still listen to the previous three or four recordings, so even the crappiest digital encoding is often like super state of the art for my ears.

I tend to just convert FLAC stuff to 320k MP3, but this also works for converting those horrid M4A files to MP3, and OGG to MP3, or WAV to MP3 (yeah, some artists think that WAV is a good distribution format!).

For example, this will convert all *.wav files in a directory to 320K MP3 while keeping the metadata. You’ll need ffmpeg installed (you can install it on a Mac with brew install ffmpeg).

(for FILE in *.wav; do ffmpeg -i "$FILE" -f mp3 -ab 320000 -map_metadata 0 -id3v2_version 3 "`basename "$FILE" .wav`.mp3" || break; done)

Replace .wav with the extension you hate the most: e.g. .m4a, and for grittiest results and even more savage souls than mine, you can drop the file size by reducing the bit rate to 128000 or even worse–use 64000 for a very convincing “Using an MP3 player from the 90s with 64 Megs of RAM with very shitty earphones” feeling.

It just occurred to me that maybe you could also use this one to convert a bunch of videos from talks into “podcasts” (by stripping out the video and just keeping the audio), but I haven’t tried that.

If you have cool music power tricks to process audio files do send them my way on the comments section–I’d love to add them to my arsenal :-)

Solving the “multiple MacVim instances” confusion

I somehow started to experience this confusing situation where I would have two instances of MacVim open, so I was able to Command-Tab between them, and it was really annoying because if I wanted to switch between different windows of MacVim I had to locate which of the instances contained the window I wanted to edit files on. See where am I getting? No? I understand, it was very confusing.

However I found what had happened: I had two versions of MacVim installed.

So when I opened something with the command line mvim shortcut, one of the instances would be executed. And when I opened some file with “open with MacVim” the other instance would be executed. Chaos ensued!

The solution was to delete the in the /Applications folder, and uninstall it from Homebrew:

brew uninstall macvim

and install it again:

brew install macvim

Now I’m back to just one MacVim instance. Yay!

Getting logs of your Firefox OS device

Often you want to output debugging data from your app, but the space on the screen is limited! And perhaps you don’t want to connect to the app with WebIDE and launch the debugger and etc, etc…

One solution is to use any of the console. functions in your code. They will be sent to the device’s log. For example:

console.log('hello friends!');

and you can also use console.error,, etc.

Then, if you have the adb utility installed, you can get instant access to those logs when your device is connected to your computer with USB.
Continue reading

Front-end mDNS: announcing and finding network services with JavaScript

Multicast DNS (or mDNS) lets you announce a service you’re offering in the network you’re connected to, and other devices can find (discover) it. For example, you could announce that your computer is running an FTP service. It’s the same thing that Apple does with its Bonjour protocol and that’s how you can find printers without knowing their IP address: they broadcast their existence, and your computer picks it up automatically for you.

Services have to be registered with a domain ending in .local. E.g. _ssh._tcp.local. The Wikipedia page has some background on why.

However, the title of this post has “front-end” on it, and that’s because I wanted to talk about dns-sd.js, a library that lets you both register and discover services in the network. It’s all written in JavaScript so it can run on a browser environment, in this case Firefox OS.
Continue reading