Tag Archives: JavaScript

Hackference 2017

Well, it has been almost a year since my previous post here, very much living up to the “occasional blogger” title on my Twitter profile.

I didn’t think there was going to be a Hackference 2017, what with it being ‘the last Hackference’ last year, but here we are.

Annoyingly, I made it to Euston station at 6:44am on the Friday. The train I booked was scheduled for 6:43, and annoyingly left on time, so I had to buy another ticket. £58 poorer than I was hoping to be that day, I got on the next train and still made it to The Studio (the venue for the day) on time.

I’m not going to say much about the talks: they were all really good, inspiring everyone to think differently about programming, design, and to try out some of the new Web technologies.

IMG_1686

Here’s Oxford’s very own Ben Foxall demoing a combination of the Web Audio API, WebGL and Nexmo’s voice API. In short, a visualisation of a phone call between Ben and his mum, happening in real time!

The next day was the hackathon. 24 hours of working on whatever you want, with whomever you want, from midday on Saturday to midday on Sunday. There were a few sponsors who ran challenges to help focus the direction of the hacks, including Microsoft. Microsoft were encouraging the use of their Cognitive Services APIs – a collection of machine learning features making it easy for developers to add image recognition, OCR, speech-to-text etc. to their own applications; and they would award a prize to the team with the best use of their APIs.

What follow are the slides from my presentation at the end.

Slide text: Hi I'm Dan and I made a thingA Slack message from me: "Anyone stuck for ideas? I want to play around with some of the Microsoft image recognition stuff"

Quite early on I was looking for a team to hack with Microsoft’s Cognitive Services, but I might have put people off when I said some of it would be in PHP.

Added to my Slack message: "Mostly in JavaScript, but may involve some PHP later on. Anyone want to pair up?"

Anyway I carried on on my own and ended up creating this site, Is It A Bench?

Screenshot from my hack "Is It A Bench?"

The idea is pretty simple, you can upload a photo to the service and it will tell you if it thinks it’s a photo of a bench, along with the text in any inscriptions.

I imagine there may be a few of you who are wondering:

Slide text: Why?

Well, I’ll tell you.

This is Terence. You may recognise him from the conference on Friday, or from speaking at Hackference last year.

A screenshot of OpenBenches.org, showing a map of the UK

He made this website called Open Benches.

Another screenshot from OpenBenches.org

The idea is you can upload geotagged images of benches with inscriptions and they will appear on a map.

Screenshot of @openbenches Twitter account

As soon as someone uploads these images, the website will instantly post them on Twitter.

That poses a potential problem. The Internet is not a nice place and some people could upload photos that clearly aren’t benches. It would also be easier to enter in the text of inscriptions if there was some way of processing the images with OCR before they are published.

I set about making a content filter. I uploaded a photo to my service which Microsoft’s vision API decided was adult content and described it as “a close up of a tattoo”. I’ll leave it to you to imagine what it was.

"isAdultContent": true, "text": "a close up of a tattoo"

When my site detects inappropriate content, it responds accordingly.

Screenshot of my website. At the bottom is a question "Safe for uploading?" Followed by "Hell no. Get this off my website"

It was around this time when Joe Nash stuck a message on the Slack group looking for people to play Laser Tag. It has been such a long time since I last played it, and I couldn’t resist leaping at the offer.

It was a lot more exercise than I was expecting that weekend. Also I’m terrible at Laser Tag – I was consistently the lowest scorer, but it was such good fun anyway!

When I got back I got started on the text extraction. I spent a good 20 minutes working out why OCR wasn’t working. Turns out I can’t spell OCR.

A POST request to an endpoint with 'orc' instead of 'ocr'

I was pretty much finished with the proof of concept early on, so after some interesting chats with some of the attendees, I even managed to get some sleep!

The next morning was spent making a couple of performance optimisations, prepping the demo and appreciating the fantastic food for lunch. As a last minute idea I tried making a JSON response to work with photos from the Open Benches website. I didn’t finish that bit in time.

I presented a live demo of what I had, and introduced the Open Benches website explaining how I could integrate the functionality.

Screenshot from Is It A Bench. A close-up of a plaque is correctly tagged with 'bench'

Most of the photos that I’d submitted to Open Benches in the past were correctly identified as benches – even the close-ups of plaques which really surprised me.

A correct transcription of the text on the plaque

Sometimes the text was extracted perfectly, even keeping lines and capitalisation…

A less accurate transcription of a slightly-more-difficult-to-read plaque

But sometimes it wasn’t so good!

After my demo, I tweeted about its existence. Terence seemed to love it!

Once everyone had finished their demos, the sponsors left to decide on the winners. While I didn’t win the prize from Microsoft, I did win a Raspberry Pi Zero from the recruitment company Harvey Nash! During the conference, Harvey Nash had the brilliant idea of giving playing cards to the attendees. Two packs were given out and your goal was to find the other attendee with the matching card to win a prize. It was a great icebreaker and I’d love to see that more in the future.

The hackathon had everyone from students to veteran hackers; all of the genders, ethnicities and operating system preferences; and it was wonderful to see everyone simply being excellent each other. (Apparently that’s some sort of reference to Bill and Ted; if only I knew what Bill and Ted was…)

Here’s to the next one!

Advertisements

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