DEV Community: A.Z.

Liveblocks - Collab Instantly!

A.Z. — Tue, 21 Feb 2023 17:49:22 +0000

What is Liveblocks?

I have recently started playing around with some collaboration related technologies, most notably yjs & liveblocks

In this article I will be focusing on Liveblocks as it was quite the fun implementing features in applications while using it.

The team behind it summarizes it quite well in the following quote:

Collaborative experiences in days, not months

Concepts

Room

A room is the space people can join to collaborate together.

Presence

Presence represents people’s movements and actions inside the room. People in the room are able to see what others are doing in real-time.

Storage

Storage represents the items people can interact with in the room. In the physical world, storage could be represented as documents and notes on a whiteboard.

Storage Persistance

Storage data automatically persists when people leave the room. The data can also be cleared and stored on your database using the API endpoints.

Easy collabing

You probably ask yourself, how easy? Well it is as easy as:

  const others = useOthers();
  const updateMyPresence = useUpdateMyPresence();

With these little things you are able to boost your App experience from plain old monotone to a lively multiplayer app!

What I also love is that they have a cpl of packages out, one that I like to use is the @liveblocks/zustand package with which you can have a nice lively shareable state throughout the app, it is as simple as:

import create from "zustand";
import { createClient } from "@liveblocks/client";
import { liveblocks } from "@liveblocks/zustand";
import type { WithLiveblocks } from "@liveblocks/zustand";

type Cursor = { x: number; y: number };

type State = {
  cursor: Cursor;
  setCursor: (cursor: Cursor) => void;
};

const client = createClient({
  publicApiKey: "PUBLIC_KEY",
});

const useStore = create<WithLiveblocks<State>>()(
  liveblocks(
    (set) => ({
      cursor: { x: 0, y: 0 },
      setCursor: (cursor) => set({ cursor }),
    }),
    {
      client,
      presenceMapping: {
        cursor: true,
      },
    }
  )
);

export default useStore;

And with such simple code you would be able to have cursors already flying around, with additional state also see updates of the state in real time and also with 60fps experience if you set the throttle as low as 16!

Conclusion

I would recommend it to many people who strive to implement collaborative features as it makes the whole process easier, you get to save months of work and have it in days, live cursors, live updated data on your screen, without the trouble of breaking your head against the wall!

Also love that it is focused on typescript as well which improves the whole developer experience.

All in all I would recommend it, and I am already looking for ways and ideas what and how to implement, with liveblocks, implementing things like a spreadsheet, mural whiteboard etc becomes 10000 times easier, so what are you waiting for, check out their website!

Next.js 11

A.Z. — Thu, 17 Jun 2021 12:30:33 +0000

Next.js 11 got announced 2 days ago and with it came a few interesting updates that I implemented in my personal project straight away.

The update included:

Conformance: A system that provides carefully crafted solutions to support optimal UX.
Improved Performance: Further optimizations to improve cold startup time so you can start coding faster.
next/script: Automatically prioritize loading of third-party scripts to improve performance.
next/image: Reduce layout shift and create a smoother visual experience with automatic size detection and support for blur-up placeholders.
Webpack 5: Now enabled by default for all Next.js applications, bringing these benefits to all Next.js developers.
Create React App Migration (Experimental): Automatically convert Create React App to be Next.js compatible.
Next.js Live (Preview Release): Code in the browser, with your team, in real-time.

Image Component

I have to say the most interesting feature for me as a beginner was the Image component

import Image from 'next/image'
import author from '../public/me.png'

export default function Home() {
  return (
    // When importing the image as the source, you
    // don't need to define `width` and `height`.
    <Image src={author} alt="Picture of the author" />
  )
}

The update of the image included:

Automatic size detection

Use the import keyword for the image src to automatically 
define width and height for static images.

Image Placeholders

next/image now supports blur-up placeholders to ease the 
the transition from blank space to image and reduce perceived 
loading time, particularly for users with slower internet 
connections.

To get the transition from blurry to the loaded image, make use of the placeholder attribute:

<Image src={author} alt="Picture of the author" placeholder="blur" />

With the help of the image component, the smooth experience on a website will be guaranteed and optimized to the fullest!

Script Component

The new Next.js Script Component is a foundational optimization that enables developers to set the loading priority of third-party scripts to save developer time and improve loading performance.

With next/script, you can define the strategy property and Next.js will automatically prioritize them to improve loading performance:

beforeInteractive: For critical scripts that need to be fetched and executed before the page is interactive, such as bot detection and consent management. These scripts are injected into the initial HTML from the server and run before self-bundled JavaScript is executed.
afterInteractive (default): For scripts that can fetch and execute after the page is interactive, such as tag managers and analytics. These scripts are injected on the client-side and will run after hydration.
lazyOnload: For scripts that can wait to load during idle time, such as chat support and social media widgets.

<Script
  src="https://polyfill.io/v3/polyfill.min.js?features=Array.prototype.map"
  strategy="beforeInteractive" // lazyOnload, afterInteractive
/>

You can also run code after loading. For example, you can wait to execute code until after a user has answered consent:

<Script
  src={url} // consent mangagement
  strategy="beforeInteractive"
  onLoad={() => {
    // If loaded successfully, then you can load other scripts in sequence
  }}
/>

Comformance

"Conformance is a system that provides carefully crafted solutions and rules to support optimal loading and Core Web Vitals, with further additions coming to support other quality aspects like security and accessibility. These solutions free your team from memorizing all the latest rules for optimal loading performance, while still giving you the flexibility to make the right choices for your applications."

I would suggest you reading the post over at https://web.dev/conformance/
It is very well explained and goes into detail.

Next.js received overall performance updates and as well uses webpack 5 now!

Next.js Live

Also a new way of colaborating will be introduced called Next.js live where you will be able to instantly share, chat, draw, and edit from anywhere in the world. Next.js Live enables real-time collaboration for your entire team.

I would reccomend you to read the official blog post by The vercel team on their Next.js page!

Follow me on Twitter at @mantiqcoder and on Instagram at @nine_codes

Why Vercel & Next are a dream team

A.Z. — Thu, 13 May 2021 16:15:19 +0000

What is Vercel?

Vercel is a deployment and collaboration platform for frontend developers. Vercel puts the frontend developer first, giving them comprehensive tools to build high-performance websites and applications.

Vercel enables developers to host websites and web services that deploy instantly and scale automatically – all without any configuration.

What is NextJS?

Next is a React Framework that gives you the best developer experience with all the features you need for production: hybrid static & server rendering, TypeScript support, smart bundling, route pre-fetching, and more. No config needed.

Next and Vercel - The Incredible Duo

The Easiest Way to Deploy Next.js Apps
Vercel, built by the same team that made Next.js, provides production-grade hosting for Next.js websites with zero configuration.
After experiencing how easy it is to get up and running with these two well integrated, the developer can get a continuous deployment setup with a repo as easy as with a few clicks on the screen.
It gives us a vast amount of templates to choose from directly from the Vercel page such as:

It is one of the most pleasant development experiences I have had so far.

I bought a domain through their site for $20. This process was easy to set up and had a running homepage within a minute along with continuous deployment when I push a change to the selected branch.

I have to say using these two together has shown me how fun sometimes development can be when you get to choose the tools you wanna use and you get that AHA moment that you found your stack.

Summary

I am still new to this platform but I am keen and happy to explore it, thinking about what great apps I can build with such a great developer experience.

If someone has any tips for me concerning these two let me know in the comments below.

Follow me on Twitter at @CodesNine and on Instagram at @nine_codes