Web Components are a great way to build reusable functionality you can use in different web pages and web apps. Imagine sharing components between different frameworks like React, Vue.js, or Next.js! In this post, we delve into Web Components and show you how to build a chat web component with Ably and to use it in an application built with AWS Amplify and AWS Lambda.

Web Components are a collection of web technologies, standardized in the browser, to ease writing reusable pieces of markup and functionality. They’re a combination of Custom Elements, the Shadow DOM and HTML templates. When they’re…

Build your very own chat application with React

This post will teach you the following:

  • Create a brand new Next.js application
  • Adding realtime functionality with Ably
  • Create a Next.js Vercel Serverless API
  • Use React Functional components and React Hooks with Ably
  • Host your app on Vercel

Check out a running version of the app.

WebSockets in Vercel with Ably

Vercel allows users to deploy Serverless Functions, which are essentially just blocks of code which provide a response to an HTTP request. However, these functions have a maximum execution timeout, which means that it is not possible to maintain a WebSocket connection this way. This is where Ably comes in. The client can connect…

How I helped my mother, who is hard of hearing, to understand me while I visit her with my mask on

A flexible LED display connected to a microprocessor with a phone and a laptop and a small lipstick battery on a desk.

Live captioning of speech into text has so many useful applications and Azure Cognitive Services makes it fast and easy to build captioning into your applications. Used together with Ably Realtime, it is possible to make wearable devices which can display what you’re saying, in real time. Wearable live captions!

This article will explain how to use Azure Speech and Ably Realtime and will go through building a web app that will take data from your microphone and turn it into readable text.

Check out this video to see the demo in action:

Why would we want this?

I’ll admit to a personal desire…

A walk through of how to turn a photograph of yourself into an Andy Warhol style graphic, like the one below.

Disclaimer: there are many different techniques for Photoshop. This tutorial describes the TOS unused for this piece, you may know different techniques and that is great. If you know better/different ways to do these techniques, do feel free to message me, I love to learn new things.

This tutorial may seem long, but it goes into quite a lot of detail because I wanted it to be suitable for beginners. Once you learn the techniques involved it will not…

Coping with quarantine by coding!

It is September 2020 and we’re still mid pandemic, which means I’m social distancing and missing my friends. At the start of lockdown I played a lot of online multiplayer party games with friends to try and replace our regular board game hangouts. After consuming so many, I decided it was high time that I try and make a multiplayer game myself! Working at Ably, I have all of their robust pub/sub real-time messaging infrastructure right there, perfect for creating a system that can send data between multiple players!

What is pub/sub and how can I use it to build a game?

Pub/Sub is short for Publish/Subscribe and it describes a pattern of…

The Station Manager game with Realtime Tube data

I’ve been learning a lot recently about using realtime data streams and how and why one might use them in an app. In order to better understand the differences between realtime streaming data and REST APIs (which I’ve had more experience with), I decided to build a game, the mechanic of which uses realtime train arrival data. As trains arrive into the station in real life, effects are triggered in the game which the user has to manage.

Make it your own!

All of the code for the game is on Glitch. This means that you…

How to make your own internet connected t-shirt with LEDs that respond to realtime data

As a developer advocate I get to make all kind of fun projects. I particularly like to make wearable technology, specifically, things with lots of lights on that can connect to the internet. Because I like to be sparkly! I started making wearable tech projects a couple of years ago, my first being a light up, tweet controlled wedding dress.

When I started working with hardware, I had no real clue what I was doing and made a few very silly mistakes around choices of hardware and how to stick them all together, My hope for this blog is to…

Making an interactive Christmas jumper

After my previous project, the tweet controlled wedding dress, I wanted to make another wearable using the lessons I learnt while making the dress. Since the festive season is now upon us, it seemed like a great opportunity to make an IoT Christmas jumper!

Christmas jumpers often have a large graphic on the front; Santa, a snowman, a reindeer. I wanted to make a jumper that could change the graphic it displayed depending on what Christmas song was playing. That way, at Christmas parties, I’d always be wearing the right picture for the moment!

All I need to be a software developer is coding skills, right?!

A short while ago I sent out a tweet saying that in order to remain relevant as software engineers then we needed to focus on our skills of empathy, cognitive diversity and self-care.

I’d like to expand a little upon my thoughts behind this tweet and explain why, as some of the replies assumed, it isn’t all “airy fairy cotton candy wishes”.

When we’re developing software it is easy to get carried away with the tech. We want to use the most up to date techniques, the hot new libraries and packages. …

I ❤ the internet. By visiting a URL I can have access to information, learn new skills, interact with friends, shop, watch movies, play games, you name it. Not only that but new APIs are constantly being created to allow us to interact with the web in new and exciting ways.

Developers can now access users’ personal data, their location, use their hardware and connect to external devices. We can now create truly personalised, captivating, even immersive experiences on the web. In order to use these new, powerful APIs, websites and apps must ask for permission. Being blocked from services…

Jo Franchetti

Developer Advocate

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store