Отдам дизайнерское кресло вместе с дизайнером.
В рамках R&D, продолжаю пилить клон Trello с амбицией повторить функционал бесплатной версии не хуже оригинала. А потом вокруг этого алтаря построю храм хрустальный про автоматизацию рабочего процесса для Developer Centric Team.
Мой актуальный стек: NextJS + NextAuth + GraphQL CodeGen + AntDesign Component + TailwindCSS + Lexical + Beautiful-DND + React Window + Hasura + Temporal + GoLang.
Я всеми четырьмя лапами за тайм-трекер! По моему опыту, для тех, кто честно отрабатывает положенное время, тайм-трекер не вызывает каких-либо вопросов. Это у желающих одной жопой сидеть на двух стульях начинаются разговоры про 1984 Джорджа Оруэлла.
Перепробовал на себе и на падаванах разные способы учёта времени: от Excel-таблички и Toggl (где можно скатиться в микро-менеджмент), до тотального контроля в Hubstaff (по требованию одного заказчика).
Хорошо бы этот процесс автоматизировать. Я сколько раз наблюдал явные приписки, когда отмечают 8 часов в конце дня. Как пример подобной автоматизации, есть расширение для VSCode - WakaTime. У меня привычка включать камеру и транслировать live-code в YouTube.
Давно вынашиваю идею своего продукта - симбиоз таск-менеджер + чат по таскам + тайм-трекер. Идея в обслуживании состояния потока. Когда разраб входит в это состояние, выдёргивать его тупо невыгодно для бизнеса (каждый раз теряется 20 минут, как минимум). В одной конторе мы практиковали флажок "не беспокоить", но забываешь его снять.
Asana CEO: То, как мы работаем сейчас, скоро будет выглядеть пережитком прошлого
$ cd hasura && docker-compose up -d
- Database Display Name: default
- Environment Variable: PG_DATABASE_URL
$ cd hasura
$ rm -rf migrations
$ hasura migrate create "init" --from-server --database-name default
$ rm -rf metadata
$ hasura metadata export
$ cd hasura
$ hasura migrate apply
$ hasura metadata apply
$ cd hasura
$ curl --location --request POST 'http://localhost:8080/v1alpha1/pg_dump' --header 'x-hasura-admin-secret: myadminsecretkey' --header 'Content-Type: application/json' --data-raw '{ "opts": ["-O", "-x", "--data-only", "--schema", "public", "--schema", "auth"], "clean_output": true}' -o data.sql
$ cd hasura
$ cat data.sql | docker exec -i secret-project-postgres-1 psql -U postgres
$ npm install
$ npm run dev
hasura init
cd hasura && hasura console
$ npm install -g prettier
via Apollo CLI (deprecated)
$ npm install -g apollo graphql
$ apollo client:download-schema --endpoint http://localhost:8080/v1/graphql --header "X-Hasura-Admin-Secret: myadminsecretkey"
via Apollo Rover
$ npm install -g @apollo/rover
$ rover graph introspect --header "X-Hasura-Admin-Secret: myadminsecretkey" http://localhost:8080/v1/graphql > schema.graphql
\([\[\],.!_":\d\w\s\n]*\)
- install plugin to VSCode: https://github.com/apollographql/vscode-graphql
- add HASURA_GRAPHQL_URL & HASURA_ADMIN_SECRET to .env.local
- users
- sessions
- accounts
- verification_tokens
$ npx json2graphql http://localhost:8080/ -d ./docs/responses.js --overwrite
See also openapi-to-graphql.
- Вдохновение (Genesis)
- Apollo server in Next.js API route
- Redux не нужен. GraphQL и Apollo Client.
- Как работать с Apollo в связке с Typescript и GraphQL Code
- GraphQL и GO: простой способ бросить REST
- Интервью Наталии Теплухиной и Наталии Коротковой с Дэном Абрамовым
- Новый хук useEvent решит наши проблемы!
- Тайны Реакта! Как писать самый быстрый и мощный код?
- Apollo Server
- Apollo CLI
- Apollo GraphQL
- GraphQL CodeGen
- Apollo Client
- Hasura
- Auth for Hasura
- Prettier
- AntDesign Components + Customize Theme
- TailwindCSS
- CSS-In-JS: Emotion? - nope
- react-dnd (focalboard) or react-beautiful-dnd or dnd-kit (liveblocks)
- react-beautiful-dnd toolschain
- react-window
- board > scrollable collumns
- board > dragging a clone
- functional components
- tables
- https://github.com/abeaudoin2013/react-beautiful-dnd-multi-list-typescript-example
- https://egghead.io/lessons/react-reorder-a-list-with-react-beautiful-dnd
- https://egghead.io/lessons/react-persist-list-reordering-with-react-beautiful-dnd-using-the-ondragend-callback
- https://egghead.io/lessons/react-create-reorderable-horizontal-lists-with-react-beautiful-dnd-direction-prop
- https://egghead.io/lessons/react-optimize-performance-in-react-beautiful-dnd-with-shouldcomponentupdate-and-purecomponent
- https://egghead.io/lessons/react-reorder-columns-with-react-beautiful-dnd
- dnd-kit
- Gutenberg Demo
- quill or prosemirror or slatejs or editorjs.io
- https://blog.logrocket.com/what-is-slate-js-replace-quill-draft-js/
- https://www.tiny.cloud/blog/real-time-collaborative-editing-slate-js/
- https://www.tiny.cloud/blog/migrate-from-slatejs-to-tinymce/
- https://github.com/react-page/react-page
- https://github.com/udecode/plate
- https://kitemaker.co/blog/building-a-rich-text-editor-in-react-with-slatejs
- https://github.com/haydenbleasel/compass-lexical
- https://codesandbox.io/examples/package/lexical
- https://codesandbox.io/s/lexical-markdown-plugin-example-4076jq
-
yjs vs automerge- https://www.slatecollaborate.com
- https://tiptap.dev/hocuspocus
- https://github.com/BitPhinix/slate-yjs/
- https://liveblocks.io/examples/block-text-editor-advanced/nextjs
- https://bitphinix.github.io/slate-yjs-example/
- https://se.math.spbu.ru/thesis/texts/Koekin_Jaroslav_Alekseevich_Bachelor_Thesis_2021_text.pdf
- https://github.com/humandx/slate-automerge
- https://github.com/geoffreylitt/automerge-slate-playground
- automerge/automerge#193
- https://github.com/inkandswitch/peritext
- https://lexical-playground-nzep8plck-fbopensource.vercel.app/split/?isCollab=true
- facebook/lexical#2696
- facebook/lexical#3113
- facebook/lexical#3172
-
tiptap.dev + mantine.dev - ClientOnly & useQuery
- Продукты, которые перекрывают сегменты Knowledge Base <> Communications (без Work)
- Продукты, которые перекрывают сегменты Work <> Communications (без Knowledge Base)
- https://tada.team
- https://focalboard.com (коммуникации в комментах + mattermost)
- https://openproject.org (коммуникации в комментах + forum)
- https://asana.com
- https://ru.yougile.com
- https://pyrus.com/ru
- https://resolv.it - (+ Дискуссии вместо каналов и чатов + Один тред — одна тема + Кнопка Resolve) https://vc.ru/tribuna/771861-resolvit-io-kak-ya-ustal-ot-haosa-v-messendzherah-i-sdelal-servis-po-resheniyu-rabochih-zadach
- Продукты, которые перекрывают сегменты Work <> Knowledge Base (без Communications)
- https://fibery.io (1.0)
- https://monday.com (коммуникации только в комментах)
- Продукты, которые перекрывают сегменты Work <> Communications <> Knowledge Base
- Продукты, которые только про сегмент Work (без Communications и Knowledge Base)
- https://airtable.com
- https://clickup.com (коммуникации только в комментах)
- https://trello.com (коммуникации только в комментах)
- https://smartsheet.com (коммуникации только в комментах)
- https://height.app (коммуникации только в комментах)
- https://linear.app (коммуникации только в комментах)
- Notion Alternatives
- Как выдать сообщение в консоль Хрома (как Linear)
- Навигация кнопками от элемента под мышкой (как в Trello и Linear)
- Интеграция с fullcalendar.io - nope
- Custom Scrollbar
- https://levelup.gitconnected.com/build-on-hover-custom-scrollbar-in-react-d846194a7ea4
- https://github.com/hkurra/react-on-hover-scrollbar
- https://css-tricks.com/scrollbars-on-hover/
- https://www.thisdot.co/blog/creating-custom-scrollbars-with-react
- https://kingsora.github.io/OverlayScrollbars/
- https://github.com/buzinas/simple-scrollbar/
- https://github.com/Diokuz/react-baron
- https://manos.malihu.gr/jquery-custom-content-scroller/
- https://github.com/inuyaksa/jquery.nicescroll - support .pageXOffset
- Custom Font
-
position: sticky
для body - RBD - мигает курсор стрелки
- Оценить интерфейсы Trello
-
```
в тексте редактора - переключение на режим блока кода (как в CodeMirror и SlateJS) - Investigate vercel/commerce
- Setup vercel/turbo?
- Investigate vercel/swr || apollo/client || react-query (optimistic update?)
- GraphQL subscriptions
- GraphQL offline
- Admin Panel
- Temporal & GoLang
- Tab in GoLang - yes! gofiber (http?)
- monorepo as Turborepo by Vercel
- .editorconfig
- husky?
- pnpm VS npm
- pnpm-workspaces VS lerna
- https://blog.nrwl.io/setup-a-monorepo-with-pnpm-workspaces-and-speed-it-up-with-nx-bc5d97258a7e#5982
- убрать workaround в tsconfig.json "shared/": ["packages/shared/src/"]
- Image
- Reack Hooks
- Deploy Vercel
- Flexbox
- Framer Motion
- PWA
- SEO
- Sitemap
- vercel/analytics
- Open Graph
- Добавить больше языков в lexical-code (через PrismJS)
- Dark Mode
- AntD with Dark Mode
- LexicalCollaborationPlugin
- mock-data
- Doc Graph like Obsidian
- Markdown extension - MDX
- Исследовать встроенный чат в ClickUp
- Исследовать встроенный чат в tada.team
- as Open Source Alternative
- Добавить в список open-source-alternatives
- Как спрятать от Wappalyzer (как Linear)
- Search Engine
- API Doc
- react-intl-universal
- Ant Design Modal padding-right / scrollbar-gutter: stable;
- TreeView via react-window
- Memoization
- react-beautiful-dnd-custom-placeholder
- Интеграция в mattermost
- Weblate - для переводов (подсмотрел на focalboard)
- Goodbye, useEffect
- Интеграция с Dendrite (по аналогии Mattermost)
- Board multidrag (like Linear)
- Прикрутить AI-бота (https://hints.so/ || https://engati.com/)
- Состояние потока и Право на отключение
- Разблюдовка парного программирования в календаре
- Покер-планирование
- G2 пользуется Asana и потому его хвалит? это как CMSList.ru by UmiCMS
- Тиньков локализовал #COF, плюс Fast Line Ventures
- Top Most CrunchBase Rank related to me: techstars.com startupwiseguys.com antler.co venturecatalysts.in wefunder.com
- PRINCE2 - A Structured Project Management Methodology
- Algolia
- Nested Scroll for Board atlassian/react-beautiful-dnd#131
- recharts.org (as FinamTrade)
- Temporal for clone Trello Butler
- Backend via appwrite.io - https://github.com/appwrite/demo-todo-with-nextjs
- Monorepo
- TailwindCSS group
- react-monaco-editor
- NextJS + iframe
- Investigate Clockwise
- (css) mix-blend-mode: overlay;
- Вероятностная структура данных. С небольшой ошибкой ( ≈ 0.4% ) считает количество уникальных элементов, не храня сами ключи. Даёт огромную экономию памяти. Если стоит задача быстро посчитать количество посетителей или запросов — HyperLogLog подходит идеально.
- apollo-client-nextjs
- AI
- Asana CEO: how A.I. will make work more human
- AI powered project planning
- https://shtab.app - Если на скриншот трекера попадёт переписка в мессенджере или другая личная информация, встроенная нейросеть автоматически её заблюрит.
- fixed-data-table-2
- Nostr
- Go Skills
- Temporal
- Интеграция с Gogs / Gitea about setup
- Описание в asyncapi.com
- Терминология для составления ТЗ с помощью ChatGPT: бэклог продукта в виде пользовательских историй; список объектов предметной области и отношения между ними; список нефункциональных требований; функциональные требования в формате сценариев для юскейсов, включая обработку исключительных ситуаций; продуктовые метрики; сгенерировать схему навигации по экранам, описание каждого отдельного экрана, а также диаграмму последовательности в PlantUML, описывающую основной сценарий системы; состав (план) работ; оценка стоимости реализации такого проекта;
- Составление API и Architectural Decision Records (ADR) с помощью ChatGPT
- Xerox Alto — компьютер, разработанный в исследовательском центре Xerox PARC в 1973 году. Это первый в мире компьютер, использовавший метафору «рабочего стола» и графический пользовательский интерфейс. Alto был первым полностью персональным компьютером в современном понимании. Alto был исследовательским прототипом, а не коммерческим продуктом. Предполагалось, что Alto станет серийно производимой машиной, но она так и не была поставлена на поток.
- Karate BDD - для тестирования API (включая GraphQL) https://github.com/karatelabs/karate/tree/master/karate-demo
- Robot Framework (+BDD) https://robotframework.org/
- Task Management Made Simple (via "Simple Made Easy")
- A Plan for Spam
- Компромиссы микросервисов
- Trello REST API
- json2graphql
- open-api-to-graphql
- convert-json-to-graphql
- XO_FONTS
- рекомендую Obsidian Git и Remotely Save (чтобы на телефоне не ставить гит, а только remotery; а git - как бэкап с историей)
- native dnd - https://github.com/mgmeyers/obsidian-kanban
- КАК DISCORD МЕНЯЕТ РАЗМЕРЫ 150 МИЛЛИОНОВ ИЗОБРАЖЕНИЙ ЕЖЕДНЕВНО ПРИ ПОМОЩИ GO И C++
- fp-ts
- Плюшевый пузырь
- Добавить легенду для radiobutton внутри Hasura
- https://trello.status.atlassian.com/
- BlockNote A "Notion-style" block-based extensible text editor built on top of Prosemirror and Tiptap.
- CRDT
- unito.io - Небольшой лайфхак: если решите переехать в Asana из Trello (или, например, Wrike), перенесите все задачи через сервис Unito. Вручную точно замучаетесь.
- Scrum-маркетинг в камерном агентстве (Trello -> Asana)
- Valtio makes proxy-state simple for React and Vanilla
- Подготовка к продакшну NextJS
- xstate
- zustand
- Backyard Pizza Project with Hasura
- Todo App Basic - Models To APIs with Helium for Hasura
- Optimize your Bundle Size with SWC and GraphQL Codegen
- https://react.dev/reference/react/Suspense
- Apollo-Client + NextJs 13
- @apollo/client -> urql
- Feature-Sliced Design
- Hasura: Instant streaming APIs
- Все еще работаете с access token на клиенте?
- Hasura Introspection via Voyager
- Как продвигать проекты с открытым исходным кодом
- NoOps Kubernetes-платформа
- AI for Coders
- https://codex.dlabs.app/ - A github app to summarize code diffs in pull requests.
- https://github.com/sturdy-dev/codeball-action - AI Code Review that finds bugs and fast-tracks your code
- https://writer.mintlify.com/ - AI powered documentation writer for code
- https://www.safurai.com/ - AI Code Assistant that saves you time in changing, optimizing, and searching code.
- https://stackoverflow.blog/2023/07/27/announcing-overflowai/
- http://www.0pdd.com/ - Puzzle Driven development
- https://githubnext.com/projects/copilot-for-pull-requests
- https://githubnext.com/projects/testpilot
- https://codescene.com/ - prioritize technical debt
- Hoppscotch - попробовать для GraphQL API
- nhost - The Open Source Firebase Alternative with GraphQL.
- Code AI platform with Code Search & Cody
- Feature-Sliced Design: эволюция фронтенда для быстрых экспериментов
- Next.js setup: Деплой на VPS | Jest | Playwright | CI/CD | Sentry
- https://fullcalendar.io/
- https://www.speare.com/ - работа со статьёй, как доской: карточка - абзац, колонка - раздел; оплата $69 в месяц или $69 на год :)
- https://contentlayer.dev/
- https://hackernoon.com/static-full-text-search-in-nextjs-with-webassembly-rust-and-xor-filters-tldr
- awesome-nextjs
- Next Auth V5 - Advanced Guide (2024)
- https://github.com/42wim/matterbridge/
- Покрытие на BDD
- Освоить Dev Containers
- Поискать свободные аналоги speare.com
- How to Manage Multiple Git Accounts on One System
- Применить
<img decoding="async">
- tiledb
- UILD
- Snowflake ID
- GraphQL Stitching https://habr.com/ru/articles/728476/
- https://github.com/shadowwalker/next-pwa
- nextra
- https://giscus.app/ru
- https://github.com/t3-oss/t3-env
- https://www.radix-ui.com/
- The Backend-for-Frontend pattern using NextJS A Step-by-Step Guide
- Data Fetching with Next.js 13’s Bleeding-Edge Features
- NextJS / React SSR: 21 Universal Data Fetching Patterns & Best Practices
- https://gqty.dev/ The No-GraphQL client
- Сложнейшая проблема компьютерных наук: центрирование
- https://jotai.org/
- CSS Utility Classes and "Separation of Concerns"
- Удивительный и неизвестный inline-block
- overscroll-behavior
- isolation
- box-sizing
- Когда правильно padding, а когда margin?
- Вёрстка слева направо и сверху вниз
- NativeWind
- Как на самом деле работает position: sticky в CSS
<img decoding="async">
- Jumpstart your next SaaS product with Bedrock - The modern full-stack Next.js & GraphQL boilerplate with user authentication, subscription payments, teams, invitations, emails and everything else you need (https://coursehunter.net/course/bedrock-bystryy-start-vashego-sleduyushchego-produkta-saas)
- https://coursehunter.net/course/shipfast-zapustite-svoy-startap-za-dni-a-ne-nedeli
One downside to dnd-kit versus the others is the HTML5 API, which would allow you to drag cards out of the window and drop them into other apps -- including Kanban views in other Obsidian vaults, as well as Trello and various other dnd-accepting apps. Accepting drag and drop of other apps' data in any position in a lane (instead of just the bottom) would basically come for free as well. (You could even include the contents of a linked note as a file attachment!)
Dunno how important you consider those features, but they'd be nice to have, and both Sortable and react-dnd would support them, while rb-dnd and dnd-kit do not and cannot. (Well, technically, you could probably make dropping in from other apps possible, but dragging between Obsidian vaults would not be possible except by selecting text, and the attachment thing would be right out.)
==
Also, react-dnd + react-virtualized can do stuff like this -- which isn't quite the tree view you imagined, but it certainly looks like react-dnd is a stable base for building fancy stuff on.
Given the existence of react-dnd-scrolling and the comment in react-dnd's docs that "Luckily, React DnD is designed to work great with any virtual React data list components because it doesn't keep any state in the DOM," I would count all these factors as a strong recommendation for react-dnd as the first choice to try as a replacement. (The fact that react-dnd-scrolling has explicit examples for combining it with both react-dnd and react-virtualized should be a big help with doing virtualization of Trello-style full-height columns, which in turn should be a big help to inital loading time of large boards.)
==
react-beautiful-dnd: How this library performs dragging is an implementation detail. The api is what users interact with. That said, this library does not use the html5 drag and drop api. The main reason is that html5 drag and drop does not allow the level of control we need to create our powerful and beautiful experiences. I could go into detail but this is not the right forum.
This is a Next.js project bootstrapped with create-next-app
.
First, run the development server:
npm run dev
# or
yarn dev
Open http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying pages/index.tsx
. The page auto-updates as you edit the file.
API routes can be accessed on http://localhost:3000/api/hello. This endpoint can be edited in pages/api/hello.ts
.
The pages/api
directory is mapped to /api/*
. Files in this directory are treated as API routes instead of React pages.
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.
npx kill-port 3000
npx npm-check-updates --interactive
$ docker-compose down -v
для тестирования отправки почты:
$ brew update && brew install mailhog
$ brew services start mailhog