Буду рад если расскажешь немного про совмещение дизайна и кодинга. Чему учится в первую очередь? Как отфильтровывать для себя информацию и применять знания на деле.

В случае с Notion совмещение дизайна и кодинга нужно для того, чтобы на последней миле доводки до лоска (мы называем это «styling» или «polishing») этим занимался не разработчик, а дизайнер — это всем колоссально экономит время и нервы.

Иногда я получаю на руки довольно коряво выглядящую вещь, но она РАБОТАЕТ, и остается лишь ее «приодеть». Иногда я делаю фичу от начала и до конца сам. Иногда я пишу половину кода за разработчика, а иногда он делает все сам, и мне не приходится делать вообще ничего, потому что в дизайн-системе (в виде готовых react-компонентов) и так уже все предусмотрено.

И да, макеты все равно нужны, потому что писать код, придумывая по пути дизайн, как правило довольно неэффективно, потому что код куда более интертен, и там порой надо переписать полфайла, чтобы передвинуть какую-нибудь кнопку в другое место.

Прототипы тоже не нужны — просто создаешь ветку от master, фигачишь, а потом открываешь pull request, вот и все. Плюсы такого подхода: ты используешь все готовое, что уже и так есть в базе кода, и всегда работаешь с живыми данными.

Простой алгоритм научиться кодингу:

1. Не заморачиваться выбором языка и инструментов, на это уходит просто какое-то колоссальное количество времени. Следуй за мной: HTML/CSS, JavaScript (а потом Typescript), React (а потом что-нибудь вроде Next.js), Webpack, VSCode, Chrome DevTools, любой дефолтный терминал. Все, кажется, больше ничего не надо.

2. Теперь мы делаем скриншот любого сайта/приложения, и пытаемся сверстать его пиксель в пиксель используя только один файл (index.html) и только связку HTML/CSS, никакого JS. Важно, чтобы это выглядело одинаково пиксель в пиксель, тянулось и скроллилось как надо. Хороших книжек по этой теме нет, все гуглится.

3. Теперь, когда мы умеем делать аккуратную статичную верстку чего угодно (особенно это пригодится для собственных макетов), можно научиться это деплоить (используйте zeit.co, это бесплатно), оживлять с помощью React, начать использовать систему контроля версий (Git + Github), учиться рефакторить код, и, наконец-то, читать книжки (например, The Little Schemer).

#qa