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

Read More

*~*~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.

Read More

Post-TPA Projects

JUST IMAGINE YOU'RE OUT THERE!
Image from PersonaCentral.com

Somehow I'm currently deputy-editor/digital manager at BrexitCentral!

Apart from creating a very early-days website (which I forgot to screenshot and has since been lost I had a backup in an obscure corner of my computer. Will add a screenshot at the bottom) there hasn't been much coding going on. That early-days website wasn't more than a placeholder with an email signup and some info about BrexitCentral but I built it in a day using Bulma.io to get it started. This is actually the second time I've used that framework - because of the way it's put together it's really easy to make something pretty but simple. It's much more lightweight than Bootstrap as well.

In other news:
YourTPA is finally available on the app store! Although I'm not as proud of it now as I was in the past.... I've moved on considerably since this was completed...

I've been learning more about Photoshop under the tutelage of new colleague Darren Grimes. As in all cases where you learn something new I shudder to think about the ways I was going about things in the past. I'm particularly enamoured with the pen tool and colour replace feature.

Japanese is back on the agenda again. Mostly due to many, many hours being spent playing Persona 5. Although it's been pointed out that the vocab lists I'm making during my playtime aren't particularly coherent.

This week's vocab list for example:

汝 (Thou)
容態 (Condition / State)
もやもや (Foggy / Gloomy)
ウソ泣き (Crocodile tears)
黙秘  (Silence regarding a subject)

Told you it wasn't exciting

Read More

Latest Projects

I realised my project update list has dragged on so here's how everything is going.

TPA Project
I'm actually leaving the TPA at the end of the month! At the time I decided to quit without having another job to go to and planned to take a long break in order to focus on my front-end skills. However since then I've been lucky enough to have been offered another job! So I've already done a little for that but I'll be working on it properly in September.

In any case one of the last things I have to wrap-up at the TPA is this application. Although I didn't use all the material design patterns that I wanted to I'm pleased to say that this is all done BUILT (which took me forever) and uploaded to the app store (without being published) as of yesterday.

Although on my way home I was playing with the version I installed on my phone and realised I forgot to include an icon so will have to suffer through re-building the whole thing again *cries*. Looking at it now that's the working title of the app rather than the actual title as well... *sigh*

In any case - here's what it looks like!

I'm just quite glad it's nearly over to be honest... It was difficult to find time to work on between everything else - I can't believe I've been working on this since January and this is all I have to show for it.....

Debt Clock Project
At some point the Twitter Debt Clock stopped working. I wasn't able to figure out why it was broken and eventually decided to give up in favour of the aforementioned project. Then debt-clock.org stopped working and I can't access the server :/

Perfect time to just rip everything out and start again!

Old Site

New Site! Using the Bulma.io framework

Further down the old site with the JS working

Well - there's more than a couple of things to add and I'm not happy with the design (there's a list of things that need adding) but the new site has a tiny filesize compared to the old one and looks much better on mobile (didn't think to take that screenshot...)

So - I have 1 week left at the TPA. I wonder if I can finish this and get the Twitter-bot working again in that time.

Beck-Allan's
Last one! This is actually something I did as a challenge. I had 3 hours to fill and wanted to see how far I got. Beck-Allan's are already in the middle of a web-changeover so there's no way this project will go any further.

Old website

New website! It's a little grid-y but it has everything

Icons from Font Awesome

I'm not particularly proud of this one because the fonts, colours and otherwise don't really fit together but the most important thing is that all the information is on one page (even on mobile! And again I forgot to take that screenshot....).

When sketching from the old / current website there were a number of small pages with a number of images and a little text for each of the apartments and I thought that would be better handled with a gallery. All the relevant information about the apartment is now right by the picture and I tried to standardise it as well (ie rating, how many people, charm points).

And that's it! All my projects from the last month - and I'm really hoping I'll get to work on some more fun stuff very soon!

Read More

Weddings are hard

You may have missed it but in November 2014 Matthew and I got engaged!

(Not us - just wanted to use this picture!)

Since then we had more than a year of doing very little about it as moving in together and starting new jobs made our life quite busy. What I was most excited about though was the website - at the time Matthew was studying HTML and I had just discovered the CSS Zen Garden so I was already thinking about what information should be on the site.

We knew we'd have a smaller budget so what we wanted was a place where all the information could sit rather than using thousands of bits of paper - through the colours, fonts and images we also wanted to convey what kind of style and level of formality we were expecting. As far as concrete design principles go all the information should be on one page and the layout should be responsive.

Design 1

Here's my initial design. Right at the top you can see my biggest concern was that my email was nowhere on the page. Eventually I set it up info@jordanandmatthew.com to get around that problem although js-mailer seemed like a good solution as well.

When I started building it - this design looked terrible. It was cluttered and the images weren't in a consistent format. So:

Design 2

Much better! The content hasn't changed and the layout hasn't changed that much but everything is more consistent.

And here's the finished product!

Sorry for the rough quality. Enabled by ScreenToGif

The most difficult / fun part was probably working out the flexbox on the "wedding party" section. After my 3rd attempt at "width: x%; float: left;" refused to work I remembered reading about flexbox in .Net Magazine and looked into it a little more. I still don't completely understand how to use it but it was very helpful in this case!

There's still a whole section 'Schedule' missing at the moment because we still haven't confirmed the timings of the day and what kind of ceremony it will be. Originally (you can see in the wireframes) I thought this should be a parallax scroll element that adds items as you scroll down but as I couldn't think of another use for this feature maybe it would be jarring to add it in just for one section?

I suppose I'll just have to try it and see!

Read More

Which Waste Item are You? - Adventures in Javascript

I'm really interested in the 'quiz trend'. I remember being 12 and taking a number of quizes that would purportedly tell me "Which character from your favourite TV show are you?" or "What percent elf are you?" or "What were you in your past life?". Buzzfeed is now king of the quizzes. You can find out basically anything about yourself in the buzzfeed quiz section.

Sidenote: I read a theory somewhere that this obsession with quizzes is to do with population growth. Ie. Back when you were the only baker in the village you knew who you were and how you were different to everyone else. Now you have to differ yourself from the rest of the planet by placing yourself into the middle of a venn-diagram that you make smaller and smaller through quizzes.

Sidenote 2: I'm Saturn.

So - I thought the TaxPayers' Alliance could really benefit from one of these. Because everyone likes personality quizzes. So here it is!

Which Waste Item are you?

This was a lot of fun to puzzle through! It took me a couple of days to write the content, figure out the personalities and what 'IT waste' should have in its wallet. Then I added the images and css because that's the fun part.

// Onclick disable future clicks and increment variables
  $('input').click(function() {
    if ($(this).parents('label').siblings('label').hasClass('finished')) {
    } else {
      $(this).parents('label').siblings('label').addClass('finished').css({'opacity':'0.6', 'cursor':'default'});
      if ($(this).hasClass('alpha')) {
        answersArray[0]++;
      } else if ($(this).hasClass('bravo')) {
        answersArray[1]++;
      } else if ($(this).hasClass('charlie')) {
        answersArray[2]++;
      } else if ($(this).hasClass('delta')) {
        answersArray[3]++;
      } else if ($(this).hasClass('echo')) {
        answersArray[4]++;
      } else if ($(this).hasClass('foxtrot')) {
        answersArray[5]++;
      }; 
      total ++;
    };

That was the fairly straightforward part. The rest is guessable but it took me a while to puzzle-through. I tried a few different solutions before deciding to use an array. If you pick the answer that corresponds to Personality 1 that will increment array value 1. At the end of the questions the position of the highest value in the array is returned and matched to a Personality Index.

So at the end of the questions you may have returned: 3 'Personality 1' answers; 2 'Personality 2' answers; 1 'Personality 3' answers.
In that case the array will be [3,2,1] and the index number returned will be 0. This is then re-matched to 'Personality 1' and that will be your result.

Pretty simple. But what about when the array is [2,2,2]?

I looked at how Buzzfeed did their quizzes and realised that when there was a clash Buzzfeed was just choosing the one at the end of the array whereas I wanted the choice to be randomised between the clashes.

After much experimenting the way I solved this is rather long-winded.

//Figure out personality index
  var finalResult = function() {
    
    //Give the position of the number in the array that has the greatest value
    var finalAnswer = answersArray.indexOf(Math.max.apply(Math,answersArray));
    var finalAnswerValue = answersArray[finalAnswer];
    var compareArray = []; 
    
    
    //Push the index of items in answersArray that == the maximum points number
    for (var i = 0; i < answersArray.length; i++) {
      if (finalAnswerValue == answersArray[i]) {
        compareArray.push(i);
      }
    }
    
    // If there is nothing in the compare array go with the original answer if not select a random value from the compareArray
    if (compareArray.length === 0) {
      personalityIndex = finalAnswer;
    } else {
      personalityIndex = compareArray[Math.floor(Math.random() * compareArray.length)];
    }
  };

After searching for the highest number in the array and pushing that to a variable.
Another function then searches the array again for that value. The index number of that value is then pushed to a new array. If the new array only has 1 value in it then that 1 value is used as ther personality. If not then a random value is then selected from the new array!

Read More

Business in Japan - Cultural Lessons

The March edition of More Magazine had an interesting feature on 'high status' vs 'low status' etiquette in an office environment. Most of it I'd heard before (give and receive a business card with two hands, always allow someone to introduce you etc) but I found this set of diagrams interesting:

It shows where to stand / sit in different situations. The high-status position is marked with a (1), number (2) is second-highest-status etc.

In summary the person furthest away from the entrance (入口 / 出口) is highest in status and the person furthest away is lowest. If you're ever attending a meeting in Japan remembering that will probably be enough but here are some other nuances:

• In the top left diagram position number 5 is furthest away from the table as well as closest to the entrance.
• In the top middle diagram position number 4 is closest to the lift/elevator buttons.
• In the diagram on the right position number 4 is riding in the front of the taxi with the driver. As people drive on the left in Japan person 1 would either get into the taxi first or have their own door to enter with.

And that's about it. I haven't bothered translating all of it as it's mostly about entrances and exits but I hope that was useful to you!

Read More