Tutorials

In this post, we’ll walk through setting up Tiptap’s collaboration feature with Rails Action Cable and ReactJS. Tiptap is a powerful headless editor built on ProseMirror, and when combined with Y.js, it allows for real-time collaborative editing. We’ll use the Mantine component library, but it isn’t mandatory for this setup. If you prefer to dive directly into the code, check out the example on GitHub. Prerequisites Ensure you have the following installed: ...

If your development environment is on a remote server, you might need to code on the remote machine itself to see the effects of your changes in real time. This scenario is fairly common these days as applications become more complex, and setting up a local development environment requires extensive configuration or mocking of the resources used in the app. In this case, you are left with very few options for code editors. Either you have to use CLI-based editors such as Vim, or you can use VSCode with the Remote SSH extension. Even with the extension, there are some issues related to code analysis and code completion. These processes have to happen on the remote machine, making your powerful local PC underutilized. And if you want to use Zed or Xcode, you are out of luck. ...

Here, by animating an SVG, I mean changing the properties of SVG elements dynamically to make them appear alive. In React Native, we can generate or render an SVG using the react-native-svg library. A complex SVG comprises many smaller elements that can be animated individually. For this example, however, we will use only one element: a circle. The following code will draw a circle with a radius of 50 units. <Svg width={200} height={200}> <Circle cx="55" cy="55" r="50" stroke="black" strokeWidth={5} /> </Svg> Suppose we want to animate it so that it grows and shrinks. To achieve this, I will use React Native Reanimated. To learn more about it, you can check out its documentation. ...

Using OneSignal with React is fairly easy if you don’t have an existing service worker. But if one already exists, things may not work as expected. First, we will create a React app with a service worker. npx create-react-app my-app --template pwa This should create a folder named 'my-app' containing all the app-related files. To check that everything is working, we can run the following commands. A browser tab should open with the ReactJS logo. ...