Tag: Image Manipulation

  • Tube Spotted

    http://tubespotted.com

    Premise

    Inspired by the ‘spotted’ Facebook page craze that swept the internet in 2013, I realized that there was no central place for Transport for London users to vent their frustrations. Millions of people use the tube and overground services in London every single day, and as a newborn Londonder I know only too well the frustrations and oddities these services can bring.

    Tube Spotted provides an anonymous platform for transport users to complain about the inconsiderate actions of other users, flirt with travellers who’ve caught their eye, and generally share their travel experiences.

    Technical details

    I carried over much of my BBC front-end web experience to this development. RequireJS AMD modules separate my JavaScript into logical modules. The experience is as seamless as possible, with a drag-to-update mechanism popular with Android/Apple devices and a continual scroll function that dynamically pulls in more messages via AJAX.

    Message flagging is community-driven such that if a post is flagged enough times it is automatically hidden. Administrative intervention is also built in, so that I can manually approve or hide individual posts.

    Image uploading is also an option, with PHP used to resize the image and store its path in a MySQL database.

    TubeSpotted was designed using a mobile-first approach and is fully responsive. It also has additional metadata in the markup so that it displays well on devices, e.g. iPhone icon.

  • Student Munch

    StudentMunch.com

    Kershaw's Fish & Chips with Mushy Peas review
    Kershaw’s Fish & Chips with Mushy Peas review

    An independent food review site aimed at students; covering everything from tinned food to ready meals. Written in HTML5, CSS, object-oriented PHP and SQL. Plans to introduce a “Login with Facebook” feature in the future.

    Semantic data
    Student Munch is marked up semantically so that it can be interpreted as a review by search engines.

    I use semantic markup so that my reviews can be indexed and displayed appropriately in search engine results. This site would work well as a WordPress site, but I don’t believe we should become reliant on third-party libraries and frameworks and should still learn how to do complex things manually. This has become an educational experience in which I have written code that allows me to upload review images (resized and condensed for high performance over slow networks), manage user accounts from the back end and automatically create search engine optimised URLs.