Middlesbrough Front End 2023 Conference

With great speakers from companies like Shopify, Monzo, Spotify, CloudFlare, Sanity, and Netlify sharing their expertise and talking about emerging trends and web technologies, we thoroughly enjoyed the event.  It was a great opportunity to learn as well as to network with other people in the web and software industry. In this article we want to share with you our thoughts and insights from the event, but before we dive in let’s bring up a quote from Railey B. King, who said:

“The beautiful thing about learning is that nobody can take it away from you.”

The event took place in the heart of Middlesbrough, inside the iconic Middlesbrough Town Hall. Upon arrival, we were greeted by friendly members of staff who directed us inside The Crypt, a theatre-style venue with a seating capacity of over 200 people. Inside, we were given something that every self-respected web developer wants, a bag of merch, and we were invited to grab a bite to eat from the buffet.

We took our seats a few minutes before the host, James Lees, entered the stage to greet all attendees, explain the structure of the event, and introduce the speakers. After a round of applause, we were anticipating the first speaker of the day.

In this article:

• Prioritise content over components
• Up Up and Away with Astro
• Connecting the Dots between the Tech Industry and Education
• A love letter to long lines and other DX stories
• Accelerate your career with Open Source
• Building a capable front-end at the humanitarian cutting edge
• Play Them Off, Keyboard App: Building a virtual synthesiser in JavaScript
• Render Time
• Going Beyond Passwords: The Future of User Authentication
• Bringing page transitions to the web

Prioritise Content Over Components

The conference got off to a great start, with Simeon Griggs expertly explaining the importance of prioritising content over components when building websites that use Content Management Systems. The speaker argued that doing otherwise could condemn reusable text and images that make up the page components. Simeon identified two approaches to improve the editing experience, i.e., design-driven and content-driven, and advocated taking on a content-first thinking approach. Paul Tissington, our head of design, said:

“Simeon Griggs was clearly an experienced and confident speaker and personally, I loved how straight to the point his talk was. Developers can tend to get bogged down in the technical details so any chance to help them see websites from other perspectives, i.e., our clients and the people that actually use them, is always welcome.”

Up Up and Away with Astro

In the second talk, Obinna Ekwuno introduced the audience to the AstroJS framework, and its innovative new concept of “island” architecture that aims to reduce the build time needed to generate a website. In his talk, Obinna, demonstrated “islands”, a small packet of logic that are built on demand and are perfect for content-rich websites. The speaker was certainly on the point that content should be loaded and served only when needed. His talk demonstrated that web developers keep looking for new and better ways to create fast-loading websites and improve user experience. Chris Prusakiewicz, our web designer, said:

“This is great because we don’t want users to unnecessarily wait for content that they will never see or engage with. I can see this being applied to CSS and JavaScript required by certain components placed beyond the fold, usually anything below the masthead or hero area of the web page that web browsers don’t necessarily need to load straight away.”

At Edward Robertson, we care about website performance and user experience. Therefore, we split our code into separate files and load them only when needed. Moreover, by utilising native lazy loading techniques, and rendering images appropriately sized for different screen sizes, we build websites that provide the best possible user experience

Connecting the Dots between the Tech Industry and Education

The next speaker on the stage was Sarah Heward, who took us away from the technical aspects of front-end development and reminded us about the social challenges of modern technologies. In her inspiring talk, Sarah brought up a growing issue of digital poverty and inequality in Teeside, and the failure of the education system to bridge the gap between young people and technology. She argued that with the rising cost of living, technology isn’t necessarily the top priority to survive. Paul Tissington commented on this:

“It’s easy to forget how many of us got started in this industry and seeing how young people in the region are being failed by successive governments and an archaic education system was a timely reminder of our responsibility to give back in any way we can - even just in simple ways such as donating old devices or giving our time to community projects.”

A love letter to long lines and other DX stories

As frontend developers, our job is to create the best possible user experience on our websites, but we rarely think about the experience of our developers who need to read and understand the code written by someone else, or themselves in the future. Jo Franchetti introduced a possible solution - the Developer Experience (DevEx) skillset. In her talk, Jo claimed that we can offload the cognitive load needed to understand and memorise the application logic by writing easy-to-follow and descriptive code using natural language. Additionally, we can increase developers’ productivity and creativity by improving the flow state, and mental disposition during the task by setting clear goals and removing unnecessary interruptions. In other words, the codebase should be written for the human reader, not the computer

Accelerate your career with Open Source

The last speaker before the lunch break, Eddie Jaoude, talked about why developers should get involved in open-source projects, and how they can start contributing. Our takeaway from Eddie’s talk is that developers should contribute or create an open-source project, and at the same time, become a part of the dev community. By doing so, developers can become more successful, not only by gaining invaluable experience working with other developers and adding their own contributions to projects but also by increasing their chances to be found by recruiters or being hired directly by employers based solely on their activity on GitHub.

At Edward Robertson, we use open standard code to build beautiful websites for our clients. We also understand the importance of open source packages, because our websites use them to provide fantastic functionality to our clients and their customer

Building a capable front-end at the humanitarian cutting edge

After the lunch break, the audience welcomed on stage Richard Thanki, the managing director at Jangala, a charitable start-up specialising in the production and deployment of network devices that transform any form of Internet connectivity into Wi-Fi, that provides “vital internet access to under-connected communities around the world.” Richard revealed that the device’s interface is built with web technologies, and surprisingly, all of its software is packed onto an 8MB hard drive. For reference, in 2023, the average weight of a desktop web page is 2.3MB. Additionally, the speaker revealed that during one of the humanitarian operations in the Mediterranean, the refugees who crossed the sea in boats, often asked not for food or drinking water, but for a phone, in order to call their relatives to let them know that they were safe. Chris Prusakiewicz commented on this:

“This talk demonstrated the importance of reliable access to the internet in remote areas of the planet and the technical challenges that need to be solved to achieve this goal. I’m glad to see people like Richard and his team use web technologies to do just that.”

Play Them Off, Keyboard App: Building a virtual synthesiser in JavaScript

At Edward Robertson, we use JavaScript to add interactivity to web pages, fetch data, or toggle animations, but we’ve never thought about creating a virtual synthesiser. We think that Sophie Koonin demonstrated very well how to use HTML, CSS, and JavaScript to build a keyboard app in a web browser. We also learned some musical theory and math that she used to translate notes into sounds with Web Audio API. Sophie’s talk demonstrated what is possible with continuously evolving web technologies, and she made a good point about JavaScript frameworks. Sometimes, they could be overkill in some projects, and sometimes it’s great to write a lightweight, vanilla JavaScript code.

Render Time

If you thought that NASA is famous for creating acronyms for their space missions, think twice because the web industry is catching up. In this talk, Phil Hawksworth took us on a journey through many acronyms, such as SSR, CSR, SSG, DPR, DSG, ISR, ODB, ESR, CI/CD, SPA, and MPA that stand for different techniques to generate, deliver and display content to the users. However, we learned from Phil that render times can be improved further by combining different techniques together. Steven Gray, our backend developer, said:

“Phil Hawksworth talk was as entertaining as it was educational. He took us through different generation types for site assets and even provided an example of how they can be used in tandem, that and almost every developer based acronym. Want to apply some of these to sites I work on.”

At Edward Robertson, we use SSR (Server-Side Rendering) to prepare web pages on the server, and MPA (Multi-Page Application) to deliver them when users navigate throughout the website. We find these techniques to be reliable and efficient and we always look for new ways to improve them, and we believe that Phil’s talk is a great starting point.

Going Beyond Passwords: The Future of User Authentication

All our websites come with a bespoke and secure Content Management System as standard, and some, with user accounts, that only authenticated users can access. However, we always look for better ways to improve user experience on our websites. Paul Tissington has a particular interest in passwords, and found Gift Egwuenu’s ideas on the future of user authentication very interesting, he said:

“Passwords are a particular interest/bugbear of mine and the introduction of passkeys is an exciting development in how authentication may be handled in future. Gift’s ideas on this were fascinating and she did a great job of demonstrating practical uses of how this could look in the near future.”

Steven Gray also expressed interest in Gift’s talk. He said:

“I was interested where this one was going to go as with all the talk recently about AI being able to crack simpler passwords far easier and with that technology becoming more complex and advanced I wanted to know what the answer to this was going to be, how was security going to remain well secure. I was not disappointed as the ideas and practices already discussed and that are already being put into place and how easy it was all to set up.”

Bringing page transitions to the web

The last talk was a highly anticipated one, and we were not disappointed when Jake Archibald demonstrated how to create transitions between web pages in the web browser, with no JavaScript frameworks or third-party libraries. Paul Tissington gives his perspective on how page transitions could be used to add personality to websites:

“Having been old enough to work with Macromedia Flash means that I’m very excited to see the potential these animations have to bring some extra personality back into website design. I can envisage these being used subtly to bring some of the great experiences that app designers have been able to utilise to the traditional web.”

Additionally, Chris Prusakiewicz expressed his own thoughts and concerns after the talk:

“I love playing with subtle CSS transitions and animations, because they make websites more interesting, engaging and add that premium feeling. However, having no native support for smooth transitions between pages in the web browser always bugged me. Seeing the View Transitions API in action makes me feel excited about the possibilities but at the same time terrified about potential missuses, especially by online advertisers.”

Nevertheless, Steven Gray brings up an important point about App-like quality animations on web browsers, that until now were limited to Android and iOS apps. He said:

“Seeing what designers will be able to do (and in some browsers, can already do) is really incredible, but as a backend developer and not a designer, I am more excited for this as a user. I can’t wait to have App-like quality animations on browsers and it be more widespread.”

In addition to Progressive Web Applications, and their ability to be installed on the home screen, work offline and send push notifications to the users, we believe that the addition of View Transitions API to the web will challenge the status quo of native mobile applications. However, as with all modern technologies, we need to take into consideration browser support, but as Jake said, this can be addressed with progressive enhancement.

Conclusion

We chose the Middlesbrough Front End Conference because of the lineup and the proximity to our office in Newcastle upon Tyne. It was fantastic to see so many people attend the event and listen to the talks about emerging web technologies, social issues, and everything in between. Lewis Morris and Jamie Bradley who organised the event did a great job, and we look forward to the next event.

Graham Miller, one of the directors at Edward Robertson, said:

“I love to see our designers and developers to get away from their desks and come to inspiring events like this. We want to build websites for our clients that take advantage of the latest innovations and industry best practices - conferences like Middlesbrough Front End help with that. Getting out of the office also exposes us to new ideas and perspectives that can stimulate creativity and new ideas, giving us a fresh approach when we get back to work.”

If you like what we do, and you want to work with us, don't hesitate to get in touch.