Tag Archives: JavaScript

Hackference 2016, Part 2 – The Hackathon

<- Part 1: the conference
On Saturday, once everyone had got a good night’s ‘sleep’ (our hotel was just next to a loud club which only got quiet after 3am), we walked over to the Impact Hub.

Before I get started, I’m using the word ‘hack’ in the non-malicious form. Tabloids use the word ‘hacker’ to describe someone with malicious intent who steals data or takes down websites (for example, this article in the Mirror). We use it to describe someone who thinks the best way of learning is by doing. A hackathon is just a group of sleep-deprived developers playing with something new.

The event itself was free – paid for completely by the wonderful sponsors.

Before the hackathon started, not many people knew what they wanted to make (including me). Luckily the sponsors got a chance to inspire us with their products and announce their prizes. There was a variety of companies attending, each with some cracking prizes for the teams making best use of their services.

Continue reading

Countdown API (because why not?)

I’ve updated my Countdown solver with a new word list that’s actually been designed for word games. The list is in the public domain and it claims to be compatible with the Scrabble rules, which I think are the same for Countdown. The problem is that it looks like it was last updated in 1993,  so if you want to play ‘selfie’ on my site, you’re out of luck.

Some point soon I want to add definitions to the words that get returned, because most of the time I see the results and have no idea what those words mean. In my research, I found a service called Mashape. The idea of this service is to enable discovery and monetisation of APIs. I found a word definition API that I want to use in the near future, but I got sidetracked by the thought of making an API that can solve Countdown puzzles.

So that evening I made my API. It didn’t take long to make because I’d already written a function that returned an array of the results – I just had to make it publicly visible. I also added more details to the results to aid filtering.

That’s over here if you want to make use of it.

Imojify! (bookmarklet edition)

At one point, when making my Imojify JavaScript library, I decided to make a bookmarklet which turns text into emoji whenever possible.

I mean, we all love emoji right? We use it all the time on social media. So I thought why not try and put it in more places on the Web? I thought I’d demo it to the folks at the most recent JSOxford meetup.

Continue reading

Imojify: my first JavaScript library

In which Dan finds a project other than Trntxt.uk to blog about, and says ’emoji’ 11 times.

TL;DR: I made Imojify, a library that converts emoji in :colon: notation into their graphical equivalents. It’s on GitHub, NPM and Bower.

On Monday morning I had an idea for a brilliant JavaScript library, but I couldn’t do anything with it because I had to go to work then I had a choir rehearsal. I got back from choir at 10pm with the idea still in my head along with some very catchy Christmas songs.

I had a working (but buggy) prototype by 1am.

The idea was a library that could convert colon notation emoji into their PNG image equivalent. For the uninitiated, colon notation is often used in chat services such as Gitter and Slack. It consists of a word or phrase wrapped inside a colon, such as :angry: or :stuck_out_tongue:. The big benefit of this sort of emoji is accessibility – if the picture isn’t rendered for whatever reason (e.g. for a blind person using a screen reader), it is still possible to understand what the author meant. Continue reading

JSOxford NodeBots Day

“The problem with hardware is that there is no version control” – Marcus Noble

JSOxford’s NodeBots day marks one year since I first used JavaScript (ish). At last year’s event I took an Arduino and used the johnny-five library to control it using Node. It was fun to make, but wasn’t really that impressive.

This time round, JSOxford had a bunch of Espruino Pico boards and plenty of hardware to hack around with, including continuous servos and wheels.

Continue reading

Trntxt bumper update

It’s been a while since I’ve posted an update on trntxt, and in that time lots of things have changed. Most of those things haven’t changed the site’s appearance at all, but I can assure you that I’ve been very busy with it over the past few weeks.

Service messages and bus times

Trntxt now shows you service messages from National Rail and timings for any rail replacement bus services. Days and days of work condensed into a single sentence…

nrcc

In order to make those changes simpler to implement, I had to make quite a few changes in the background. In doing so I learned more about the Jade templating engine and created a Mocha test framework with the help of Thom Wright at one of the Hack Nights run by CodeHub Bristol.

Little changes

Better station search

When typing a station name in the address bar, a more complex search takes place. Beforehand in order to match a station, the input had to match a portion of the station name exactly. Take for example, the station ‘Heathrow Airport Terminals 1, 2 and 3’. Originally, if you searched for ‘terminal1’, it wouldn’t produce a match. Trntxt removes all spaces and punctuation from the station name, but even then ‘terminal1’ doesn’t appear exactly in the station name – you’d need to have ‘terminals1’ which isn’t immediately obvious. Now it checks the station name to see if all the characters are there in the right order. You can type ‘lonwat’ for London Waterloo and it will return the match.

While writing the improvements to the search function, I made sure that the changes didn’t break anything else by running the tests. The test framework essentially contains a list of inputs along with their expected outputs. When I wanted to write a new feature or fix a bug, I’d put in some failing cases with the result it should return, then I carry on coding until the tests pass.

By running the tests automatically each time I save the code, I can be confident that the new code doesn’t negatively impact any of the past test cases because they are all checked every time.

tests

Appearance improvements

appearance

I decided that while still being minimal, I could improve the appearance of trntxt’s output. The 4 dashes I originally had to separate items have been replaced by a line; I’ve reduced the wordiness of each item description and the CSS fits inside a tweet (just because)!

#TweetYoCss

Preventing unnecessary app icon downloads

While investigating the network traffic to trntxt from different devices, I noticed that Android devices wanted to download the high resolution app icons for Apple devices, which is a bit of a waste when that icon is never shown. I now run a check to see what device is accessing the site, and only send links to appropriate icons for that device. It’s fairly unnecessary and especially not worth the effort to do it, but I did it anyway. Turns out it’s easy enough to modify the content of Jade documents based on various parameters, plus I was annoyed that all the icon tags almost doubled the size of the response (see below). I probably shaved nanoseconds off the page load time.

appicons

More to come

I’m not finished yet! There’s always something else I want to add to trntxt. Search suggestions coming soon!

suggestionMockup

Let’s talk about mobile data

In this post I’m going to talk about what I’ve done (and what I’ve not done) with trntxt in order to get the fastest page load times possible. I’ve split this up into two sections. The first part might be interesting to most of you, whereas the second part goes into technical detail that will look like complete gobbledygook if you haven’t programmed using Node before.

You have been warned.

Continue reading

Realtime hacking with JSOxford

Yesterday I went to a hack day run by JSOxford. The theme was ‘realtime’, i.e. using Web technologies to update a site automatically from a data source.

Since I had no experience with realtime technologies before I came, I didn’t want to make anything too ambitious! I just wanted to learn the basics so that I could make something useful in the future.

Continue reading

YouFeed updates

YouFeed logo

So this happened the other day:

That’s Edwin, the CEO of feedly, saying my YouFeed site is “brilliant”. He wants to integrate the functionality of YouFeed into feedly mini (the Chrome extension). He said that he was considering making feedly mini open source, to allow developers like me to add our own functionality to make feedly better for everybody.

Continue reading