Systems | Development | Analytics | API | Testing

Messaging

How to build a live chat widget in React

Live chats have revolutionized customer support, offering seamless and instant communication between businesses and their customers. When building a live chat, there are two main components on the client side: a chat button and a chat window. The chat button is a clickable icon on your website to prompt visitors to start a conversation. The chat window is the interface where the actual conversation occurs.

Creating shared live schedules using Bryntum and Ably

With collaboration tools out there always pushing the frontier of responsive design in applications, such as Miro in the design space, it’s important to ensure that your own applications are providing the functionality developers are now expecting. A fairly typical tool used by all, be it employees of a business attempting to organize a schedule, or individuals organizing their own social lives, are schedulers.

5 React trends to get ahead of in 2024

As we kick off 2024, it’s time to look ahead. And while yes, it brings the Paris Olympics, the release of highly anticipated VR devices, and a potential new Nintendo console – that’s not all. It also marks React’s second decade and another year of innovation for the popular framework! But what does 2024 hold for React? And what are developers excited about? We spoke to our network and scoured communities to find out – here’s what they said.

10 realtime data sources you won't believe are free!

If you’re looking to build an app with realtime data APIs but don’t know which data source to use, you may find yourself struggling to get started due to the sheer amount of options available to you. In this blog, we’ll dig into some of our favorite free examples to choose from (it’s worth a quick note to remind you to check their usage license and free tier allowance). Below are data sources split into transport, weather, and currency sources.

How to add a typing indicator to an in-game chat room with React

In a previous article, I took you through how to add a chat room to a simple game of tic-tac-toe. This post is the second in the series, in which we will look at how to build out the functionality of that chat room with additional features. Across the series, we’ll look at how to manage presence and how to enable emoji reactions – in this post, the focus is on typing indicators. Follow on to find out how to display an indicator when the other person is typing.

How To Enhance AG Grid with Avatars: Building a Collaborative Grid with React and Ably

One of the most common UI elements in software is the tried and true data grid. The idea of organizing data into rows and columns dates back thousands of years. Though human creativity has given us many more ways of displaying data, the humble grid remains a powerful tool in the software developers toolbelt. Today, however, working with any data, including data in grids, often benefits from collaboration capabilities that allow multiple users to work together on the same data.

Do you still need a WebSocket fallback in 2024?

When WebSockets were first announced in 2011, they had some teething problems. As a result of these teething problems, only the most daring and experimental developers would rely solely on WebSockets for realtime communication. For most of us, it became a necessity to implement a fallback protocol in case the WebSocket connection can’t be established.

Choosing the best JavaScript framework for your next project

The State of Developer Ecosystem 2022 report revealed that 65% of developers are using JavaScript, making it the most popular language. JavaScript also claims the spot of most popular primary language with 34%. Of all the JavaScript developers 80% use at least one JavaScript framework. Though there are thousands of JavaScript frameworks available, only a small subset of them is being used by developers.

Essential guide to WebSocket authentication

Authenticating WebSocket connections from the browser is a lot trickier than it should be. Cookie authentication isn’t suitable for every app, and the WebSocket browser API makes it impossible to set an Authorization header with a token. It’s actually all a bit of a mess! That is the last thing you want to hear when it comes to security, so I’ve done the research to present this tidy list of methods to send credentials from the browser.

How to add realtime updates to your React application

Imagine having to restart WhatsApp whenever you anticipate a new message, or needing to reload the page every time you expect an update on the big game. That would be a terrible user experience! Today, users expect the UI to automatically update the moment information becomes available from the backend, so, of course, we must enable them in our applications. There are a handful of technologies, techniques, and services you can use to implement live updates in React.