<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Yipei Wei</title>
    <description>The latest articles on DEV Community by Yipei Wei (@yipei).</description>
    <link>https://dev.to/yipei</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F903186%2Fbc0f949e-0781-4472-a680-42b1f873d505.jpeg</url>
      <title>DEV Community: Yipei Wei</title>
      <link>https://dev.to/yipei</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/yipei"/>
    <language>en</language>
    <item>
      <title>AFFiNE Local User Guide: Keep Your Data In Your Hands</title>
      <dc:creator>Yipei Wei</dc:creator>
      <pubDate>Mon, 29 Aug 2022 02:16:00 +0000</pubDate>
      <link>https://dev.to/yipei/affine-local-user-guide-keep-your-data-in-your-hands-pbh</link>
      <guid>https://dev.to/yipei/affine-local-user-guide-keep-your-data-in-your-hands-pbh</guid>
      <description>&lt;p&gt;AFFiNE is a local-first personal knowledge base, which means you have full control over your data. In this article we'll help guide you how to use AFFiNE and keep all your data locally stored, and then we'll talk more about the technicals and how we do it.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;0x01 Sync data to local hard drive&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;AFFiNE provides an out-of-the-box live demo that allows you to use AFFiNE without any downloads, installing or compiling. And you'll still be able to keep your data local.&lt;/p&gt;

&lt;p&gt;You can head over to our official website, and click Try it Online. You'll be sent to our live demo where you can try out the latest developments of the product.&lt;/p&gt;

&lt;p&gt;Whenever you open the demo - that includes closing the tab or refreshing the page - you will have to repeat the following process.&lt;/p&gt;

&lt;p&gt;First, let's SYNC TO DISK - you'll find that button in the upper right corner.&lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--Ies-v64D--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wwgn0hzdj1g6e5759viv.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--Ies-v64D--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wwgn0hzdj1g6e5759viv.png" alt="Image description" width="880" height="458"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Then you'll be asked to create (or select) a directory as your working folder, this is where all your data will be stored.&lt;/p&gt;

&lt;p&gt;You can create a new folder if it's your first time - or open an existing folder to load your data.&lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--V1GMuLvi--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ihkd1wk66o6cpx3ndqi5.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--V1GMuLvi--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ihkd1wk66o6cpx3ndqi5.png" alt="Image description" width="448" height="150"&gt;&lt;/a&gt;&lt;br&gt;
  please select "view files"&lt;br&gt;&lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--dQpW4A0V--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kiqiuu4z30efbjqc2iov.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--dQpW4A0V--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kiqiuu4z30efbjqc2iov.png" alt="Image description" width="448" height="150"&gt;&lt;/a&gt; &lt;br&gt;
please "save changes"&lt;/p&gt;

&lt;p&gt;To ensure your security, these permissions will be requested every time you load the app. Both permissions are required for the app to function correctly.&lt;/p&gt;

&lt;p&gt;After the authorization is completed, the SYNC TO DISK button in the upper right corner will be hidden, this also indicates now because you have completed the process successfully. All your modifications will be automatically saved to the folder you chose.&lt;/p&gt;

&lt;p&gt;You can transfer/sync this data to another PC if you wish, allowing you to freely access your data. Just follow these steps again, this time choosing the existing folder where your data is stored.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;0x02 How we make AFFiNE local first&lt;/strong&gt;&lt;br&gt;
&lt;strong&gt;1. Why other products need to be used online&lt;/strong&gt;&lt;br&gt;
A lot of personal knowledge base software claims that online services can provide a better experience than local services. Sometimes that comes down to technical limitations. But we at AFFiNE want to do things differently - without compromise.&lt;/p&gt;

&lt;p&gt;When you wish to allow remote access to a document, one of the easiest ways to do this is by uploading the file. Then, the server marks a version for the file, and when you update the file, the version updates too when the new file is uploaded.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--FZxa2UDh--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mjfr5mm8n70gd3x1uavr.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--FZxa2UDh--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mjfr5mm8n70gd3x1uavr.png" alt="Image description" width="880" height="495"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;However, what if we need to make changes to only a part of the file? Do we need to upload the whole file again and again? There are alternatives and the way we approach collaboration is with a series of algorithms collectively called Operational Transformation. This process calls each of your edits an operation, collects them, and executes them one by one on a remote server, and returns the result after execution.&lt;/p&gt;

&lt;p&gt;But no matter how it is optimized, the core logic of OT is to establish causality for operations, so that they can operate on a piece of data in a fixed order. This means it is often necessary for them to have a central server, and all clients participating in the collaboration record their operations, submit them to a central server to perform the operation, and then wait for the results to be feedback. So, how can we do this without a central server?&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;2. How do we solve this problem&lt;/strong&gt;&lt;br&gt;
We want to make a local-first application, which means we want users to be able to edit offline, on multiple clients and be able to seamlessly submit changes when going back online. We consulted many papers and tested many libraries, and finally chose Yjs, which is based on YATA CRDT[1].&lt;/p&gt;

&lt;p&gt;CRDT stands for Conflict-free replicated data type. It aims to build an algorithm that allows two sets of data to be merged together without conflict. YATA is one type of CRDT, and Yjs is the implementation of that YATA algorithm.&lt;/p&gt;

&lt;p&gt;Why does CRDT allow two pieces of data to be merged without conflict? Maybe the simplest way we can explain this is as follows. We can design two copies of data to be commutative, eg: op1 + op2 = op2 + op1, which means if we make 2 edits (or operations) to the same document on 2 different clients, as long as both parties can hand over their operations to the other, they can get the same final result regardless of who generated the operation first.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--qnsKbiOQ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ruk61qaee0osfvxo7wkq.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--qnsKbiOQ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ruk61qaee0osfvxo7wkq.png" alt="Image description" width="797" height="247"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--4BAIBWBf--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/upn7p9000pq9qng8uikp.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--4BAIBWBf--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/upn7p9000pq9qng8uikp.png" alt="Image description" width="696" height="241"&gt;&lt;/a&gt;&lt;br&gt;
    exchange operation without server&lt;/p&gt;

&lt;p&gt;We applied Yjs as the data storage layer at the bottom, and built a new library based on it, we call it JWT[2], which will provide Block abstraction to the upper layer, and provide post-processing capabilities such as full-text search and data analysis. This means that the upper layer (in AFFiNE, the upper layers are our block editor Virgo and our vector editor Phasor) only needs to understand that what it is operating on is a block.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;3. Your data is always yours&lt;/strong&gt;&lt;br&gt;
Based on the powerful capabilities of the CRDT algorithm, the excellent optimization of Yjs, and the abstraction of JWT[2]'s ability to block, we are able to provide a set of local-first data layer infrastructure, which enables AFFiNE to provide powerful offline collaborative editing capabilities and local editing experience.&lt;/p&gt;

&lt;p&gt;Currently, all editing of AFFiNE is based on JWT[2], and data processing does not require a server. Therefore, whether you use AFFiNE in our Live Demo, a locally built Docker container or a self-hosted server, all the data you generate is saved to your local hard disk through the SYNC TO DISK feature, and your data is always yours.&lt;/p&gt;

&lt;p&gt;[1] &lt;a href="https://www.researchgate.net/publication/310212186_Near_Real-Time_Peer-to-Peer_Shared_Editing_on_Extensible_Data_Types"&gt;Near Real-Time Peer-to-Peer Shared Editing on Extensible Data Types&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;[2] Our current version of the data backend is written in TypeScript and called JWT, and the next generation data backend is written in Rust and called JWST, both codenames inspired by &lt;a href="https://en.wikipedia.org/wiki/James_Webb_Space_Telescope"&gt;James Webb Space Telescope&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;We welcome every user to offer feedback and suggestions. Please feel free to contact us on:&lt;/p&gt;

&lt;p&gt;Reddit: &lt;a href="https://www.reddit.com/r/Affine/"&gt;https://www.reddit.com/r/Affine/&lt;/a&gt;&lt;br&gt;
Discord: &lt;a href="https://discord.gg/Arn7TqJBvG"&gt;https://discord.gg/Arn7TqJBvG&lt;/a&gt;&lt;br&gt;
Telegram: &lt;a href="https://t.me/affineworkos"&gt;https://t.me/affineworkos&lt;/a&gt;&lt;br&gt;
Twitter: &lt;a href="https://twitter.com/AffineOfficial"&gt;https://twitter.com/AffineOfficial&lt;/a&gt;&lt;br&gt;
Medium：&lt;a href="https://medium.com/@affineworkos"&gt;https://medium.com/@affineworkos&lt;/a&gt;&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>webdev</category>
      <category>localhackday</category>
      <category>programming</category>
    </item>
    <item>
      <title>How we build AFFiNE with Typescript/React/Rust</title>
      <dc:creator>Yipei Wei</dc:creator>
      <pubDate>Thu, 04 Aug 2022 09:01:43 +0000</pubDate>
      <link>https://dev.to/yipei/how-we-build-affine-with-typescriptreactrust-5dcg</link>
      <guid>https://dev.to/yipei/how-we-build-affine-with-typescriptreactrust-5dcg</guid>
      <description>&lt;p&gt;While Miro(visual collaboration platform) and Notion(note-taking tool) are silky smooth and powerful enough to use, they are not open source solutions.&lt;/p&gt;

&lt;p&gt;So, what about the next-gen knowledge base that is more private, transparent, customizable, and available for Windows/OS/Linux？&lt;/p&gt;

&lt;p&gt;That's where AFFiNE sparkles!&lt;/p&gt;

&lt;p&gt;Unlike Miro and Notion, which focus on whiteboard and page, AFFiNE defines its positioning as an all-in-one KnowledgeOS. It supports kanban, table, and rich-text paragraphs as building blocks to form pages or whiteboards. It carries out integrated processing here in document editing, data processing, or brainstorming.&lt;/p&gt;

&lt;p&gt;Build with Rust and Typescript, and run the entire project with one command line, AFFiNE gives all developers maximum imagination in the simplest way.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;AFFiNE is a Perfect Combination of Privacy and Experience of Developer and User&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;AFFiNE is fairly new.&lt;/p&gt;

&lt;p&gt;It is an open-source project that aims to overcome some limitations of Notion and Miro in terms of security and privacy. It helps you carry the to-do list recorded in the meeting, the goal written in the document, the brainstorming on the whiteboard of the video conference, and the feedback obtained in the customer interview in a unified place. AFFiNE can become a place to store, integrate and manage all workflows.&lt;/p&gt;

&lt;p&gt;On the basis of safeguarding data security and user privacy, the experience of users and developers also matters. And, AFFiNE does a decent job at it, if not better than Miro and Notion.&lt;/p&gt;

&lt;p&gt;Note that AFFiNE is still in its alpha phase.&lt;/p&gt;

&lt;p&gt;Currently, the aim of this project is not only for functionality, but also for a customized experience, community-driven opportunities, and data privacy.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Notion vs. AFFiNE: What Are Your Priorities?&lt;/strong&gt;&lt;br&gt;
While it is meant to replace Notion as an open-source solution, it may not be for everyone. So, if you are going to choose AFFiNE over Notion, you will get the following benefits:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Privacy&lt;/strong&gt;&lt;br&gt;
Notion can be used as closed source software to directly access your private data in the cloud. Compared to this, you can host AFFiNE as per your preference.&lt;/p&gt;

&lt;p&gt;With AFFiNE, you own your data, no matter what. With no sacrifice to collaboration and share, all your data, along with a slice of AFFiNE itself, is in your hand.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Transparency&lt;/strong&gt;&lt;br&gt;
AFFiNE is an open-source project, so you are always welcome to modify and view the code.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Performance and Native Experience&lt;/strong&gt;&lt;br&gt;
AFFiNE is built using Rust and typescript, which provides a modern and stable user experience while maintaining performance.&lt;/p&gt;

&lt;p&gt;AFFiNE is fully built with web technologies so that consistency and accessibility are always guaranteed on Mac, Windows, and Linux. The local file system support will be available when version 0.0.1beta is released.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Features of AFFiNE&lt;/strong&gt;&lt;br&gt;
&lt;strong&gt;Shape your page&lt;/strong&gt;&lt;br&gt;
An always good-to-read, structured docs-form page is the best for your notes, but a boundless doodle surface is better for collaboration and creativity.&lt;/p&gt;

&lt;p&gt;We make the shift and reshape easy, so you can shape the docs your way.&lt;/p&gt;

&lt;p&gt;With AFFiNE, every page comes with 2 views, and you can access and edit fully functioned blocks anywhere, in any form.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Plan your task&lt;/strong&gt;&lt;br&gt;
We really appreciate the idea of Monday, Airtable and Notion database. They inspired what we think is right for task management. But we don't like the repeated works -- we don't want to set a todo easily with markdown but end up re-write it again in Kanban or other databases.&lt;/p&gt;

&lt;p&gt;With AFFiNE, every block group has infinite views, for you to keep your single source of truth.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Sort your knowledge&lt;/strong&gt;&lt;br&gt;
A good, semantic knowledge base is made of reusable, linked elements. AFFiNE is completely made on top of the idea of blocks. Blocks can be 2-way linked, duplicated, reused, and synced between docs.&lt;/p&gt;

&lt;p&gt;As semantic web lovers, we don't like the idea of folders that much, and we make everything easy to find.&lt;/p&gt;

&lt;p&gt;The biggest function of AFFiNE is that any block can be converted with one click: the page editing mode + Kanban view mode + whiteboard mode can be seamlessly linked - making it easy, convenient, and burden free for all users to use.&lt;/p&gt;

&lt;p&gt;In addition, AFFiNE has more page views and whiteboard views, which can help different users brainstorm and align progress with other partners at any time while precipitating and processing data sets, and write data-related reports and complete meetings without changing the working tools flow.&lt;/p&gt;

&lt;p&gt;You can expect more feature additions as the development continues. Some existing highlights include:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Native cross-platform support.&lt;/li&gt;
&lt;li&gt;Add to-do in text mode, and transform to board mode.&lt;/li&gt;
&lt;li&gt;Ability to self-host it or install it on your computer.&lt;/li&gt;
&lt;li&gt;Customizability.&lt;/li&gt;
&lt;li&gt;Data privacy (top priority).&lt;/li&gt;
&lt;li&gt;A single code base for better maintenance.&lt;/li&gt;
&lt;li&gt;Community-driven extensibility.&lt;/li&gt;
&lt;li&gt;Multi-column view and advanced formatting support.&lt;/li&gt;
&lt;li&gt;Click anywhere and type with MarkDown support.&lt;/li&gt;
&lt;li&gt;Keyboard shortcuts for editing cell/grid.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Installing AFFiNE on Linux/Windows/MacOS&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--wqAs1nPG--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/du2j1l7klverwpkequv4.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--wqAs1nPG--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/du2j1l7klverwpkequv4.png" alt="Image description" width="880" height="639"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;In either case, you can check AFFiNE’s &lt;a href="https://affine.gitbook.io/affine/"&gt;official documentation&lt;/a&gt; to build it from the source. Explore more about it on its &lt;a href="https://affine.pro/"&gt;official website&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Wrapping Up&lt;/strong&gt;&lt;br&gt;
If you need a simple Notion-like or Miro-like application with a native experience, AFFiNE is an interesting choice.&lt;/p&gt;

&lt;p&gt;AFFiNE has a variety of views such as whiteboard, and document editing, and different views can realize data linkage and one-click switching. Any block element can be easily reorganized and reused to help users reduce invalid working hours, improve work efficiency and release time on work with more creative value.&lt;/p&gt;

&lt;p&gt;Therefore, in 2022, if you want to have a tool that can store, integrate, manage and create all workflows, you might as well try AFFiNE!&lt;/p&gt;

&lt;p&gt;If you are interested in AFFiNE after reading this article, please click &lt;a href="https://github.com/toeverything/AFFiNE"&gt;here&lt;/a&gt; to know more. &lt;/p&gt;

&lt;p&gt;If you have any questions about productivity tools or AFFiNE products, please feel free to ask questions on Reddit: &lt;a href="https://www.reddit.com/r/AFFiNE/"&gt;https://www.reddit.com/r/AFFiNE/&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;This is another way to contact AFFiNE:&lt;/p&gt;

&lt;p&gt;Telegram: &lt;a href="https://t.me/AFFiNEworkos"&gt;https://t.me/AFFiNEworkos&lt;/a&gt;&lt;br&gt;
Twitter: &lt;a href="https://twitter.com/AFFiNEOfficial"&gt;https://twitter.com/AFFiNEOfficial&lt;/a&gt;&lt;br&gt;
Medium：&lt;a href="https://medium.com/@AFFiNEworkos"&gt;https://medium.com/@AFFiNEworkos&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Hope you have a nice time with AFFiNE!&lt;/p&gt;

</description>
      <category>typescript</category>
      <category>react</category>
      <category>opensource</category>
      <category>javascript</category>
    </item>
  </channel>
</rss>
