Select Page

  1. Intro [Simon]

On the 30th April 2018, we were lucky enough to attend the wonderful All Day Hey! Conference: https://alldayhey.com/

I’ve recently recruited and put together a Front-End Team together at Telux (the technology arm of Invosys). This event was a great day to get to know one another and skill up.

On a side note, I’d like to express my thanks to Murray. Murray is the CTO of the business, and when I approached him regarding the conference and getting tickets, within 5 minutes we had conference tickets and travel arrangements all sorted.

As a developer I think it’s extremely important that tech teams have budgets and allowances for personal development. As well as the free coffee, I believe this mindset has helped to make us one of @businessinsider’s Most Exciting Companies in the North https://twitter.com/InvosysLtd/status/992043837722910722

Each member of the team who attended has written a bit about each of the wonderful talks, on the day, let’s begin…

  1. Unlocking the Power of CSS Grid Layout – Rachel Andrew [Tamas]

This talk was a fairly technical one with a lot of great examples as you can expect from Rachel Andrew.

You can find the examples on codepen https://codepen.io/collection/ANdJez so you can play around with them to gain a better understanding.

Rachel has been talking about CSS grid for nearly six years which is not easy to comprehend. It took an awful lot of time for grid layout to be supported in modern browsers, but it finally landed about a year ago and there are many production websites that use it.

Since Rachel has been asked many questions about CSS grid she realised that a lot of people are confused with some of the fundamental principles. One of which is sizing. How flex and grid distribute space. So she decided to talk about this matter in 2018. She wants us to know how big that box is; how big grid is and how big its components are. You can read about the topic at following link https://www.smashingmagazine.com/2018/01/understanding-sizing-css-layout/

There are three new intrinsic sizing keywords that are very powerful when building grid layout. These are:

Min-content, max-content and fit-content.

These keywords are available in browsers which support grid.

There is also a new flexible unit called “fr”.

The “fr” unit is designed for grid layout and only makes sense in this context. It deals with distributing available space in the grid container.

A new sizing method called minmax() has been mentioned as well. You are able to specify the minimum and maximum size of grid tracks with the help of this method.

Another part of the talk was focused on writing modes. New CSS tries to help us move away from designing websites as all sites’ content were written in a language that is read left to right.

Therefore when specifying all four lines of a grid area with the shorthand property values are the opposite way around of how we define margins and paddings.

Grid area values are read anti-clockwise.

Grid cares about writing modes so everything should work in the same way even if the writing mode has changed so it is language independent.

You can read more about logical properties and writing modes if click on the following link https://www.smashingmagazine.com/2018/03/understanding-logical-properties-values/

If you want to see how grid is laid out in the browser use Firefox Nightly’s grid inspector. It is a very useful tool when building layout with CSS grid.

In the last part of the talk, Rachel mentioned that we possibly don’t want to use a polyfill for grid as we would mostly force low powered mobile phones to download a bunch of javascript. Instead, we should use other layout methods and wrap our grid layout in feature queries and rather than focusing on creating the same exact experience on every device and in every browser we should provide a good experience for users and make the web accessible for everyone.

Finally, I would mention that Rachel has been asked a question quite a lot recently which is “How can I create floats in grid layout”. The answer is: “Just use floats”.

  1. Building resilient front-end systems – Ian Feather [Tamas]

A pretty interesting talk. Ian started with describing what resilient means. It means functioning in a hostile environment.

The browser is a super hostile environment, we have no control over the runtime, we don’t have a guarantee of the available amount of resources and we don’t ship our systems as a complete package.

I think many of us, developers make the assumptions that our websites will be opened on a high powered device connected to fast wifi and all systems will be available all the time. As Ian showed us this is not the case. DNS servers can be down, AWS S3 can be down, there might be a service that is used on your website and it is not available. All of these could happen and we should have a backup plan for these issues to make sure we provide a good user experience. Also, if there are third party dependencies we need to be aware that scripts that we use can be maliciously infected. Ian showed us a good example where a speech recognition api had been infected and therefore every site – even government websites – that used the given api have been mining bitcoin on users’ devices.

There are other things that can happen out in the wild: JavaScript errors generated when users interact with your website in different browsers.

It is possible to track these errors. Buzzfeed uses Sentry and we use TrackJS here at Telux https://teluxhd.com/.

Here’s some more information on both of them: https://www.slant.co/versus/964/9135/~sentry_vs_trackjs-javascript-error-monitoring

Also once you track JavaScript errors it is a good idea to integrate it with Slack so developers are aware of the issues.

The talk wasn’t all about issues, there were solutions suggested too. One of which I really liked is if a component of your site breaks and it is not crucial, to have fallback code that makes sure it doesn’t show, or impact the rest of the site.

If you are interested in designing and building a resilient website you can check out Ian talking about this topic on youtube https://www.youtube.com/watch?v=64o0bT2h3DY

at NationJS http://nationjs.com/.

  1. AR / MR / VR / XR – Peter Gasston [Charlotte]

Diving into the future of technology, Peter Gasston’s look into reality-changing technology left me feeling like we were on the brink of entering a Black Mirror episode.

XR could allow us to be constantly – and maybe unknowingly – connected to an altered reality. But while this could be a little terrifying, Gasston (being far less dramatic than me) showed it offers amazing potential.

Part of his talk that struck me was why he believes XR will be so readily adopted. While it’s already growing in popularity, and major companies are increasingly investing, what interested me most was his view on how XR fits perfectly into human nature.

As he put it, human nature boils down to the desire to know things, and the desire to be tricked.

I’d never heard this phrased like that before, but it covers so much of human achievement: art, science, music, theatre, maths, travel. It’s all been, in essence, the exploration of illusion and understanding. And XR can fuel both.

XR could intelligently connect us to vast amounts of information, that interacts seamlessly with the real world around us. Making technology not just a thing we use, but something we could fully integrate and utilise in every part of our lives.

As someone knowing little more about the world of XR than than Pokemon-Go, these possibilities seemed pretty distant to me. But this talk highlighted recent trends that make these hopes for XR seem more inevitable than the next iPhone release.

These trends mostly see technology behaving more like humans do. For instance, cameras that behave more like eyes: understanding what they see; drawing relevant links; and ‘physically’ interacting with real-world objects. Or intelligent augmented reality, using real-world prompts to provide relevant, contextual information. This could intuitively show instructions of physical objects, show reviews or price comparisons, or even translate foreign languages in situ.

Seamless, intelligent, and constantly adapting, the future of XR looks impressive, and will push responsive design to a whole new level.

  1. Building Jack: Idea to Execution (and beyond) – Ashley Baxter [Jim]

Ashley was up next talking about her journey taking her insurance business Jack from an idea to a flourishing business.

There’s a common problem that anyone creative is likely to suffer from at some point; shiny object syndrome. There’s nothing wrong with having a lot of hobbies/passion projects or even plans for a rainy day. But too often good ideas stay as a hobby, as something we never have quite enough time to finish or take to the next level.

Ashley told us she found herself in the same position a few years ago; juggling projects, podcasts, a freelance career. Jack started as an idea to make insurance for freelancers easy. But Jack would have stayed as nothing more than a good idea, if she hadn’t taken two important steps that many people in her position can learn from; research your idea and know when to cut out things to make time for the important stuff.

Once you’ve made the difficult decision to commit to that good idea, she talked about how to get over the second hurdle to completion; losing interest. What do you do once a project has lost it’s shiny new feel? The short answer; stick with it! Just making 1% progress everyday stacks up before you know it, the key is to keep chipping away.

Last but not least, don’t hold things back and don’t second guess your user base. It’s a trap that’s really easy to fall into; you don’t want to release your product until it’s pixel perfect with all the features you could ever want. But there’s no substitute for getting a product in the hands of your users. Ashley reminded us all that no one knows what your user base wants better than the users themselves. As she discovered with Jack, people don’t mind waiting for additional features once they have something they can use, and perhaps more importantly they’ll be able to steer you towards the features that they want even if you hadn’t planned for them.

In short, she reminded us all that if we want to make the most of our good ideas we need to be able to make the difficult step to commit to them, and once they’re built we need to make the difficult step to let them go. It’s a lot easier to add to an idea once it’s the hands of your users.

  1. Strength Training – Chris Kershaw [Charlotte]

In a conference full of brilliant minds – people leading the way in coding, development, design and technology – I think we all knew how easily we can neglect our bodies.

Over 70% of us are spending well over 9 hours a day on in front of a screen – with a big chunk of us routinely hitting over 14 hours of screen time a day. We are used to dedicating time building resilience into our systems, but can forget (or simply can’t find the time) to do the same thing for ourselves.

And that’s why Chris Kershaw’s talk on strength training felt so important. Squeezing in short bursts of strength training can help improve your immune system, mental health, physical health, restore sleep cycles. And basically makes you feel like Superman.

His relaxed and amiable talk made taking a step in the right direction feel easy. It’s not about #beastmode and protein shakes. It’s about taking care of yourself with the same care that goes into your work.

  1.  Digital Culture – @invisibleflock [Joe]

Ben Eaton from @invisibleflock asked us do we still need to use the word Digital to describe futuristic things? Do we have Digital Artists or Artists, Digital Marketers or just Marketers. Do we live in a Digital Culture or is it just a Culture?

https://d1o50x50snmhul.cloudfront.net/wp-content/uploads/2017/10/27124229/duet-by-invisible-flock-for-frequency-festival-2017.-credit-electric-egg-2.jpg

In Computer Science we are used to working with other fields, it is a fundamental aspect of programming careers to apply technical skills with a real world problem to create a useful application or system. Art and Computer Science can be seen as opposite, art strives to create products with no use or application other than to convey or elicit emotion, whereas Computer Science historically has not concerned itself with emotion.

In more recent history, jobs have arisen that are seamlessly joining Art and Computer Science particularly advances in Front-End Development and Design. Personally my University project was on creating an Image Processing project for Digital Artists so this talk was very relevant to me.

I love to see technology used to create the inspirational displays shown in this talk and the joining of UK culture worldwide through the power of the internet is relevant to the product we sell here at Telux.

Ben showed us some awesome projects, my particular favorite which paired a user from the UK and a user from India and asked them one question a day for a year to understand the similarities and differences in the lives they lead.

  1. Where’s your shed? – Chris Witham [Aaron]

It was refreshing to see a slight theme on mental health at the conference, the subject was touched on a couple of times during the presentations. It’s not common to see a talk that isn’t solely focussed on just getting the work done, or getting work done right but being in the best place mentally to be able to get to work in the first place. There can sometimes be a pressure to get up and get on but there are times when we need to reflect on our state of mind.

Chris Witham had 10 minutes and captured that brilliantly in his Where’s your shed? Talk.

Using his own experience to explain how not looking after your mental health can detriment your work and not getting the help you need can leave you in a bad place. Chris’ way of dealing with this is to spend time in his shed where he can take his mind off anything and generally improve his mood and wellbeing.

He finished by asking us again where our shed is, where is our equivalent place that we can go to reset.

  1. CSS: Past, Present and Future – Una Kravets [Aaron]

Una’s objective was to convince us to use less JavaScript and embrace the future of CSS where appropriate. As well as covering some of the awesome features that we have all started to use, we were given a glimpse into the future, showing us some CSS features that should help making for the web that little bit easier and even more exciting.

She went on to explain how even though older browsers might not be able to support some of the newer features we can use @support (which will be ignored by IE) to make sure we’re only including styles that are supported.

“No more Clearfix!” – Una Kravets

We were shown how it’s possible to recreate intricate layouts like menus and magazine pages with today’s CSS and how it’s great for SEO purposes as everything is rendered in the page.

http://www.gridtoflex.com/

Grid to flex is a website that Una put together for progressively enhancing anything that you use enabling you to support IE11 and below and Edge 15 and below. She joked “Don’t forget your edge and IE users, they’re really important. There are probably more of them than you realise.”

Another current suggested feature we should be using today included CSS variables that can be updated and altered dynamically in the file. Although we had variables in Sass for example, these were compiled into CSS and didn’t it wasn’t possible to update their content. CSS variables can do this.

CSS Filters can animate, adjust the contrast, rotate colour on the colour spectrum and loads more. You can use it not only on images, but throughout your UI’s. An example of this is SVG icons and using filters to edit the icon background colour. Una did a live demonstration of changing the SVG colours to show that you can do a lot with one line of code.

For the future of CSS we were taken through some examples, and a view of some (very red) caniuse pages indicating that some of this stuff really isn’t ready to start being used but it’s okay for you to check it out. Some very experimental things are happening and being tested in the css specification.

CSS image sets

https://caniuse.com/#feat=css-image-set

Scroll snap

https://caniuse.com/#search=scroll-snap

  1. The Event Loop – Jake Archibald [Joe]

The Web Browsers have what is called “The main thread”, most things that happen on the web happen in the main thread in a deterministic order. Jake Archibalds’s https://twitter.com/jaffathecake talk finally explained away some of the weirder bugs many of us have faced in our careers, the subtle differences between browsers and showed us a game-changing animation.

A great analogy introduced is that of a “sneezy” action. Humans are very good at doing many things at once, but when we sneeze we suddenly can’t do much else. The JavaScript equivalent of this is the setTimeout() (CODE) method, which pauses the main thread. Without understanding the event loop it is very difficult to understand, and avoid, the consequences of “sneezy” code.

The omnipresent diagram

https://gyazo.com/b4d2aadceadd481b9293c050caeefff2 (or gif?)

This may look simple, but after a brief explanation it’s power is impressive!

The central loop is the event loop, when nothing is to be done the white dot (representing where we are in the loop) loops around waiting for something to do. On the left hand side we have a detour where we can queue up tasks for the event loop to do. On the right hand side we have the render steps, in order:

*rAF – requestAnimationFrame.

*s – style calculation.

*l – layout, calculating where everything is.

*p – painting, creating the pixel data.

Jake then proceeded to make this much more complicated, describing the differences between tasks, callbacks, microtasks, a separate compositor loop and finally the subtle differences between browsers (what we have seen so far only describes Chrome’s event loop).

Jake then finished with a final reveal that there are many event loops happening at once with one much larger diagram.

I can already tell that I am going to be considering this diagram in the future, drawing it out and explaining it to junior staff, and frequently directing people to the video for Jake’s superior description.

  1. Conclusion [Simon]

So there you have it!

Thanks very much to the team for putting this post together and everyone involved in organising and being apart of a wonderful conference.

It’s certainly given us plenty of things to discuss and take aways to implement.