secret-project

Отдам дизайнерское кресло вместе с дизайнером.

В рамках 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: То, как мы работаем сейчас, скоро будет выглядеть пережитком прошлого

Setup Hasura

$ cd hasura && docker-compose up -d

Connect Database

Database Display Name: default
Environment Variable: PG_DATABASE_URL

How to save DB-Schema

$ cd hasura
$ rm -rf migrations
$ hasura migrate create "init" --from-server --database-name default
$ rm -rf metadata
$ hasura metadata export

How to restore DB-Schema

$ cd hasura
$ hasura migrate apply
$ hasura metadata apply

How to backup data

$ 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

How to restore data

$ cd hasura
$ cat data.sql | docker exec -i secret-project-postgres-1 psql -U postgres

How To Start

$ npm install
$ npm run dev

Install the Hasura CLI, and dive into the console

hasura init
cd hasura && hasura console

Add Prettier

$ npm install -g prettier

How To Generate GraphQL Schema

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

How To remove (.*) from GraphQL Schema

\([\[\],.!_":\d\w\s\n]*\)

Config Apollo GraphQL Plugin

install plugin to VSCode: https://github.com/apollographql/vscode-graphql
add HASURA_GRAPHQL_URL & HASURA_ADMIN_SECRET to .env.local

Tables from next-auth-hasura-adapter

users
sessions
accounts
verification_tokens

Fake Data via json2graphql

$ npx json2graphql http://localhost:8080/ -d ./docs/responses.js --overwrite

TODOs

Что нового (для меня) про вёрстку

HTML5 Support

mgmeyers/obsidian-kanban#155

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.

Getting Started

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.

Learn More

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!

Deploy on Vercel

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.

Node.js Port 3000 already in use but it actually isn't?

npx kill-port 3000

Update packages

npx npm-check-updates --interactive

Delete Containers

$ docker-compose down -v

mailhog

для тестирования отправки почты:

$ brew update && brew install mailhog
$ brew services start mailhog

https://github.com/mailhog/MailHog

Name		Name	Last commit message	Last commit date
Latest commit History 538 Commits
.vscode		.vscode
assets		assets
components		components
docs		docs
graphqls		graphqls
hasura		hasura
packages/shared		packages/shared
pages		pages
public		public
repositories		repositories
styles		styles
types		types
utils		utils
.eslintignore		.eslintignore
.eslintrc.json		.eslintrc.json
.gitignore		.gitignore
.nvmrc		.nvmrc
.prettierignore		.prettierignore
.prettierrc.yml		.prettierrc.yml
BACKLOG.md		BACKLOG.md
CLICKUP.md		CLICKUP.md
LICENSE		LICENSE
PROCESSES.md		PROCESSES.md
README.md		README.md
TDD.md		TDD.md
apollo.config.js		apollo.config.js
codegen.ts		codegen.ts
constants.ts		constants.ts
middleware.ts		middleware.ts
next.config.js		next.config.js
package-lock.json		package-lock.json
package.json		package.json
postcss.config.js		postcss.config.js
tailwind.config.js		tailwind.config.js
try-schema.graphql		try-schema.graphql
tsconfig.json		tsconfig.json

License

comerc/secret-project

Folders and files

Latest commit

History

Repository files navigation