Full Frontal Conference 2018

Update 12th November 2018: I’ve added my wrapup.
I’ve just finalised my ticket for the tenth aniversary edition of the Full Frontal Conference in Brighton. It’s a single day conference, run twice, on Thursday 8th and Friday 9th November.
Why over two days? Well in the years past the conference was so popular that it sold out in minutes and not everyone got to enjoy the amazing array of speakers that Remy and Julie prepare.
This will be my first year attending the conference and I’m really excited to finally be making it to the event. In the past I’ve ummm’d and ahhh’d about whether to book a ticket because of the strong focus on Javascript in the past and my lack of Javascript capabilities although it would have been the ideal way to build contacts and see what is possible.
This year the lineup really tickle my fancy covering topics including

Mentoring
Machine Learning
Web Animation
New JS Features
WebXR (VR and AR on the native web)
… plus more

I’m going to be there on the Friday so please give me a shout if you’re going to be about. There are still a few tickets available so be quick to snap one up.
Conference Wrap up
I’m on the train home from the first ever Full Frontal Conference. Well, my first ever Full Frontal Conference.
The conference is now added to my list of “wouldn’t miss another one again” along with Beyond Tellerrand and Reasons.to conferences.
Fortunately, work only interrupted one of the talks which was around AI and machine learning using JS although I made it back for the last 15 minutes where there were a bunch of tools that were covered with a few use cases… but I’ll get to those.
Conference Notes
Like with every Conference I start out keen as mustard to take notes and as they day progresses I lean further back into my chair and just focus on listening to the speakers without taking notes (although I take few pictures).
Here are a few notes fro the amazing speaker lineup.
Mentoring — @JoFrank

Admitting that you don’t know something is the most powerful thing you can do as a mentor. It shows your mentee that there’s no Unicorn status to achieve, we are always learning.
As a mentor, when you realise you don’t know something, teach how you go about defining the question and how to work towards an answer. It’s one thing to tell a mentee something, it’s another to empower them to solve problems themselves.
The best way to learn something new is to teach someone about it. You learn the topic better because you have to teach it, but in the process you will also learn by teaching them in a way that they understand and the specific issues they face when learning, this forces you to approach the same problem/topic in many different ways
Assumed Knowledge Syndrome: Don’t do this. Terms like “easy”, “of course”, “just”, “obviously” should never be used.
When you call/refer to something as easy you take away the joy and satisfaction that someone might have by learning it.
When working with your Mentee’s, or anyone for that matter, assume no knowledge but infinite intelligence.
By encouraging C-Level executives to mentor it helps keep them grounded in other areas. Working with someone on an interns salary and hearing their challenges will remind them of what it was like when they were learning and encourage you to BE THE HELP YOU NEVER RECEIVED.
Set Goals. Check what makes them comfortable and uncomfortable. Always acknowledge their success.
Schedule reviews and stick to them. Don’t make it to frequent for them, and don’t over commit yourself.
Listen. Don’t give immediate feedback. Let your mentee speak, wait, listen, leave silence that they will feel they need to fill. This is great for getting to the crux of any issues.

Machine Learning with JS

Magenta.js
Tensorflow.js – this can be incorporated into your project by using NPM or Yarn, or link to the CDN version of it using a tag.
Tensorflow.js has two training modules, Core and Layers.

Core is a shallow learning approach, simple, linear regression.
Layers is used more for deep learning.

There are already a number of existing pre-trained modules that you can use to get started. Mobilenet is one of those which is on the Google API CDN and can be used for Image Recognition.
You can use Mobile net to pass an image and have a series of matching results with their estimated significance score.
Some good examples of this in practice include

AIJS.rocks
ml5.js (wrapper for tensor flow)
js.tensorflow.org

Practical Web Animations
@lisi_linhart

Good animation starts with WHO you are animating for, is it serious and subtle or is it outrageous and playful? The second part is making allowances for different devices that need to be supported and how you will support them. Will there be no animations, or will you need to polypill?
Cheap Animations – Position, Scale, Rotation, Opacity. These are all animations that skip straight to the last step of rendering in the browser render tree so no layout refactoring will be needed. An example of cheap… rather than position something –100% left and animation to 0%, use transform: translatex(–100%) and animate to 0% because it won’t affect the layout.
Using the dev tools watch to see if your animation is impacting any other elements. If you see them flicker/paint, it’s affecting them. For this you can use the CSS property will-change to put them on their own layer and they then won’t impact the other elements, although you need to do some layer management (it’s possible to crash the browser this way).
When applying animations, use ease-out for items entering and ease-in for items exiting.
Animation can help with perceived performance. This can help distract users with Page Loading (spinner), showing a skeleton layout (for SPA’s, Facebook and LinkedIn do this a lot), or informing the user (your search is currently being performed, we’re gathering the bits, fitting them together…)
WA-API (Web Animations API) uses the composite thread so it happens off the Javascript main thread (see explanation here)