Разумно. А я понимаю, что скорее всего это резюме буду на prisma-cms делать)
Правда качество работы с системой после этих моих изысканий должно улучшиться.
Колупая призму я наконец-то понял, что это такое и зачем нужна. Осталось на аполло выстроить api и можно смело разворачивать prisma-cms)))
Может и не совсем зряшное дело делаю.
С любом случае спасибо!
Ну что я тебе могу сказать? Может ты со временем примерно поймешь, что зря все это делаешь...
prisma-cms - это не просто набор программного кода, а объединение множества разрозненных технологий, в том числе их настройка. Нельзя просто так взять эти отдельные компоненты и в кучу закинуть. Не будет это просто так работать. Извини, но я с этим тебе не помогу. Это как если бы я был инструктор по пилотированию самолетов, а ты приходишь такой и "А научи меня на вертолете летать". Это будет неэффективное расходование времени.
Это я "проект-резюме" варганю. По идее проще было бы на prisma-cms, но! я так хоть примерно понимаю, что-как работает
Дима, привет!
Ну ты коммит выкати с --no-verify, чтобы я видел в чем именно проблема.
Николай, привет!
В качестве углубления понимания модулей, которые используются в твоей сборке, ковыряю призму и уткнулся в проблему посева: не хочет работать. Ты случайно не натыкался на эту проблему?
dima@dima-Lenovo-ideapad-720-15IKB:~/projects/resume-v1$ npx prisma db seed
Environment variables loaded from .env
Running seed command `ts-node prisma/seed.ts` ...
/home/dima/projects/resume-v1/prisma/seed.ts:37
import { PrismaClient } from "@prisma/client";
^^^^^^
SyntaxError: Cannot use import statement outside a module
at wrapSafe (internal/modules/cjs/loader.js:979:16)
at Module._compile (internal/modules/cjs/loader.js:1027:27)
at Module.m._compile (/home/dima/projects/resume-v1/node_modules/ts-node/src/index.ts:1371:23)
at Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
at Object.require.extensions.<computed> [as .ts] (/home/dima/projects/resume-v1/node_modules/ts-node/src/index.ts:1374:12)
at Module.load (internal/modules/cjs/loader.js:928:32)
at Function.Module._load (internal/modules/cjs/loader.js:769:14)
at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:72:12)
at main (/home/dima/projects/resume-v1/node_modules/ts-node/src/bin.ts:331:12)
at Object.<anonymous> (/home/dima/projects/resume-v1/node_modules/ts-node/src/bin.ts:482:3)
An error occured while running the seed command:
Error: Command failed with exit code 1: ts-node prisma/seed.ts
Куда копать?
Прочесываю уроки. Приходится многое переписывать. Все-таки качество подачи материала очень низкое и часто вообще путает. И тут дело не только в машинном переводе. К примеру, вот перевод:
>> Классы - многоразовые стили, которые можно добавить к элементам HTML. Вот пример объявления класса CSS...
>> Вот в оригинале:
Classes are reusable styles that can be added to HTML elements.
Here's an example CSS class declaration...
В целом перевод здесь правильный. Но проблема в том, что формулировка в оригинале изначально не правильная.
В CSS классы - это не стили, а селекторы, то есть условно это фильтры, по которым можно найти в DOM элементы, к которым надо применить указанные стили. А в HTML классы - это просто атрибуты (одни из многих). То есть, к примеру, <p class="some-class"></p>. Здесь class - это имя атрибута, а some-class - это его значение.
В стилях же мы пишем, к примеру :
.some-class {
font-size: 12px;
color: blue;
/* Other styles */
}
Так вот, здесь ".some-class" - это по сути короткая запись выражения [class="some-class"]. И в том и в другом случае - это будут суть селекторы, то есть условия поиска элементов на странице. Используя и тот и другой селектор можно средствами JavaScript выполнять поиск таких элементов, используя методы типа Element.querySelector() и Element.querySelectorAll(), то есть поиск одного или нескольких дочерних элементов. В нашем случае это выглядело бы вот так:
const element = document.querySelector('.some-class');
const elements = document.querySelectorAll('.some-class');
const element2 = document.querySelector('[class="some-class"]');
const elements2 = document.querySelectorAll('[class="some-class"]');
В этих методах можно использовать и другие селекторы, как тот же #id, [name=some-name] и т.п.
Все это важно понимать, чтобы понимать как именно стили применяются к элементам. По сути происходи следующее:
1. Загружается HTML документ и происходит его первичная отрисовка.
2. Если в элементах есть инлайновые стили (как было рассмотрено в прошлом уроке, то есть типа style="color: red;"), то эти стили применяются к элементу сразу (хотя это утверждение следовало бы перепроверить, там могут быть отличия, но это не критично, пока условимся так).
3. Загружаются сторонние CSS-файлы и выполняется их разбор с целью вычленить все правила, найти элементы по селекторам и применить к ним рассчитанные стили. Здесь важно так же понять, что стили будут высчитываться, так как это CSS, то есть Каскадные Таблицы Стилей. Это означает, что на одни и те же элементы может быть в разных местах прописано несколько разных правил (в том числе конфликтующих). Поэтому браузер собирет все стили в кучу, рассчитает их с учетом приоритетов и выдаст конечные стили, которые будут применены в соответствии с селекторами. Такие конфликты можно увидеть в dev-tools. Пример:
Здесь легко рассмотреть несколько отдельных правил на один и тот же элемент и то, что какие-то правила конфликтуют. Вот что перечеркнут - это значит это правило было перетерто другим. Если перейти на вкладку Computed, то можно увидеть сгруппированные стили и если их разложить, там тоже можно видеть эти конфликты.
Так же все конечные стили элемента можно получить средствами JavaScript
for (const [prop, val] of element.computedStyleMap()) {
const value = val[0]?.value;
if(value === undefined) {
continue;
}
console.log('prop, value', prop, value)
}
Да, сейчас вам многое не будет понятно, но пока просто отметьте для себя этот момент. В дальнейшем наверняка не раз столкнетесь и будете правильней понимать.
>> Одной из замечательных особенностей атрибутов id является то, что, подобно классам, вы можете их использовать в качестве селекторов для оформления спомощью CSS.
В оригинале:
>> One cool thing about id attributes is that, like classes, you can style them using CSS.
Речь именно о том, что class и id - это селекторы, а не CSS-сущности.
Просто оставил артифакт)
Спасибо!
То есть перемудрил с полем)
Дима, привет!
Вопрос: а зачем тебе imageFieldRender? Если у тебя там все равно hidden-поле. Это же тебе не классический HTML, где для отправки данных нужен тег form с перечислением в нем всех полей, из которых и будут потом отправлены данные. Это Реакт. Здесь поля ввода нужны только для взаимодействия пользователя с данными. То есть здесь поля отображают что у нас в хранилище и через эти же поля можно редактировать данные хранилища. Но при отправке данных эти данные берутся из сасого хранилища, а не из полей формы. Таким образом, если ты поле делаешь невидимым и в твоем случае оно не имеет никакой функциональной нагрузки, его можно вообще удалить.
В остальном вроде все ОК.
Николай, привет! Посмотришь коммит?
Здесь вывожу картинку загруженную в форму.