29 August 2019

Stay at home Mum - I want to work

This is month.... 13(?) of being a stay at home parent. On days like today I would really like to go back to work. On days like last week, I'm happy being at home.

Life is not like this. But Wolf Children made me cry even before being a parent
For most of my life I've been saving money, now it's time to spend it so I can continue to stay at home and that's just really difficult for me! Every second month I go though the process of looking into different jobs, careers, volunteer positions, and then end up back to where I started. The process looks like this.

1. Feel stuck and stagnant
2. Look up a career that I've always wanted to try out
3. Get excited about it, tell people about it
4. Realise that new career would involve figuring out childcare
5. Write in my notebook the steps I would take to get into that career
6. Close notebook

I understand what opportunity cost is. I know, logically, that although childcare would eat up most of my wage now I have to consider future earnings. But, life is easier and less stressful with me at home for my whole family.

I could do more, I have lots of plans for things that I could do with my time, but sometimes naps get skipped or food gets thrown or (this happened for the first time today) somebody poos on the floor halfway through a nappy change. When I look at part-time or remote work that I could do, something like this drains me of energy.

It's easier staying at home, 8/10 days I like staying at home. I would just like a little external fulfilment as well. And some money coming in that's not from my savings account.

3 November 2017

Google Scripts can do some really cool things

I've been doing lots of fun things at my new job (that only I use). When somebody calls to book an appointment there's about twelve questions you have to ask. I tried writing them all down on a post-it but I was always at a different desk and I was always forgetting something.

So I made a Google Form and linked it to the calendar. All the questions get answered, it gets added to the correct calendar and I even found an add-on that emails an email confirmation to the customer! Small things but I've never used Google Scripts for anything.


The only thing is that you have to have the calendar on one side of the screen and select the date on the form on the other side of the screen. So I want to make an extension that will make a pop-up while you're on the calendar page. However, since I'm the only one actually using this at the moment and nobody else asked for it this is dead last in the priority list.

Other things I can do with Google Scripts? So this one is actually saving everyone time - not just me! There are appointment slots in the Google Calendar that have to be re-made every week. One way to do this would be making a repeating calendar event. However frequently somebody saves new customers details as 'save for all events' rather than 'only this event' which means a lot of long term pain when I have to dig out the calendar back-up to find out what we lost.

So! I made a cool script that takes cell 1 as the title, cell 2 as the start time and cell 3 as the end time! Repeat until end! One click and it's all done. Not a super exciting awesome thing but 100% saving people time. 20 minutes a week? Plus time saved when things screw up.

So yeah! Two cool things Google scripts can do!


16 May 2017

Lessons in email migration

Over the past two weeks I've been trying to migrate a small company of 15ish staff to Google Apps. This isn't the first time I've done this but this is probably the most complicated migration I've done thanks to the existing infrastructure.

Me every night since Saturday
The situation was that there was a Google account (let's call it sales@company.com) which everyone accessed the calendar and drive from but a different email server. The email server was also a pain - for various reasons it wasn't an ideal setup but it was working. So the challenge was to sign up for Google Apps, set up everybody's email and then import the existing accounts. Then I would have to merge that with the existing Gmail account.

So there's the background. Now here's what I learnt. Note that none of this is likely to be useful to you as a reader because if I were reading this blog a month my response to most of these lessons would have been "yeah - obviously". I'm just writing this for future me who is hopefully going to learn from this experience.

Lesson 1 - Don't panic and do something you weren't planning on doing

My first attempt at a migration happened back in April and after a panicked Sunday spent going "BUT WHY CAN'T YOU SEND EMAIL GOOGLE" I realised that I had the wrong server. I had been given a login to some email server that existed for legacy reasons but had never been set up properly. But in my panic thinking that emails were going to be bouncing back to customers I set up sales@company.com on Google Apps. This meant that the Google account that people were using to access Drive and the rest was renamed to "sales%company@gtemp.com" because "an organisation has claimed the email you were previously using for this email". I'd seen this error in the past so I wasn't too concerned and didn't think about it too deeply.

Buuuuut this left the account in limbo for about a week (possibly two) - that's two weeks where I don't think anything happened but I don't know. A few problems occurred during this time and I'm pretty sure it was my fault but I didn't realise and I still don't know. I don't know what happened but the timing of the issues match up.

Lesson 2 - People don't read

I'd learnt previously that over-communication is better than less communication since it makes people feel reassured. But I should have known better to communicate anything actually useful or an ask in a text based message. If you want someone to do something (like log out of the old account and log into the new one) you have to either call them or stand over their shoulder while they do it. Lot's of problems that occurred could have been avoided if people had either:

  • Signed out of their account on the Friday
  • Called me when they noticed certain events taking place
Both of these things I had asked people to do - but I didn't grab their attention by the t-shirt and tell them while I was standing right there.

Lesson 3 - Don't give people options

So that gtemp account - I left that open for people because I thought people might need something from it. Say something wasn't on the new Google Drive - then they can log into the old account and check if that has the info they need before they call me.

lol nope

When people did bother to do this all it did was confuse them. What I should have done was locked this account up - changed the picture so you could immediately identify it was the old account and changed the password so everyone who had ignored the "log out on Friday" instruction didn't have a choice.

Lesson 4 - Conduct interviews beforehand

I'm actually embarrassed to admit this but I DID NOT CHECK HOW PEOPLE WORKED FIRST. Because I'm an idiot who didn't want to take up too many people's time. People are always busy and I always feel like an inconvenience so I didn't do this but I SHOULD have. Future me - you won't want to do this either but you MUST. Sit down with each person in each office and just watch them work for half an hour. Ask questions. Don't feel embarrassed - set a timer and stick it out if you have to. Do 5 minutes every 3 hours over a week. It's annoying but if you don't you're an idiot.

This time can also be used to prepare the computers - do the updates, delete the old accounts, empty the recycle bin, etc.

Lesson 5 - Backup everything. Even the things that have nothing to do with anything.

I DID THIS! I'M SO GLAD I DID THIS.

I didn't do it as much as I should have and more backups would have come in handy but every backup I did I used. I backed up a Google calendar that I was sure wouldn't need a backup but because I was doing the other calendars I did it anyway. I backed up a file only I have and only I use. The original file was overwritten by someone.

Lesson 6 (?) - Do things one step at a time?

I'm actually not sure about this one. Maybe I should have updated the email and left the Google Drive and calendars alone? It would have made my life easier on that first day because I would only have been worrying about the email and given myself more time to think. But on the other hand - maybe doing everything at once in a big bang was better. I thought I HAD to do it this way but I didn't consider a slower roll out. Maybe this should read "Consider doing things one step at a time".

Lesson 7 - Don't do things by yourself

So there are two parts to this.

Part one is that if you're doing someone un-routine it helps to have someone to talk things through with. Someone who can follow what you're doing even if they haven't done it themselves. I'm not talking about rubber ducks here but someone who will repeat things back to you and tell you if you've missed something obvious.

Part two is that on day 2 of problems a contractor was called in to support me. I was initially hurt / annoyed but my ego isn't big enough to hold it against anyone and actually this person became the person I was talking about above. This person had more experience than me and was able to solve a problem I was leaving for another day. Having someone else also reassured other people that everything was being handled.

So if someone from this company is reading this thinking "Ah - I feel bad for implying she couldn't do it alone" don't feel that way. I'm over it and if you'd asked me I wouldn't have accepted help, so thank you and I'll work on the asking for help thing.

Lesson 8 - This will take more time than you think AKA One project at a time

So I'm not getting anything else done at work this week. I've used all my adrenaline up and I'm basically scared off any more change for at least the next month. There's also a few things from the gtemp account that still need importing into the new account this week. I'm relying on the fact that I'm the only person who uses these features (e.g G+).

This was not the week to have a deadline for another project. Whelp. Not much I can do about that now. Here's to a week of late nights and early mornings.

がんばれ!


12 March 2017

Responsive Images

You have no idea how much effort this took
Brief: Change the website to an image from the wedding with a thank you message. Should also be mobile responsive.

Effort estimate: 1 day

Me on day 1
Actually if 1 day = 12 hours than that was a remarkably adroit estimate on my part. To be honest the reason it took so long is my fault. I wanted to use srcset because I haven't used it before. I did not want to use a background image and a div because I have used that before.

Time creating a mobile-version of the site and selecting and image: 1 hour

Time making the text float and move around as the media queries came into play: 1 hour

Time trying to get srcset to do something that would be easier with a background-image and div: 8 hours

Time spent editing images, finishing site and uploading final site: 1 hour


Well - it is mobile responsive and tiny (pictures are the only external files) which is what I wanted. I got to play around with responsive images and make something simple enough that I didn't have to spend all that much time on it.

I was also really surprised about how much I've learnt since putting that original site up. My meta-tags weren't closed, the visited and unvisited links were the same colour (accessibility no-no). My Mum also complained that when she looked at the site on desktop she saw pictures she hadn't seen before - the result of the main part of the image not showing on mobile. It's amazing how much of a difference a few months has made. 

20 February 2017

Frontend skills test


A while ago I applied for a post without realising it was for a senior position rather than a junior one.... It was the last day to apply when I found it so I didn't check - I just submitted my application.

In any case I was then given a test to do via GitHub - I was going to clone it but I realised perhaps adding my answers where they were find-able by others doing the same test might not be the best idea. I must have done the test correctly because I got to the interview stage which I didn't do so well in - I prepared for completely the wrong type of question. I worked pretty hard on this so I'd like for it to exist somewhere.

So! Here are my answers!
# Technical skills test

This front end development test is intended to cover a broad range of skills
required to deliver high quality government digital services. This includes:
* Accessibility
* HTML
* CSS
* jQuery and JavaScript
* Other best practices 

Candidates are asked to perform this test remotely and submit their responses to the sender.

## Accessibility

1. Describe how you would implement the page available at http://calendar.parliament.uk

    Focus specifically on not disadvantaging users of:
    
        1. Assistive technology
        2. Older/less featured browsers

Your answer should describe both how you would do this and describe what specific features
of HTML, ARIA, CSS and JavaScript you would use to achieve this.

---
Firstly it is important to use a logical structure for the DOM and decide on semantic elements for each section of the page.
For this page I can see a header, navigation, sub-navigation pages, breadcrumbs and then two main sections with an aside followed by a 'share' section and a footer.

While using HTML5 semantic elements such as `[aside]` is useful for those with accessibility needs this can mean that those using older browsers are unable to display the page correctly.
All pages with HTML5 elements should also be styled with `display:block` as well as include the W3C `html5shiv` javascript file to ensure compatibility across browsers.

**Navigation Elements**: Should use unordered lists and the `tab-index` attribute. As there are multiple `nav` elements on this page it may be less semantically confusing to define a number of navigation divs while also using the `aria role` attribute to make these easy to navigate.

**Calendar Elements**: Use `aria role` attributes for all `[div]` elements. Use CSS `:active` and `:focus` to identify where a user is on the page and ensure all browsers will be able to communicate that information to the user.
The date picker should be easy to tab through and use dropdowns for the month and year rather than making users pick a specific week from the last ten years.
Although HTML5 provides a `date` function this isn't supported by Firefox, Internet Explorer or Safari so a javascript datepicker should be included as a fallback.
Finally, when the date changes the information below should also change and use `aria-live` to alert the user to this change.

---

2. How would you implement a version of GOV.UK browse for a new digital service.

    Your answer should:
    
    1. identify, so far as possible, what GOV.UK have done to ensure accessibility and progressive enhancement
    2. assume you're approaching this from scratch

---
_Note: I understand GOV.UK to be a web portal for a number of user questions, GOV.UK then answers those questions and directs users to another site that helps a user complete a related action (ex paying council tax or claiming a benefit)._

The current GOV.UK service uses many best-practice methods to ensure both accessibility and progressive enhancement.

Firstly, it's immediately obvious that a lot of time has been spent on the UX / UI design of the site.
The contrasting colour and reliance on text formatting and document structure rather than images are useful to all users in terms of reduced pay-load but also to users with accessibility-needs as there is less of the page to navigate through. The text is also easy to read and scalable.

The order of the navigation and the 'popular' section try to answer your query without the user scrolling down the page, and therefore without a screen-reader or keyboard-only user having to get very far down the page.
The page is structured in an ordered way and is easy to navigate through a keyboard while for screen-readers the least useful elements have `aria-hidden` attributes.
Finally, the head of the document includes a number of tags that allow older browsers to access the site.

If approaching a similar project from scratch the first step would be user research to find out what information users would want to receive and which questions they want answered.
For a service that must be accessible and bring a number of elements under one domain and search index the design is the most important element.
The design of the page must be clear, re-usable and uncluttered to ensure that questions can be best answered through this portal rather than another. The focus should be on providing a clear, plain and accessible interface rather than one with a cutting-edge design.

To that end a number of standards should be put in place after a heavy amount of research into what users want to get out of the platform.
After these standards the content and writing should also be a key focus of the project that answers questions directly rather than through jargon and technical language.

---

## JavaScript and jQuery

1. An exercise using jQuery is provided in test-jquery.html.
---
_Note: I was asked to include my answer in the document_
```
[!DOCTYPE html]
[html]

[head]
 [script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"][/script]
 [meta charset=utf-8 /]
 [title]DOM manipulation exercise[/title]
[/head]

[body]
 [h1]DOM manipulation using event delegation[/h1]
 [p]Using event delegation write the jQuery or JavaScript that will hide the <li> element that is clicked on. Any subsequent clicks should have no effect.[/p]
 [p]Please do not edit the HTML or CSS directly to achieve this.[/p]
 [div]
  [h2]First set[/h2]
  [ul]
   [li]HTML5[/li]
   [li]CSS[/li]
   [li][span class="highlight"]JavaScript[/span][/li]
   [li]Ruby[/li]
   [li]Django[/li]
   [li][span class="highlight"]React[/span][/li]
  [/ul]
 [/div]
 [script type="text/javascript"]
  $("li").click(function () {
   $(this).hide();
  });
 [/script]
[/body]

[/html]
```
---

2. If you saw this in a Pull Request, what would your advice be:

 ```
 Array.prototype.split = function(i) { // Adds split to all arrays
    return [this.slice(0, i), this.slice(i)];
};
 ```
---
* Move the comment to a new line.  
* Change the name of the function to avoid confusion with `string.prototype.split`. Suggest `array.prototype.segment`
---

## CSS

1. What colour would each of the following elements be (Assume each pair of rules are targeting the same element)
 ```
h1 {color: red;}
body h1 {color: green;}

h2.grape {color: purple;}
h2 {color: silver;}

html ] body table tr[id="totals"] td ul ] li {color: maroon;}
// li has an id of answer
li#answer {color: navy;}
 ```
---
From the rules given those with greater specificity would determine the colour of the element:
 ```
body h1 {color: green;}
h2.grape {color: purple;}
html ] body table tr[id="totals"] td ul ] li {color: maroon;}
 ```
---
2.Given the HTML below, write a CSS3 rule that will give prepend the text ‘Tel:’ to the third list item.
You are not able to amend the HTML to achieve this.
 ```
[body]
  [ul]
    [li]JavaScript[/li]
    [li]HTML[/li]
    [li]Ruby[/li]
    [li]Python[/li]
  [/ul]
[/body]
 ```

---
My rule:
 ```
li:nth-child(3):before {
content:"Tel: ";
}
 ```
---
3.What changes would you suggest to make these CSS rules ready for a production environment?
 ```
[!DOCTYPE html]
[html]
    [head]
    [meta charset=utf-8 /]
    [title]Test[/title]
      [style type="text/css"]
        #one { background-color: #000; }
        .three { color: rgba(255,255,255,1); }
        div ] span { border: 3px solid green; }
      [/style]
    [/head]
    [body]
      [div id="one"]
        [div class="three"]
          Hello [span]World![/span]
        [/div]
      [/div]
    [/body]
[/html]
 ```

---
* Move the css into a new file
* Give the body a background colour
* Standardise the colour codes used. There doesn't seem to be a reason to use rgba colour codes.
3 digit hex could be used but if more code were to be added later 6 digit hex may be required.
```
       #one { background-color: #000000; }
       .three { color: #ffffff; }
       div ] span { border: 3px solid #008000; }
```
---
4. How would you style all links to 'gov.uk' domains differently to other links in an application?

---
Assuming there are more gov.uk links than other links I would use:
```
a {color:green;}
a:not([href*="gov.uk"]) {color:blue;}
```
If there fewer gov.uk links than other links I would use:
```
a {color:blue;}
a[href*="gov.uk"] {color:green;}
```

---

## HTML
1. A test using HTML5 is provided in test-html.html within this repository.
Please amend the code and submit your changes as a pull request.

---
_Note: I was asked to include my answer in the document_
```
[!DOCTYPE html]
[html]
  [head]
    [meta charset= utf-8 /]
    [title]DOM manipulation - Test 5[/title]
    [style type="text/css"]
        body {
          font-family: sans-serif;
          font-size: 1.5em;
          line-height: 1.5em;
        }

        div {
          margin-bottom: 1em;
          padding: 1em;
          background: #EFEFEF;
        }
  [/style]
  [/head]
  [body]
      [h1][span class="first"]HTML5 test[/span][/H1]
  [p]The HTML of this page contains a number of errors. Please amend the source code to remove these errors and paste an improved version into the worksheet.[/p]
  [p]Please limit changes to errors that relate to HTML5 only. Do not:[/p]
      [ul]
    [li]Make changes that might fix an issue in XHTML, but are [strong]not relevant to HTML5[/strong][/li]
    [li]Make stylistic changes that are not relevant to the [strong]specification[/strong][/Li]
      [/ul]
  [/Body]
[/html]
```

## Testing

1. What are the key things you need to test for on the front-end of digital services?
---
* Usability / functionality
* Accessibility
* Page Speed / Load Time (depending on audience connection speed)
* Browser compatibility (depending on audience browser)
* Mobile Compatibility

---
2. How do you approach testing the front end of applications?
---
I first make sure that everything is working as it should, tabbing through options to make sure the user path is clear and simple.
I use a different browser than I would usually do this in - Usually Internet Explorer and then Firefox with ad-blocker installed.
When possible I also ask a less-technically minded friend or colleague to test the application to make sure I'm not overlooking the obvious.
I then use Chrome Accessibility Development Tools to make sure everything that needs to have an `aria` label has one and the whole page can be navigated through the keyboard.

Once assured of  basic functionality I then use Chrome Developer Tools to check for 3G connection speeds and common viewport sizes.
Using data gathered about the type of audience I will then check compatibility with any other browser or connectivity needs.

Finally I'll run the page through the W3 Markup Validator to check for missing tags or text and the Web Accessibility Checker for any final problems.

---

## Best practices

1. Is this good quality code? Provide a brief justification of your answer.
 ```
  [button
    type="button"
    onclick="document.getElementById('xyz').style.color='red';"]
      Click Me
  [/button]
 ```
---
I wouldn't say this is good quality code.
As everything is being applied inline it would be difficult to reuse and re-apply this code.
The javascript and css should be moved to different files and applied to the element using either a class or id depending on how the button is used.  

On the positive side, it's good that the developer has used the button element rather than a div and has used `type="button"` to show there is no form behaviour associated with the button for cross-browser compatibility.

---
2. Describe three ways to decrease page load time (answers may include perceived or actual load times)

---
1. Minify and combine external files:  
Each external resource has to be requested by the browser. By combining files just before production, fewer files have to be loaded before the page can be displayed.
Minifying the files decreases the size of the file and thus the time it takes to download. Deleting superfluous code will also help reduce the filesize.

2. Optimise and scale image sizes using the `srcset` attribute:  
Images are one of the biggest causes of page load delay as they can be very large files even when a file of that size is not necessary.
Here are some ways that optimising images can be done:
    * Only use images when necessary - don't rely on images to make sense of a layout and use SVG elements when possible.
    * Optimise images so they are of the quality and size necessary.
    * `srcset` allows you to provide a number of images of different size and quality while allowing the browser to select the one most suited for the viewport.   
    As `srcset` is not currently supported by IE or mobile browsers other than Chrome so it's important to optimise and scale images despite this tag.
However `srcset` can be catered for by 82% of UK users as well as being part of the WHATWG living standard for HTML.

3. Optimise browser caching:  
Each external file should include `cache-control` and `eTag` headers that tells the browser how long a resource can be cached for and check if the resource has changed since it was last accessed.
This will reduce page load time for users who routinely visit the site.

---

3. Why is it generally a good idea to position CSS  `[link]` s between  `[head][/head]`  and JS  `[script]` s just before  `[/body]` ? Do you know any exceptions?

---

**CSS** is usually positioned between `[head][/head]` so that styles can be applied to `[body]` content as it loads.
If a stylesheet were loaded further down the page it may result in elements moving around or fonts changing as a user navigates the page.
I'm aware that HTML5 allows `[link]`s inside the body when dealing with different pages with some common elements but other large differences in order to prioritise those common elements but I've not come across an example of this being used so I'm unsure which situations to use this in.  

**JS** is usually positioned just before `[/body]` as the files can sometimes be large.
Rather than waiting for the files to load placing them after the content of the page means a user will not be waiting for these files before they are able to view the page.
As these files usually augment the functionality of the page rather than define it loading content is prioritised. Where the file is central to the functionality of the page it is placed within the `[head]`.
It is also possible to place all files within the `[head]` but use `defer` and `asynch` tags to allow the main content of the page being loaded without waiting for the external files.

---



14 January 2017

Being proud of myself


There are two things I do at the start of a new year.

One is a Lifehacker review of my previous year. I actually can't find the original article but the questions I answer every year are:

  • What went well
  • What accomplishments did I have?
  • How did I improve my life?
  • How did I improve my relationships?
  • What did I remove from my life that is now making me happier?
  • What do I wish I had taken more time for?

My reviews have their own folder in my Google Drive

The second thing I do (or have done for the past couple of years) is a Buzzfeed Memory Jar.

I've actually been feeling very down about the past few months. On top of wedding related stress I'm leaving BrexitCentral at the end of the month - which was planned from the start but I think it's going to be my last job in Westminster and that's left me feeling very conflicted. So today, when I finally felt like I could sit down and do my review of last year I opened up my memory jar and started unfolding the little bits of paper that I'd kept for a whole year.

And it made me very happy.

Sometimes I've written the same achievement twice because it made me so happy. Sometimes I achieved very small things that while being small made me feel accomplished at the time. Last year I wrote down the important ones in my review document and then burned them. This time I feel so overwhelmed - I started today feeling tired already and avoiding my year review because I wasn't sure what to put - I'm going to document them all here exactly as I wrote them before burning them. (Fiancé. If you're reading this I'm sorry in advance. I know that this is what you're supposed to use the shredder for.)

So, in categories but no particular order within those:

Life:

  • Stopped Grandma running a red light (18/02/16)
  • Got my Day Skipper Licence! (12/02/16)
  • Got my Day Skipper Licence! Not Comp Crew! <3 li="">
  • Lay my hands flat on the floor after Yoga!
  • Got free pizza from the lovely people @ Papa Johns! (24/11)
  • Cleaned the washing machine filter
  • Went to see "Your Name" - cried a lot (24/11)
  • Unblocked bathroom sink

Social / Courage:

  • Darren said I was a very social person
  • Called Yoko and had a kinda conversation in Japanese (08/12)
  • I asked the couple to move during the last act of the Cursed Child as I couldn't see the stage properly - and they did! (16/09/16)
  • Told JI I didn't want to work at BC long term (17/08)

Work:

  • My licence fee lines document was deemed super helpful by Dia and Alex. John said they should be a permanent reactive work feature (13/05/16)
  • JI says my social media presentation work is first class work (11/03/16)
  • Jonathan said I get shit done (01/12)
  • John approved me working with the interns and thought my prep work was awesome. Kate thought it was helpful too! (14/05/16)
  • My volunteer planning guide is AWESOME (Says KG) (13/05)
  • Correctly moved our WP hosting (25/11)
  • Worked really hard on the Steel Briefing in terms of organising so Alex was freed up to write. Also updated social media & website v. soon after publishing (01/04)
  • JO and AW both like my adaption of JSJs research note template. It both looks good and is workable for everyone! (27/04/16)
  • Built a clean version of Your TPA within 30 mins after realising there were some errors on my Saturday build. (22/08)
  • FINISHED TPA APP!
So - even if I didn't manage to achieve one important thing a day, or one important thing a week, I feel pretty proud of myself right now. I'm going to go and write my review.


Source: ZeroChan






18 November 2016

*~*~New Project~*~*



Apologies for the overexcitement. I'm just very happy since it's been a long time since I started anything new.

This is project left-yet. As in "Have they left yet?" I thought it might be something vaguely fun and it might give me a good mix of new and old things to work on.

The aim for this project is to create a responsive database of everyone who said they'd leave the country when x happens. I realised soon after creating the table that this leaves no room for Gary Linker and his ilk so I'll have to have a think about that.

Anyway, the point is to use responsive table design, Firebase and AngularJS. Screengrab of a few hours work below. Angular works, I found a good tutorial on responsive tables that I've ripped off and I have Firebase kinda set-up. I've stopped today because I've broken it but I think I did something very specific that makes that my own fault.

Hopefully I come back to this sooner rather than later.