Event Highlights: UpFront Conf 2017 – #Upfrontconf

Standard

On Friday 19 May, I was thrilled to attend the UpFront Conf 2017 conference at the Bridgewater Hall where, as part of their Speaker Bursary scheme, I got to present a five minute lightning talk on Assenty, the real-time Q&A platform I’ve been building over at assenty.com.

Here are a few words about what I learnt from each speaker at the one day conference, plus some unmissable tweets. If you were there and spot any inaccuracies or misquotes, do shout out in the comments. Thank you to the brilliant team behind the event, and to the generous sponsors for a very well organised and well attended event.

UpFrontConf has been taking place every year in Manchester since 2015. In their own words:

“UpFrontConf is a Front-End conference for anyone who makes for the web”

And so it is, there were over 200 developers, designers, hackers and coders at the event and I got to learn about lots of shiny new interwebby things!

After a brief hello and introduction from our host for the day, Dan Donald (@hereinthehive) whose relaxed and sometimes self-deprecatory style really suited the feel of the conference, the day kicked off with a few words from headline sponsors, UKFast.

Jonathan Bowers (@JonathanPBowers) spoke passionately about UKFast’s motivations for sponsoring UpFront Conf. “If you ask a five year old in Singapore what their favourite language is, they’ll say ‘Python’’, he opened with.

Remarkable. You would get a very different response in the UK.

A few years ago, Jonathan continued, UKFast decided that “whoever chooses to take responsibility is responsible” for developing digital skills in the region. They have been working hard at doing this and quite literarily putting their money where their mouth is, from running grassroots initiatives like code clubs for girls aged seven and above, to doing educational visits and workshops and developing an IT Diploma for 14-17 year olds. They have recently been given the go ahead to run a school focussed on equipping 11-16 year olds with digital skills with the Dean Trust.

Jonathan’s talk about the various initiatives UKFast is involved in was a great opener to the conference and really highlighted how much the company is doing to, in his words, “take action at every stage and play a part in helping to improve digital skills in Manchester and the North West region”. It’s an impressive effort. Kudos to all at UKFast.

After Jonathan came the first of two very different yet very detailed talks on working as a front end developer.

A Calculated Leap of Faith – Christopher Murphy (@fehler)

Christopher Murphy is a former record company owner turned web developer and author. His talk titled A Calculated Leap of Faith was all about setting aside reasons to not start. After suffering a heart attack, and sending what he thought were his parting messages to family, he experienced what I guess would be best described as a sea change in perspective.

His thoughts turned to the things he wanted to do and hadn’t done and now he educates people on how to start doing things they wish they were doing.

His presentation was really about how to make the best use of the 86,400 seconds you are given each day.

Christopher’s talk was full of interesting slides and quotes and I made a note of this one by Dan Norman:

“A lack of time pressure allows the mind to be creative, to explore possibilities. A bit of stress focusses the mind, allowing the final compilation of the earlier, random, creative thoughts”

He shared a few techniques for using the power of imagination to create possibilities. For example, “Tomorrow Headlines” are a great way of imagining the outcome of creating something, and doing this to the extent that it feels like it is real and exists.

He showed some examples from his work with a big marketing agency who went as far as creating an imaginary newspaper article featuring positive user reports of using an app they imagined.

“Imaginary Informercials” is another technique Christopher shared for visualising the future before you create it. The agency he worked with once again used their professional skills in video editing to create an informercial for the imaginary exercise app they’d dreamt up called Wander. The informercial was actually fairly convincing in describing the purpose of the app, and its potential benefits to users.

If I had to sum up Christopher’s talk in a sentence, it would be “What do you desire?”. Those were the parting words in a great little video he showed us at the end about pursuing your dreams.

He also got us all to take part in a paper snowball fight! This video sums it up!

UX Fluency for a Better Front End – Monika Piotrowicz (@monsika)

Monika is UX Director at ecommerce platform Shopify and flew in all the way from Toronto, Canada to speak at UpFront Conf.

In her talk about developing UX fluency for a better front end, she reminded us how important it is that we ask the question “should we be building this, and why?”.

We are building more complex apps now, and have a lot of overlapping tools and methodologies to cope with.

We now juggle between such decisions as ‘MVC vs Component’, ‘Functional vs OOP’, and notions like ‘developer productivity’ and ‘JavaScript fatigue’.

She put it quite bluntly:

“Users, they just want to use your app!”

She also mentioned Hemingway, a cool app for assessing content and writing bold and clear sentences.

Close to the end of her talk she said something really inspiring that I made a note of:

“Strive to use the things you have to make an impact. Grow for impact.”

Couldn’t agree more!

Experimenting with creative coding in JavaScript – Charlie Gerard (@Charlie__Gerard) and Daisy Smith (@daisysmells)

Charlie Gerrard is a web developer at the New York Times and Daisy Smith is a creative developer and animator, previously at Google Creative Labs. Together they both inspired us with cool examples of stretching user experience in the browser by demoing creative coding experiments that took in WebVR and Web3D in equal measure.

Daisy gave us an introduction to 3D principles, describing amongst other things, “geometry: as “what constrains that object in 3D space”, “X, Y, Z coordinates…form a “vertex”, or a point”, two points joined together create a line, or an “edge”, and a “face” is the 2D shape created by a closed series of edges.

“Material” is the wrapping paper that goes over geometry, and this is what allows your shape to be seen in 3D space. Geometry + material = mesh.

Daisy explained that whilst you can add more details to a shape in 3D, the more segments you add, the more polygons, and computational resources required to render the shape. If you must, use more vertices in the shapes closer to the front of the screen, where the user can decipher the changes in detail.

And, a “scene”, is what the camera, or the program, is looking through. You can add objects and lights to the scene and “render” it.

It was all very fascinating and got even more interesting as Charlie took over to demonstrate what is possible currently with WebVR. WebVR is virtual reality in the browser.

There are a growing number of frameworks designed to making this easier for developers to take advantage of, from three.js to React VR, Google’s PlayCanvas, and A-Frame.

Charlie showed us an example of creating a ‘scene’ using the A-Frame framework which lets you create WebVR in HTML markup, similar to ReactJS’s HTML-like (JSX) syntax for composing components.

Once the scene is created you can put a VR headset on and walk around within it!

She closed with some great tips: look for inspiration and reproduce it, collaborate with designers and start small with quick prototypes.

I enjoyed Charlie and Daisy’s presentation, and their approach taught me lots. It was also good to see some serious tech presented by women. Power to you both!

After the demo-rich presentation by Charlie and Daisy came the imaginatively titled RegExp.prototype.unicode presentation by Mathias Bynens.

RegExp.prototype.unicode – Mathias Bynens (@mathias)

I really enjoyed this talk because it was super specific about using regular expressions and Unicode. It was fairly code snippet heavy and so there is not much in the way of descriptive copy about it.

I did enjoy Mathias’ succinct explanation of Unicode as I have some relatively recent experience of looking into it when I decided to highlight emoji support ? on Assenty.

Basically, the definition is this: the Unicode standard provides a unique name and canonical number (known as a ‘codepoint’) for every symbol used in human text/notation. It covers both the Basic Multilingual Plane and others and allows you to refer to a symbol without using the symbol itself.

That’s all I’m going to write about Mathias talk save to reiterate that if you are writing ES6 JavaScript, using the unicode (u) flag when writing regular expressions will cure all manner of ills in your code base’s Unicode support.

After Mathias was lunch, which was a convivial affair. I spent some of it preparing for my talk but more on that later.

After a brief intro by Dan about the nature of the afternoon’s talks, which were to kick off with presentations by people who had submitted talks to be included in the conference, or like myself, were recipients of the aforementioned speaker bursary, we kicked off with Heydon Pickering’s Writing Less Damned Code.

Writing Less Damned Code – Heydon Pickering (@heydonworks)

Heydon’s talk was very, very amusing, with lots of animated gifs and online examples that made the point about striving for simplicity as much as possible where performance is concerned.

Amongst the jokes, such as this one below, he gave some helpful tips on doing responsive design correctly, and using text resizing in the browser correctly.

That joke:

“If you’re not using a modal, it goes into the communal pot, Twitter can use it. Seeing as their user interface consists entirely of modals.”

Lol!

I really like his point about “less is less”. We take for granted the notion that every one understands the phrase “less is more”, but really, what we are trying to say is, less, should actually be less.

There isn’t much to write up here regarding Heydon’s talk, you really had to be there but I do hope he comes to speak at next year’s event, as suggested by host Dan at the end of his presentation because it really was very funny.

After Heydon came the lightning talks that gave myself and 3 other speakers an opportunity to present something to the UpFront Conf audience for 5 minutes.

UpFront Conf decided to open up their call for speakers this year to allow people who felt under-represented in the digital and tech community to speak at the event. I saw a tweet about the speaker bursary a few days before the deadline and decided to apply.

I’m really glad that I did because the accompanying training – a whole day of presentation skills training by experienced trainer and public speaker Andrew Thomas completely changed my perspective on giving presentations and speaking in public.

I really enjoyed the training on 2nd May at Manchester Digital’s offices and took all the advice given and applied it to my talk at UpFront Conf.

The outcome: the topic and title of my talk changed completely from what I had originally prepared to speak on, and thankfully, on the day, I kept to within the 300 seconds allocated!

The training day was also a great opportunity to meet and learn from the others on the training course. Consequently, I had heard a variant of each person’s presentation before. We all changed things after the training though… and delivered much slicker versions of our original talks.

Here come tweets summarising each person’s talk:

Jo Morfee (@jomorfee) is a co-founder and director of Liverpool Girl Geeks. Her talk was about what she does at Liverpool Girl Geeks to address gender inequality in tech.

After Jo was me! I shared a little bit about my journey so far in creating Assenty, from the inception of the idea to the launch last August, to learning about needing to change things based on user feedback. Talk included the obligatory question board ?

Bethan Vincent (@BethanVincent) is marketing manager at Bytemark, a web hosting company based in York. Her talk was tackling perceptions of technical vs non-technical roles at work.

Azizur Rahman (@Azizur) is a senior software engineer at the BBC. His talk was about what we could do to make work places more diverse.

After the lightning talks came two very interesting, technical talks, the first of which involved brewing coffee from the command line, on stage!

Cafe Terminal – Szabolcs Szabolcsi Toth (_Nec)

Szabolcs is a senior front end engineer with IBM Budapest and came all the way from Hungary to demonstrate his incredible command-line controlled coffee maker!

Using the Tessel 2 micro controller which runs pure JavaScript, he wired together the power and switching mechanisms for an old coffee machine to allow him to run commands like “make coffee” from his laptop, and create fifteen seconds later, a cup of steaming freshly brewed coffee.

It was fascinating to hear his account of making the first versions of the Cafe Terminal package which is open source and publicly available on GitHub. After melting a component in initial attempts, he learnt what to do to create thermal insulation between the micro controller and the coffee machine, and it was interesting to hear how he used the LED lights on the micro controller to debug the application before he actually wired it up to make coffee.

It would appear there is a growing community of hackers creating interesting devices using the Tessel 2, from a guitar pedal to the lights and sounds for NERD Disco. The fact that the Tessl 2 comes with Node appears to be a distinctive advantage because modules that are available within the very wide used npm repository can be used within applications built for the Tessel 2.

I really liked Szabolcs talk, particularly his closing slides before the live demo which I tweeted below.

The last talk of the day came from Sara Soueidan, .net Developer of the Year 2015.

Practical Frontend Solutions for Creative Design Challenges – Sara Soueidan (@SaraSoueidan)

Sara’s talk was full of practical tips on incorporating accessibility into the design and development of web projects.

An example is with underlines.

She shared that studies indicate that underlines are the best way to indicate a link on a page. However a lot of web developers design pages to highlight links using other characteristics – say the colour or size of the font of the text.

By using CSS, a background image and a text shadow to create a border for the text, one can create a similar effect to what Smashing Magazine achieve with their very accessible links which include underlines.

She also explained how to craft nested links by taking advantage of how browsers treat the Object tag.

I like her tip on providing content shortcuts to aid screen readers. A simple ‘Skip to main content’ link at the top of a web page enables someone tabbing through a keyboard to identify the main content on a page.

I was also grateful for her tip on not using upper case words in web copy as screen readers spell out the letters in the word, rather than pronounce the word, probably very annoying if you use a screen reader.

Much better to use CSS to turn the letters into upper case on the page, and keep them ‘sentence’ case within the HTML markup.

She also shared many great tips on using the SVG format to embed text links, amongst other things.

And that’s it! This is quite possibly the longest blog post I’ve written in a long time!

I hope you enjoyed this write up, and if you attended, got as much out of the conference as I did.

Thanks again to the organisers and see you at next year’s UpFront, which is to take place in March.