Recycling Day - this image auto loads when it's time to take the recycling out

My First Web Dev Project: Chelsea Rubbish & Recycling Hack

First hard-coded project is alive and out there!

Built using HTML, CSS, AJAX and JavaScript

There’s no denying it, this is a big deal. My first project, conceived and built from scratch. I mentioned it in an earlier post and after no small amount of panic, despair and sweat. It is now live! It lives! It lives!

The site can be found here: Chelsea Rubbish & Recycling Hack.

DISCLAIMER: I’m still struggling with Amazon Web Services ( I need to install node.js and run code from their cloud, this is surprisingly difficult).

Built with UX in mind

I’m influenced by Steve Krug’s Don’t Make Me Think, the basic gist of which might be clear from the title: do not make users work when using your product. Instead it is much better for everyone if it’s painfully clear what needs to happen. Based on this idea, I decided that my product would not require any user input. This would be an upgrade (IMHO) from the existing products available through the city of New York. The existing product requires the user to enter three fields of information.

See below:

Source

NYC's existing rubbish & recycling product

NYC’s existing rubbish & recycling product

Given that every field requires user input, they are essentially obstacles for the user, standing between their current position and the information they want. The existing site is also not responsive, making it a rather clumsy experience for any users on a mobile.

The Code

Using the city’s 311 API I can check the schedule is either on track or not. Combining this data with the pre-set schedule, a healthy series of JavaScript if/else statements set up the four states. Each state (normal collection, collection exception, no collection day, recycling collection) has a corresponding image, which loads upon page load. The images are in an array and function like a slideshow. Simples.

Recycling Day - this image auto loads when it's time to take the recycling out

Recycling Day – this image auto loads when it’s time to take the recycling out

Design!

Hmmmm, I rather imagined that I would be better at design than turned out to be the case! However I persevered and I’m more or less happy with with I ended up with. I created this header in PhotoShop, which was fun. Other than that, I went with grey and bright orangey-red for the colour scheme.

Recycling Site - Header

Recycling Site – Header

Next Steps

Ideally, I would have preferred to have this product work for anyone in NYC, but that would involve user input. When I’m super-clever with location APIs perhaps I could use this data to build something like that, but of course, it’s just as likely that someone could look whilst commuting, meaning it would return data for that location, instead of where they live. Unless of course, there was some sort of cookie functionality… but I’m getting ahead of myself.

I still dream of Google Now integration, to take all of the effort out of it for the user, meaning they would just see a card reminding them to put out (or not) their rubbish. One day, one day.

Next Project

I still dream of combining my love of art and technology to build something. Showing auction results in the search results for example, but that’s a bit beyond my scope, I don’t have access to Google’s Search results! Also, clearly, that’s a fairly ambitious coding project, I’d need to join forces, which, by the way, would be awesome. Anyone? Tony Stark? Do you have a minute?

First Descent Doula homepage

First Descent Doula branding and web build

Blue might just be the warmest colour for branding purposes after all.

Oh heady day, we are making excellent progress with the First Descent Doula site.

The issue with this sort of niche is that Doulas are not medically trained, it’s a more supportive role, but a role backed up with lots of incredibly positive statistics proving their worth.

In terms of branding, we wanted the site to look approachable but authoritative, useful and packed with information, but with a calm vibe. I believe our chosen page design and palette embodies these aspirations.


The logo, designed for First Descent Doula, is sunny and pretty, Kate liked the look of it but I felt it was important to tone down the site colours. The blue/green of the logo is gorgeous but a bit too saturated for wide usage. Building on this logo, I reduced the saturation of some complimentary blues, and used black and white images.

It might be a result of the times, but cutting any colour with grey usually lends it a more considered tone.

First Descent Doula homepage

First Descent Doula homepage

 

This theme of grey text and muted blue from the homepage is used throughout the site. To keep it somewhat upbeat we experimented with links in a brighter turquoise, to attract the eye and make links obvious.

First Descent Doula Resources Page

First Descent Doula Resources Page

 

We have had opted for a soft launch, right now, friends and family are reviewing the site, because fresh eyes always do a better job.

It will be interesting to monitor the SEO value of the site too, as I have made every effort to set up all the page content in the most SEO-friendly way, whilst also encouraging Kate’s content schedule, both on the blog and on social media.

The goal of the site is to provide information and promote First Descent Doula services, I believe this site does this, it will be interesting to see if the public agree.

Front End Development and projects galore

Or, what can I achieve in the 80 days remaining?

Willy Fog went around the world in 80 days, what can I do?

As a documented procrastinator, suddenly seeing that I had 80 finch-free days left surprised me. Clearly, now isn’t the time for a 70.3 Ironman or spartan race, but perhaps some of my more sedate, creative ambitions could be tackled?

In this spirit, I have been updating my honest pregnancy timeline, documenting minute but telling details of the experience.

I am also working on my first ever JQuery, JavaScript product for my final project in my front end development course. Oy vey. There could well be tears before bedtime on that one because I’m finding it very difficult to filter the info I need. It’s due on the 28th October. Time is running out…

My final push is another ‘honest’ bit of nostalgia, it’s called Crap Jobs and it’s my attempt to analyse my less-than-stellar career so far, to spot patterns, acknowledge my mistakes, as well as those moments of bad timing. Whilst writing it is grimly entertaining, it’s also galling to write from such a perspective of failure, clearly, but hopefully I will learn something form it and expel a few demons at the same time. On verra.

First front-end development product

Coding in the wild… a test

For my first project, I plan to design a site that will do the following:

NYC Recycling Schedules and Exceptions

  1. user enters address
  2. site reports back the recycling schedule for that address on the day in question
  3. options include:
    • regular scheduled delivery, in which case icons will appear showing the items to be put out for recycling.
    • no delivery scheduled
    • delivery exception, which might then trigger email to signed up users

To access this information, I have New York’s 311 API. I will also need to work out email address sending, which also means an email signup form. Ideally the email can be automatically generated, perhaps listing the reason for the exception. This also means that when the user signs up to use the site, I will need to save their email address and street address. Without being creepy. Ultimately it would be cool to open it up to GoogleNow, so reminders and exceptions could appear in the GoogleNow cards without a user having to check email. Pipe dreams. For now it will be powered by HTML5, CSS and JavaScript.

This idea came to me as our building was handed yet another sanitation fine, seemingly at random by the Department of Sanitation. Each fine is $ 100, and it’s starting to add up. I’m pretty good on the regularly-scheduled pick-ups but the exceptions, due to holiday schedules or inclement weather cause problems because then the rubbish is just left to pile up. This in itself usually doesn’t result in a fine, but it does mean the rubbish gets ripped open, causing it to spill on the street, and that does result in a fine. No more! No more! It’s quite cool that this is going to happen, I can tick something off my project list, as referenced in this earlier post.

Alma-Tadema - Sappho and Alcaeus. People gathered around a poet

White Spaces and Pacing in Storytelling

Or – what unites Frank Rose, Charlie Melcher, Maria Popova, Scott McCloud and Derek Walcott?

 

In my mind, something does, but first, some exposition:

I did one of those slightly useless but thoroughly interesting degrees, studying Classical Civilisation at the University of Warwick and whilst this degree in no way trained me for any sort of profession, it was definitely influential for shaping some of my ideas and critical thinking skills.

Continue reading

Branding , Building and the Knowledge Gap

I am currently knee-deep in the mysteries of front-end development. It has been a productive few weeks and I’m pleased to say that HTML + CSS are treating me well, so far. Javascript is a tricky mistress, complicated language makes an already-unfamiliar approach more error-strewn. I’ve spent a couple of hours this afternoon trying to understand the basic structure and it’s dismal how little progress I have made. I may even have gone backwards.

Branding and Copy – how to convey trust?

Continue reading

And so today in personal growth: front-end web development

Front-End Web Development and I are going on a date tomorrow night and I’m cautiously optimistic that it’s going to lead to several more and be the start of something enduring.
In a bid to just be a bit more technically on it, I’m enrolled in General Assembly’s Front-End Development course and will be learning the following: HTML5, CSS and Javascript. It’s the Javascript in particular that floats my boat because it can be used in both front and back end. Maybe now I can build those pipe dream projects that sometimes keep me awake at night? Projects that include, but are not limited to:

Continue reading

Honest Account of my Life - a snapshot of one of the Timeline features.

Busy behind the scenes

My last post was in May, however I have been working like a whirling dervish elsewhere on the internets, all with a view to improving my working knowledge and understanding.

The Honest Account Project

One mini project is featured here my flirtation with the Timeline opensourced javascript. This first attempt is really coding-by-numbers, almost remedial in efforts, but it was done in a quest to start somewhere so I could then start experimenting with the other, more customisable code variants out there. All in a bid to get more with it.

Continue reading

LA Times' Redesign: Visual Browsing

The LA Times’ site redesign: Twitter front and centre. Facebook is also there.

The LA Times has, this very morning, released a site update. We were given some idea what to expect from Eddy Hartenstein’s email, detailing responsive design, image-centric journalism. So far, so now, so what?

Happily, the new site looks good. Slick, cool, and of the time, which, as shallow as it sounds, does mean something to users. Outdated websites are just a bit depressing to use and also reflect badly on the company. So this is good. I will discuss each of the features in more detail, but the first glaring, searing observation is the dominance of Twitter over Facebook, or other social networks on article pages.

Continue reading

following the future of media so you don't have to