Обсуждение задания "Use export to Reuse a Code Block"

Обсуждение задания "Roman Numeral Converter"

Обсуждение задания "Use * to Import Everything from a File"

Обсуждение задания "Understand the Differences Between import and require"

Обсуждение задания "Store Data with Sass Variables"

Новости

@prisma-cms/front-editor

Уроки

Учебный проект pivo-moscow

Как будет процес обучения выглядеть? 

- здесь обсуждаем текущую задачу по проекту, которую решаем;

- ищем оптимальное решение;

- смотрим, что вышло и переходим к следующей задаче.

Есть идеи как усилить процес - пиши) 

Олег, приветствую! Пока видится так: - здесь обсуждаем текущую задачу по проекту, которую решаем; - ищем оптимальное решение; - внедряем в проект; - смотрим, что вышло и переходим к следующей задаче. Есть идеи как усилить процес - пиши)

Олег, приветствую! Пока видится так: - здесь обсуж

Дима, успехов в начинаниях! :)

В свою очередь добавлю, что этот проект для обучения современным технологиям очень годится, потому что так же используется GraphQL API https://pivkarta.ru/api/

и здесь уместно все то же самое, что я и записывал в одном из первых видео https://freecode.academy/topics/obzornoe-video-po-@prisma-cms/nextjs

Так что тоже всем советую поиграться. Задачи по объему совсем небольшие, а знания будут получены очень полезные.

Дима, успехов в начинаниях! :) В свою очередь добавлю, что этот проект для обучения современным технологиям очень годится, потому что так же используется GraphQL API https://pivkarta.ru/api/ и здесь уместно все то же самое, что я и записывал в одном из первых видео https://freecode.academy/topics/obzornoe-video-po-@prisma-cms/nextjs Так что тоже всем советую поиграться. Задачи по объему совсем небольшие, а знания будут получены очень полезные.

Дима, успехов в начинаниях! :) В свою очередь доба

Николай, спасибо большое!

Не за что! :)

Дима, ты вылил в гитхаб проект с локала как есть, и потерялась всякая связь с исходным проектом https://github.com/prisma-cms/nextjs

1. Удали этот проект (в настройках в самом низу страницы есть).

2. Перейди на https://github.com/prisma-cms/nextjs и сделай с него клон (fork).

3. Переименуй свой форк (так же в настройках есть).

4. Вылий с локала в него (коммиты должны залететь без проблем).

Дима, ты вылил в гитхаб проект с локала как есть, и потерялась всякая связь с исходным проектом https://github.com/prisma-cms/nextjs Сделай следующее: 1. Удали этот проект (в настройках в самом низу страницы есть). 2. Перейди на https://github.com/prisma-cms/nextjs и сделай с него клон (fork). 3. Переименуй свой форк (так же в настройках есть). 4. Вылий с локала в него (коммиты должны залететь без проблем).

Дима, ты вылил в гитхаб проект с локала как есть,

Понял в чем ошибка.

А в чем проблема-то была? Я так же делал и у меня все ОК было.

А в чем проблема-то была? Я так же делал и у меня

Олег, вот здесь проббел важен: import{capitalizeString}

Должно быть import {capitalizeString}

А вообще тест написан очень паршиво, потому что разбор регулярками написан и там важны двойные кавычки, с одинарными будет ошибка.

Олег, вот здесь проббел важен: import{capitalizeString} Должно быть import {capitalizeString} А вообще тест написан очень паршиво, потому что разбор регулярками написан и там важны двойные кавычки, с одинарными будет ошибка.

Олег, вот здесь проббел важен: import{capitalizeSt

Есть, сделал! Ссыль та же.

Теперь можно посмотреть что было добавлено, чтобы заготовка заработала с новым API-сервером и появилась страница списка пива https://github.com/linklib/pivo-moscow/commit/e2787bf1b338e1342f4ac22a7279f3131456b7cd

И можно в целом сравнить два репозитория https://github.com/prisma-cms/nextjs/compare/master...linklib:master

А можно посмотреть что нового в текущий момент есть в заготовке по отношению к твоему проекту https://github.com/linklib/pivo-moscow/compare/master...prisma-cms:master

Вот. Теперь можно посмотреть что было добавлено, чтобы заготовка заработала с новым API-сервером и появилась страница списка пива https://github.com/linklib/pivo-moscow/commit/e2787bf1b338e1342f4ac22a7279f3131456b7cd И можно в целом сравнить два репозитория https://github.com/prisma-cms/nextjs/compare/master...linklib:master А можно посмотреть что нового в текущий момент есть в заготовке по отношению к твоему проекту https://github.com/linklib/pivo-moscow/compare/master...prisma-cms:master

Вот. Теперь можно посмотреть что было добавлено, ч

И все-таки накосячил где-то... Закомитить локальную версию не получилось и я склонировал новый репозиторий, закинул туда из архива pages/ и src/ и потом уже комит сделал.

Проект запустился и показывет ровно, что и должен, но изменеия не воспринимается и вообще ругается  GraphQL на незнакомые type  Beer, Place и так далее.

Видимо где-то осталась старая схема базовая. Не подскажешь, как перегенерировать?

И все-таки накосячил где-то... Закомитить локальную версию не получилось и я склонировал новый репозиторий, закинул туда из архива pages/ и src/ и потом уже комит сделал. Проект запустился и показывет ровно, что и должен, но изменеия не воспринимается и вообще ругается  GraphQL на незнакомые type  Beer, Place и так далее. Видимо где-то осталась старая схема базовая. Не подскажешь, как перегенерировать?

И все-таки накосячил где-то... Закомитить локальну

Дима, тема интересная) 

Только обсуждать нужно не здесь. Можно создать проект и делать отдельными задачами, так будет более правильно и удобно. 

В любой момент можно будет посмотреть на каком этапе проект и обсуждать вопросы по каждой задаче в отдельной ветке.

Только не знаю работает этот функционал или нет, смотрю проекты захожу туда, но не вижу там задач. 

Дима, тема интересная) Только обсуждать нужно не здесь. Можно создать проект и делать отдельными задачами, так будет более правильно и удобно. В любой момент можно будет посмотреть на каком этапе проект и обсуждать вопросы по каждой задаче в отдельной ветке. Только не знаю работает этот функционал или нет, смотрю проекты захожу туда, но не вижу там задач.

Дима, тема интересная) Только обсуждать нужно не з

Олег, должно на днях устаканиться) И похоже именно в проекты тема переедет!

Олег, должно на днях устаканиться) И похоже именно

Доброго времени суток Дмитрий! С удовольствием в ближайшее время присоединюсь к вам, в работе по созданию проекта!

Доброго времени суток Дмитрий! С удовольствием в б

<< Закомитить локальную версию не получилось 

Вот тут надо было сразу задавать вопросы что не так.

Вероятнее всего, у тебя при пуше ошибка возникла вот такая:

Это все потому что в исходный бранч уже прилетели новые коммиты, и твоя локальная версия просто отстает от нее. 

Фиксится просто: надо скачать обновления на локал и все.

А после опять выливаем.

Вылил сюда: https://github.com/Pivkarta/nextjs

Можешь от него по той же схеме ответвиться. Или в этой сделать себе собственную ветку и сливать потом в мастер. Так будет даже правильней.

git push -u origin master
To github.com:Pivkarta/nextjs.git
 ! [rejected]        master -> master (fetch first)
error: failed to push some refs to 'github.com:Pivkarta/nextjs.git'
hint: Updates were rejected because the remote contains work that you do
hint: not have locally. This is usually caused by another repository pushing
hint: to the same ref. You may want to first integrate the remote changes
hint: (e.g., 'git pull ...') before pushing again.
hint: See the 'Note about fast-forwards' in 'git push --help' for details.


<< Закомитить локальную версию не получилось Вот тут надо было сразу задавать вопросы что не так. Вероятнее всего, у тебя при пуше ошибка возникла вот такая: Это все потому что в исходный бранч уже прилетели новые коммиты, и твоя локальная версия просто отстает от нее. Фиксится просто: надо скачать обновления на локал и все. git pull origin master А после опять выливаем. git push origin master И все ОК. Вылил сюда: https://github.com/Pivkarta/nextjs Можешь от него по той же схеме ответвиться. Или в этой сделать себе собственную ветку и сливать потом в мастер. Так будет даже правильней.

<< Закомитить локальную версию не получилось Вот т

<< Проект запустился и показывет ровно, что и должен, но изменеия не воспринимается и вообще ругается  GraphQL на незнакомые type  Beer, Place и так далее.

Если показывает, что надо, значит так и есть.

GraphQL не знакомые типы - это, я так понимаю, в VSCode? Расширение? Практически всем GraphQL-расширениям надо указывать путь к схеме. Иначе откуда они узнают о типах? 

Смотри доку своего расширения и укажи путь до схемы src/modules/gql/generated/schema.json

Или пока забей, пока я не выберу какое-то боле менее популярное расширение и не напишу доку.

А в целом по поводу схемы и базы: выполнить надо 3 шага:

1. Убедиться, что есть файл .env и в нем прописан корректный адрес API-шлюза

2. Выполни генерацию типов

NODE_PATH=. ts-node -P tsconfig.server.json src/modules/gql/cli/generateTypes/run

(Если проект пустой и еще нет в проекте пользовательских graphql-запросов, то будет только 4 строчки)

Тут просто не должно быть ошибок, результат типа такого:

Если все эти шаги ОК, значит все ОК.

yarn types
yarn run v1.22.5
$ tsc --pretty --noEmit
Done in 7.59s.


<< Проект запустился и показывет ровно, что и должен, но изменеия не воспринимается и вообще ругается  GraphQL на незнакомые type  Beer, Place и так далее. Видимо где-то осталась старая схема базовая. Не подскажешь, как перегенерировать? Если показывает, что надо, значит так и есть. GraphQL не знакомые типы - это, я так понимаю, в VSCode? Расширение? Практически всем GraphQL-расширениям надо указывать путь к схеме. Иначе откуда они узнают о типах? Смотри доку своего расширения и укажи путь до схемы src/modules/gql/generated/schema.json Или пока забей, пока я не выберу какое-то боле менее популярное расширение и не напишу доку. А в целом по поводу схемы и базы: выполнить надо 3 шага: 1. Убедиться, что есть файл .env и в нем прописан корректный адрес API-шлюза В твоем случае это API_ENDPOINT=https://pivkarta.ru/api/ 2. Выполни генерацию типов yarn generate:types Должно быть так: NODE_PATH=. ts-node -P tsconfig.server.json src/modules/gql/cli/generateTypes/run ✔ Parse configuration ✔ Generate outputs ✔ Parse configuration ✔ Generate outputs ✔ Parse configuration ✔ Generate outputs (Если проект пустой и еще нет в проекте пользовательских graphql-запросов, то будет только 4 строчки) 3. Проверь TS-типы yarn types Тут просто не должно быть ошибок, результат типа такого: Если все эти шаги ОК, значит все ОК.

<< Проект запустился и показывет ровно, что и долж

<< Дима, тема интересная) 

Олег, ты прям как в воду смотришь :) Только вчера Диме говорил, что буду дописывать функционал обсуждений в задачах :)

Постараюсь сегодня сделать.

<< Дима, тема интересная) Только обсуждать нужно не здесь. Можно создать проект и делать отдельными задачами, так будет более правильно и удобно. В любой момент можно будет посмотреть на каком этапе проект и обсуждать вопросы по каждой задаче в отдельной ветке. Только не знаю работает этот функционал или нет, смотрю проекты захожу туда, но не вижу там задач. Олег, ты прям как в воду смотришь :) Только вчера Диме говорил, что буду дописывать функционал обсуждений в задачах :) Постараюсь сегодня сделать.

<< Дима, тема интересная) Только обсуждать нужно н

Олег, здесь видимо техническая ошибка. Перепроверю, маякну.

Олег, здесь видимо техническая ошибка. Перепроверю

Николай, приветствую! Спасибо!!

Николай, приветствую! Спасибо!! Сергей: рад!!

Олег, тут описание ни к черту. Оказывается, решение такое:

import * as stringFunctions from "./string_functions.js";
// add code above this line

Олег, тут описание ни к черту. Оказывается, решени

Не за что!

Николай, форкнул и... где-то пропускаю важное

1. git clone https://github.com/linklib/pivo-moscow.git

3. Поставил в конфиг https://pivkarta.ru/api/

В терхминале без ошибок, а в консоли хрома - куча 

VM308 _app-a0194a063b3b1d8078bb.js:1 WebSocket connection to 'ws://localhost:3000/api/' failed: Error during WebSocket handshake: Unexpected response code: 308

Николай, форкнул и... где-то пропускаю важное 1. git clone https://github.com/linklib/pivo-moscow.git 2. yarn install 3. Поставил в конфиг https://pivkarta.ru/api/ 4. yarn generate:types Отдал yarn types: yarn run v1.10.1 $ tsc --pretty --noEmit Done in 4.79s. 5. yarn build 6.yarn start В терхминале без ошибок, а в консоли хрома - куча VM308 _app-a0194a063b3b1d8078bb.js:1 WebSocket connection to 'ws://localhost:3000/api/' failed: Error during WebSocket handshake: Unexpected response code: 308 Что это может быть?

Николай, форкнул и... где-то пропускаю важное 1. g

Да все ОК у тебя. Просто websocket не умеет в ws://, умеет только в wss:// Это по соображениям безопасности. Не обращай внимания.

Позже рассмотрим этот момент, сейчас он для нас не критичен.

На боевом сайте, если работает на https://, автоматом включается wss:// и все ОК.

Да все ОК у тебя. Просто websocket не умеет в ws://, умеет только в wss:// Это по соображениям безопасности. Не обращай внимания. Позже рассмотрим этот момент, сейчас он для нас не критичен. На боевом сайте, если работает на https://, автоматом включается wss:// и все ОК.

Да все ОК у тебя. Просто websocket не умеет в ws:/

Тогда какая-то друшгая проблема. Вношу изменения в код: Например <div>Main Page 111111</div> в MainPage/index.tsx - изменения появляются только после 

Тогда какая-то друшгая проблема. Вношу изменения в код: Например <div>Main Page 111111</div> в MainPage/index.tsx - изменения появляются только после yarn build yarn start

Тогда какая-то друшгая проблема. Вношу изменения в

Логично. Потому что ты запускаешь боевую версию, которую, в свою очередь, надо сначала билдить.

А чтобы работало налету (hat reload), надо запускать yarn dev. И я тебе это тоже не раз говорил. А ты не записал.

Алёша :) Логично. Потому что ты запускаешь боевую версию, которую, в свою очередь, надо сначала билдить. А чтобы работало налету (hat reload), надо запускать yarn dev. И я тебе это тоже не раз говорил. А ты не записал.

Алёша :) Логично. Потому что ты запускаешь боевую

Ъ.... Поздравляю Шарик, ты - балбес...

Задача 1. Вывести на страничке пива: название пива, описание, регион, производителя и логотип. Так же нужно сформировать URL ЧПУ и ссылку на источник.

На текущий момент в контенте выводится id, url формируется по id.

Задача 1. Вывести на страничке пива: название пива, описание, регион, производителя и логотип. Так же нужно сформировать URL ЧПУ и ссылку на источник. На текущий момент в контенте выводится id, url формируется по id. pages/beers/[id].tsx

Задача 1. Вывести на страничке пива: название пива

Дима, задачи в комментах пока не создавай. Я готовлю под это функционал.

Дима, задачи в комментах пока не создавай. Я готов

Принято.

П.С. Старайся тоже код вставлять в преттиер, а то читать сложно.

class ControlledInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input: ''
    };
    // change code below this line
    this.onChange = this.onChange.bind(this);
    // change code above this line
  }
  // change code below this line

  onChange(event){
    this.setState({
      input: event.target.value,
    });
  }

  // change code above this line
  render() {
    return (
      <div>
        { /* change code below this line */}

        <input value={this.state.input || ""} onChange={this.onChange}/>

        { /* change code above this line */}
        <h4>Controlled Input:</h4>
        <p>{this.state.input}</p>
      </div>
    );
  }
};


Мое решение : П.С. Старайся тоже код вставлять в преттиер, а то читать сложно.

Мое решение : П.С. Старайся тоже код вставлять в п

Слева в редакторе есть три кнопки, в том числе и Помощь. Перешел в подсказки, взял первое же решение предложенное (Solutions)

Чессказать, сам я и не догадался как решить эту задачку, без подсказки оказалось никак. Но именно такой современный мир разработки: умение быстро найти решение в сети, так что это ОК. Но когда нашел и оно работает, очень хорошо попробовать разобраться как именно и почему оно работает. Чтобы прокачать и свои навыки.

Слева в редакторе есть три кнопки, в том числе и Помощь. Перешел в подсказки, взял первое же решение предложенное (Solutions) Работает. Чессказать, сам я и не догадался как решить эту задачку, без подсказки оказалось никак. Но именно такой современный мир разработки: умение быстро найти решение в сети, так что это ОК. Но когда нашел и оно работает, очень хорошо попробовать разобраться как именно и почему оно работает. Чтобы прокачать и свои навыки.

Слева в редакторе есть три кнопки, в том числе и П

Николай, привет! В каком виде выкладывать полезную информацию, как думаешь? Например, как сделать простую страничку About (в коммиты кинул, но почему-то залетело на Pivkarta/nextjs и на linklib/pivo-moscow).

А вот с получением данных для страницы пива пока разобраться не получается)

Николай, привет! В каком виде выкладывать полезную информацию, как думаешь? Например, как сделать простую страничку About (в коммиты кинул, но почему-то залетело на Pivkarta/nextjs и на linklib/pivo-moscow). А вот с получением данных для страницы пива пока разобраться не получается)

Николай, привет! В каком виде выкладывать полезную

Сегодня точно выкачу топики с привязкой к задачам, вот туда и сможешь вылить. Логично в проектах ставить задачи типа "Сделать страничку О нас" и в нем написать топик и указать коммит.

<< в коммиты кинул, но почему-то залетело на Pivkarta/nextjs и на linklib/pivo-moscow

Один пуш не должен прилетать и туда и туда. Я вижу коммит в linklib/pivo-moscow, но не вижу в Pivkarta/nextjs, как, в принципе, и должно быть. 

Дима, привет! Сегодня точно выкачу топики с привязкой к задачам, вот туда и сможешь вылить. Логично в проектах ставить задачи типа "Сделать страничку О нас" и в нем написать топик и указать коммит. << в коммиты кинул, но почему-то залетело на Pivkarta/nextjs и на linklib/pivo-moscow Один пуш не должен прилетать и туда и туда. Я вижу коммит в linklib/pivo-moscow, но не вижу в Pivkarta/nextjs, как, в принципе, и должно быть.

Дима, привет! Сегодня точно выкачу топики с привяз

Все понял, спасибо!

Добавление переменных в запрос в nextjs

Ну я практически сам её решил, но я не понял почему моё решение не прошло ни один тест? оно работало почти для всех случаев из теста

Ну я практически сам её решил, но я не понял почем

А пришли свое решение.

Ну, в графовском запросе у тебя все ОК, то есть ты уже можешь в хук запроса скармливать where.

Вот смотри, вот здесь ты передаешь переменные.

То есть в твоем случае достаточно вернуть так:

  const variables = getVariables(router.query)

  const response = useBeersQuery({
    variables,
  })

const getVariables = (query: ParsedUrlQuery): BeersQueryVariables => {
  const first =
    query.first && typeof query.first === 'string'
      ? parseInt(query.first)
      : undefined

  return {
    first,
    where: {
      name: "Lager Hell Ayinger (Айингер Лагер Хелль) бутылка",
    },
  }
}

Ну, в графовском запросе у тебя все ОК, то есть ты уже можешь в хук запроса скармливать where. Вот смотри, вот здесь ты передаешь переменные. То есть в твоем случае достаточно вернуть так:

Ну, в графовском запросе у тебя все ОК, то есть ты

Спасибо, разбираюсь дальше!

Вопрос про раздел ЗАДАЧИ

Дима, как раз этим занимаюсь. Часть функционала уже вылил, но еще часть доделываю. Выкачу, будет анонс.

Дима, как раз этим занимаюсь. Часть функционала уж

Вот моё решение, оно немного не доделано, но должно работать для большинства случаев из теста, ну хотя бы один проходить точно)

Вот моё решение, оно немного не доделано, но должно работать для большинства случаев из теста, ну хотя бы один проходить точно) https://codepen.io/shelder14/pen/PoGXaEo

Вот моё решение, оно немного не доделано, но должн

Кирилл, этот раздел скорее всего еще не рабочий. Надо саасовский препроцессор сюда подключать. 

Как я и писал ранее, пока 3 раздела основных: HTML+CSS, JS и React.

По мере того, как буду подправлять другие разделы, буду писать анонсы.

Кирилл, этот раздел скорее всего еще не рабочий. Надо саасовский препроцессор сюда подключать. Как я и писал ранее, пока 3 раздела основных: HTML+CSS, JS и React. По мере того, как буду подправлять другие разделы, буду писать анонсы.

Кирилл, этот раздел скорее всего еще не рабочий. Н

Понял, спасибо!

В таких случаях жми F12 и смотри что происходит в консоли. Ты просто забыл объявить переменную.

const romanNumbers = [
    {symbol: 'I', number: 1},
    {symbol: 'V', number:5},
    {symbol: 'X', number:10},
    {symbol: 'L', number:50},
    {symbol: 'C', number:100},
    {symbol: 'D', number:500},
    {symbol: 'M', number:1000}
  ];

В таких случаях жми F12 и смотри что происходит в консоли. Ты просто забыл объявить переменную. const забыл. В итоге ошибка

В таких случаях жми F12 и смотри что происходит в

Lol точно, понял, cпасибо. Очень странно что в codepen не было никакой ошибки....

Lol точно, понял, cпасибо. Очень странно что в cod

Особо странного ничего нет. Это зависит от настроек и там специально сделано, чтобы новички меньше спотыкались. Здесь же ближе к боевым реалиям.

Особо странного ничего нет. Это зависит от настрое

Что такое преттиер?

Ну, не совсем корректно я это слово выбрал. В редакторах это плагин, который приводит код в порядок по заданным правилам (отступы, переносы, кавычки и т.п.). Здесь имелось ввиду просто в редактор кода вставить, чтобы подсветка была.

Ну, не совсем корректно я это слово выбрал. В реда

Дима, добавил создание задач, но пока их можно создавать только со страницы проекта, а вот создание проектов пока в работе. Вот задача: https://freecode.academy/tasks/ckk263hjglz58073032f40e1n

Думаю, она скоро будет выполнена.

Пока же можно создавать задачи в любом существующем уже проекте. Редактирование задач тоже работает

Дима, добавил создание задач, но пока их можно создавать только со страницы проекта, а вот создание проектов пока в работе. Вот задача: https://freecode.academy/tasks/ckk263hjglz58073032f40e1n Думаю, она скоро будет выполнена. Пока же можно создавать задачи в любом существующем уже проекте. Редактирование задач тоже работает

Дима, добавил создание задач, но пока их можно соз

Николай, спасибо! Может создашь проект "Учебный проект pivo-moscow"? Я тогда потихоньку задачи туда буду добавлять. Или дождаться окончания работ?

Николай, спасибо! Может создашь проект "Учебный пр

Добавлено создание и редактирование задач

Весь базовый функционал доступен на старом сайте https://old.prisma-cms.com/projects/create

Можешь там досьавить проект. И так будет правильней, потому что он будет привязан к тебе.

Весь базовый функционал доступен на старом сайте https://old.prisma-cms.com/projects/create Можешь там досьавить проект. И так будет правильней, потому что он будет привязан к тебе.

Весь базовый функционал доступен на старом сайте h

Понял, добавляю!

Проект появился, но задача не ставиться: страница https://freecode.academy/tasks/create/ckk2o04gkm3rc07301qpry3xs не найдена

Я так понимаю - из старой дже версии можно добавить.

Проект появился, но задача не ставиться: страница https://freecode.academy/tasks/create/ckk2o04gkm3rc07301qpry3xs не найдена Я так понимаю - из старой дже версии можно добавить.

Проект появился, но задача не ставиться: страница

Это бага :) Я не видел ту кнопку. Легаси. Поправлю.

Пока просто в проект зайди https://freecode.academy/projects/uchebnyy-proekt-pivo-moscow

Это бага :) Я не видел ту кнопку. Легаси. Поправлю. Пока просто в проект зайди https://freecode.academy/projects/uchebnyy-proekt-pivo-moscow Там кнопка.