Песочница

Blog by Fi1osof

Не работает JS что делать ?

Javascript-библиотека vis.js Визуализация данных

Современный сайт на javascript.

React-js. Урок №2. Запросы с помощью GraphQL

Javascript headless prisma-cms. CMS без внешнего оформления.

Прикольно, надо будет попробовать

Я бы юзал, но не за деньги, так как сейчас куча приложений на телефонах с похожей целью,

Я бы юзал, но не за деньги, так как сейчас куча пр

Можно для примера названия приложений? Я тоже различные программы юзаю (пусть и не телефонные) и нигде не получил того функционала, который сейчас реализую. Все они хороши, но в отдельности. Планфикс — управление проектами, Битрикс24 — CRM и таймменеджмент, toggl.com — еще более крутой таймменеджмент. Но ни одна из этих программ не дает мне полного видения моего бизнес-мира, то есть чтобы на одной странице увидеть все составляющие и их воздействие на него.

Можно для примера названия приложений? Я тоже разл

Николай, это круто! Что почитать, чтобы делать такие сайты?)

Николай, это круто! Что почитать, чтобы делать так

Читать на самом деле много. webpack, react, material-ui, чистый javascript и т.п. Скоро начну цикл статей по этому направлению.

Читать на самом деле много. webpack, react, materi

Здравствуйте Николай. Смотрю вы выбрали react.js, а Angular 2 не рассматривали? Я думаю за такими сайтами (веб-приложениями) будущее, поэтому тоже планирую изучить данные технологии. Я конечно еще совсем "зеленый" "программист", но учиться никогда не поздно. Жду ваших статей на эту тему, они у вас всегда понятные и полезные.

Здравствуйте Николай. Смотрю вы выбрали react.js, 

Angular - готовый фреймворк, а я все-таки любитель более низкоуровневых вещей. Скорее всего ангулар покручу, конечно, но более из соображений расширения кругозора.

Angular - готовый фреймворк, а я все-таки любитель

Идею понял, спасибо.

Не за что

Бомба) Только вот один момент смущает - как поисковики будут индексировать такой сайт?

Бомба) Только вот один момент смущает - как поиско

А вы посмотрите внимательней на сам сайт MODX-Клуба. Он и без JS рендерится, на стороне сервера. Работает node.js+react-dom. Все отлично индексируется. Тройка тоже чуть позже заработает на такой связке.

А вы посмотрите внимательней на сам сайт MODX-Клуб

Хорошо, косяк в тройке, работает только на ie 11 на ниже нет, ошибка в консоле.

Хорошо, косяк в тройке, работает только на ie 11 н

Полифилы потом добавлю. А вообще IE - это косяк)

Здорово! Очень быстро работает!  

.block_title .searchform input {padding:0px 20px 0px 60px}

Здорово! Очень быстро работает!

P.S. верстка не наша, наше только программирование. Верстка предоставлялась заказчиком. Мы ее как есть переносили на JSX.

@msk13s, привет! Спасибо) P.S. верстка не наша, наше только программирование. Верстка предоставлялась заказчиком. Мы ее как есть переносили на JSX.

@msk13s, привет! Спасибо) P.S. верстка не наша, на

Очень и очень впечатляет! Как будто прикасаешься к будущему веб-технологий! Безусловное и нужное направление, радует что эти современные технологии внедряете и нас учите! Спасибо за информирование!

Очень и очень впечатляет! Как будто прикасаешься к

Действительно очень нужный инструмент. Позволяет навести порядок в запросах к серверу

Действительно очень нужный инструмент. Позволяет н

мне понравилось, поюзал :D правда практического применения пока не было, но уже преставляю где можно использовать

мне понравилось, поюзал :D правда практического пр

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

Когда по отдельности берешь эти данные, тогда еще ничего. А когда надо, к примеру, такое получить:

   По каждому пользователю список его работ

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

           По каждому участнику получить список направлений, по которым он участвовал в проекте

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

                Сколько компаний работает по данному направлению

Уровней вложенности может быть очень много. И каждому может понадобиться свой набор данных. Попробуй-ка на классических технологиях такое реализовать (конструктор запросов). 

На простых сайтах, конечно, это решение скорее всего будет избыточным. Но на сайтах покрупнее очень даже нужная штука. Вот смотри структура данных здесь (далеко не полная): Пользователь Команда Работа портфолио Вид деятельности Топик Комментарий Когда по отдельности берешь эти данные, тогда еще ничего. А когда надо, к примеру, такое получить: Список пользователей По каждому пользователю список его работ В каждой работе получить список участников работы По каждому участнику получить список направлений, по которым он участвовал в проекте По каждому направлению получить сколько всего работ по данному направлению есть Сколько компаний работает по данному направлению и т.д. и т.п. Уровней вложенности может быть очень много. И каждому может понадобиться свой набор данных. Попробуй-ка на классических технологиях такое реализовать (конструктор запросов).

На простых сайтах, конечно, это решение скорее все

Все решено)

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

Что не так было? Просто домен не прописали в гугл.

Не прописал путь к css и ключ забыл сменить)

Николай, большое спасибо за уроки! Намереваюсь попробовать Vulcan.js

Николай, большое спасибо за уроки! Намереваюсь поп

ОК. Как будут результаты, если что, напишите небольшой топик что и как там работает, плиз. 

А я свой один проект переделываю, полностью на JS. Очень интересные техники новые освоил, и в GraphQL продвинулся. Скоро новые уроки появятся.

ОК. Как будут результаты, если что, напишите небольшой топик что и как там работает, плиз. А я свой один проект переделываю, полностью на JS. Очень интересные техники новые освоил, и в GraphQL продвинулся. Скоро новые уроки появятся.

ОК. Как будут результаты, если что, напишите небол

Николай, вижу мой совет про graphql в первом уроке был принят ))). Благодарю за этот урок, Вы занимаетесь хорошим делом! Хотел бы добавить в преимущества:

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

2. Возможность работать сразу с несколькими источниками данных. Поскольку по сути graphql это агрегатор, мы можем накрутить работу сразу с несколькими базами и соединять данные в одну выборку.

3. Быстро разворачивается в сравнении с рест. Если написать генератор для моделей, вообще за 5 минут. И за счёт того, что всего 1 эндпоинт мы получаем полнофункциональный вариант по сути, только связи руками накрутить. Ну исключение с мутациями, на них генератор не сделать.

Николай, вижу мой совет про graphql в первом уроке был принят ))). Благодарю за этот урок, Вы занимаетесь хорошим делом! Хотел бы добавить в преимущества: 1. Структура ответа всегда точно повторяет структуру запроса, все сталкивались с проблемой когда в ресте поменялась структура объекта  в ответе и все ломалось. И версионность больше не нужна по этой причине. 2. Возможность работать сразу с несколькими источниками данных. Поскольку по сути graphql это агрегатор, мы можем накрутить работу сразу с несколькими базами и соединять данные в одну выборку. 3. Быстро разворачивается в сравнении с рест. Если написать генератор для моделей, вообще за 5 минут. И за счёт того, что всего 1 эндпоинт мы получаем полнофункциональный вариант по сути, только связи руками накрутить. Ну исключение с мутациями, на них генератор не сделать.

Николай, вижу мой совет про graphql в первом уроке

Да, Артем, сейчас граф - один из моих основных инструментов и ввел я его уже на нескольких проектах. Очень круто он себя показывает при внедрении на уже готовые проекты. К примеру, не так давно я анонсировал запуск проекта http://troika-gorod.ru/ , который написан полностью на JS, а MODX используется только для проброса и модификации API-запросов. И вот они обратились за доработками, и я решил, что раз функционал растет, то имеет смысл граф ввести, чтобы потом не было мучительно больно. Отмечу, что ввести граф, на самом деле - это совсем не 5 минут (если сайт - не сайт-визитка), во всяком случае у меня. Я руками все пишу. По моим наблюдениям, на среднем проекте только листинг основных запросов составляет строк 500, и это еще при условии использования фрагментов, которые вставлять можно в разные части. На тройке - это 1000 строк. Все это - три десятка АПИ-запросов. http://joxi.ru/bmoY6bGSMdRzpA 

Так вот, здесь себя граф показывает не только как отличное средство для построения запроса, но и как архитектор АПИ. Вот пара примеров с этой тройкой: 

Справа - это предоставленная документация. Видно, что вкралась опечатка.

А вот пример, почему такое невозможно с графом: 

А вот наглядный пример, для чего это делается: вот я одним запросом получаю сразу три блока информации http://joxi.ru/bmoY6bGSMdRJpA 

При чем в своем конечном ответе я получаю именно один конечный многоуровневый JSON. А то, что граф выполнил для сбора этой информации три запроса - так это как раз и демонстрирует то, о чем говорит Артем - возможность работать сразу с несколькими источниками данных. Здесь три запроса выполняется только потому, что на стороне сервера не работает граф и он просто не может вернуть данные одним ответом. А вот на другом моем проекте (и не только на нем), граф крутится и на сервере и в ответе в одном я получаю все нужные мне данные 

Кстати, в связке с сервером, у меня получилась вообще очень интересная связка: у меня и на сервере, и на клиенте используется единая схема. Это позволяет, во-первых, на сервер в запросе слать не портянку, а просто название операции с параметрами. К примеру, на получение этих данных отправляется вот такой запрос:

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

Короче, про него можно очень много всего рассказывать. И надо отметить, что работа с ним - это не всегда праздник. В том же браузере, из-за того, что он использует промисы, он не рассчитан на множественный вызов (то есть когда во внутренних резолверах выполняешь еще запросы на граф). В случае сотен вызовов в рамках одного запроса, выборка конечная может составить 10 секунд и более :) Но если правильно оптимизировать все, то этот же объем данных будет получен менее чем за секунду.

Да, Артем, сейчас граф - один из моих основных инструментов и ввел я его уже на нескольких проектах. Очень круто он себя показывает при внедрении на уже готовые проекты. К примеру, не так давно я анонсировал запуск проекта http://troika-gorod.ru/ , который написан полностью на JS, а MODX используется только для проброса и модификации API-запросов. И вот они обратились за доработками, и я решил, что раз функционал растет, то имеет смысл граф ввести, чтобы потом не было мучительно больно. Отмечу, что ввести граф, на самом деле - это совсем не 5 минут (если сайт - не сайт-визитка), во всяком случае у меня. Я руками все пишу. По моим наблюдениям, на среднем проекте только листинг основных запросов составляет строк 500, и это еще при условии использования фрагментов, которые вставлять можно в разные части. На тройке - это 1000 строк. Все это - три десятка АПИ-запросов. http://joxi.ru/bmoY6bGSMdRzpA Так вот, здесь себя граф показывает не только как отличное средство для построения запроса, но и как архитектор АПИ. Вот пара примеров с этой тройкой: Справа - это предоставленная документация. Видно, что вкралась опечатка. А вот еще: А вот пример, почему такое невозможно с графом: А вот наглядный пример, для чего это делается: вот я одним запросом получаю сразу три блока информации http://joxi.ru/bmoY6bGSMdRJpA При чем в своем конечном ответе я получаю именно один конечный многоуровневый JSON. А то, что граф выполнил для сбора этой информации три запроса - так это как раз и демонстрирует то, о чем говорит Артем - возможность работать сразу с несколькими источниками данных. Здесь три запроса выполняется только потому, что на стороне сервера не работает граф и он просто не может вернуть данные одним ответом. А вот на другом моем проекте (и не только на нем), граф крутится и на сервере и в ответе в одном я получаю все нужные мне данные Кстати, в связке с сервером, у меня получилась вообще очень интересная связка: у меня и на сервере, и на клиенте используется единая схема. Это позволяет, во-первых, на сервер в запросе слать не портянку, а просто название операции с параметрами. К примеру, на получение этих данных отправляется вот такой запрос: А во-вторых, я эту же модель, просто с другими обработчиками, использую и на стороне клиента. То есть когда у меня данные подгружены в браузер в хранилища, я могу выполнять структурированные запросы прям в браузере. К примеру, вот так я получаю в браузере данные для карты, со всеми нужными вложенностями, и совершенно без обращения к серверу Короче, про него можно очень много всего рассказывать. И надо отметить, что работа с ним - это не всегда праздник. В том же браузере, из-за того, что он использует промисы, он не рассчитан на множественный вызов (то есть когда во внутренних резолверах выполняешь еще запросы на граф). В случае сотен вызовов в рамках одного запроса, выборка конечная может составить 10 секунд и более :) Но если правильно оптимизировать все, то этот же объем данных будет получен менее чем за секунду.

Да, Артем, сейчас граф - один из моих основных инс

Николай, да тут смысл в том, чтобы одним запросом к серверу получать сразу все данные. Кстати этот момент хорошо работает и в случае с серверным рендерингом. Мы любые данные можем получить одним запросом и не нужно ничего комбинировать или слать несколько. Поскольку серверный рендеринг работает синхронно это огромное преимущество. Во первых мы не перегружаем локальный сокет петлями, во вторых один запрос (который распараллелить внутри GraphQL) выполняется значительно быстрей, что напримую влияет на первую выдачу HTML в браузер

С ошибками Вы точно подметили, один из значимых плюсов!. Стоит тоже в статью добавить )). Примеры отличные !)

Николай, да тут смысл в том, чтобы одним запросом к серверу получать сразу все данные. Кстати этот момент хорошо работает и в случае с серверным рендерингом. Мы любые данные можем получить одним запросом и не нужно ничего комбинировать или слать несколько. Поскольку серверный рендеринг работает синхронно это огромное преимущество. Во первых мы не перегружаем локальный сокет петлями, во вторых один запрос (который распараллелить внутри GraphQL) выполняется значительно быстрей, что напримую влияет на первую выдачу HTML в браузер С ошибками Вы точно подметили, один из значимых плюсов!. Стоит тоже в статью добавить )). Примеры отличные !)

Николай, да тут смысл в том, чтобы одним запросом 

Предлагаю следующий урок посвятить серверному рендерингу :) 

Предлагаю следующий урок посвятить серверному ренд

Комментарий к топику Javascript headless prisma-cms. CMS без внешнего оформления.

Артем, судя по всему ты пытался отправить сообщение с мобильника. К сожалению, в используемом текстовом редакторе draft-js есть старая бага, проявляющаяся на некоторых сочетаниях "андроид+клавиатура+мобильный браузер". В результате кириллица не воспринимается и отправляется пустое сообщение (или неполное). Открыто несколько тикетов, вот собирательный: https://github.com/facebook/draft-js/issues/1895 

Надеюсь скоро поправят и проблема исчезнет. Пока что гарантировано сообщения отправляются только с компа или в латинице.

Артем, судя по всему ты пытался отправить сообщение с мобильника. К сожалению, в используемом текстовом редакторе draft-js есть старая бага, проявляющаяся на некоторых сочетаниях "андроид+клавиатура+мобильный браузер". В результате кириллица не воспринимается и отправляется пустое сообщение (или неполное). Открыто несколько тикетов, вот собирательный: https://github.com/facebook/draft-js/issues/1895 Надеюсь скоро поправят и проблема исчезнет. Пока что гарантировано сообщения отправляются только с компа или в латинице.

Артем, судя по всему ты пытался отправить сообщени

Остается только решить вопрос как обновлять текущего пользователя - не понял, а в чем вопрос тогда? Использовать ли для этого процессоры?

Остается только решить вопрос как обновлять текуще

Николай, это очень интересный проект! Буду внимательно следить за его развитием. 

Николай, это очень интересный проект! Буду внимательно следить за его развитием. Желаю успехов!

Николай, это очень интересный проект! Буду внимате

javascript

modx

node.js

react

react-cms

vis.js

визуализация данных

интерфейсы

портфолио

# Николай Ланец aka Fi1osof
**Lead Fullstack Developer / Ментор / Евангелист современного JS‑стека**

---

## О себе

Я — не просто Senior Developer с 2007 года. Я — тот, кто строит продукты будущего на базе современных технологий и помогает другим подниматься на новую ступень айти-карьеры. Создатель и идейный вдохновитель freecode.academy — платформы, где обучение перестает быть скучной обязаловкой и становится настоящим технологическим приключением.

---

## Мой стек и философия разработки

Основу моего рабочего арсенала составляют:

- [Javascript](/technologies/ck1faudv928l40a89c4u9zxlm), [TypeScript](/technologies/ckcvwwx010kov08009u7y2rav)
- [React](/technologies/ck1fawbdw28v20a891k4wlh27), [Next.js](/technologies/ckg2jd4ffr9260730aog66dri)
- [Node.js](/technologies/ckt55wm59272831wo9gg9r8ynx), [GraphQL](/technologies/ck1fawhqk28vu0a8995lqvlsj), [Apollo Client](/technologies/ck2zdcg0vpvc10a89xjmhj1e0), [Nexus](/technologies/ckl2pbh0fxew60730ifl3zozp), [Prisma](/technologies/ck2zdbmi7pv8r0a89ntc2r0f1)
- DevOps: [Docker](/technologies/ck2y1x9lho9cy0a8953xzfjr8), [docker-compose](/technologies/ck2y1xqino9g80a89tsftxin2), [Caddy](/technologies/ck2zd8ovqpuyl0a8909748sbu), [Ubuntu](/technologies/cktu8giks3593911vmle30ztqxt)
- UI-инструменты: [Styled-Components](/technologies/ckk8myysio7lw0730csszvrdw), [Material-UI](/technologies/ckljv3jwd7bgf0730huxlko9n), [react-hook-form](/technologies/ckmx8cn9fmwrv073032e67722)
- Всё актуальное для разработки, CI/CD и автоматизации 
- Эксперименты с [WebGL](/technologies/ckan9anntc12f08003saqttrq), [A‑Frame](/technologies/ck2tgoiz8j37y0a89c7gxsrxc), [Three.js](/technologies/ck2tgns1nj32z0a89vmw7xw3f), [Unreal Engine 4](/technologies/ck7puswy6g4yb07004cdp6lbr), [Elixir](/technologies/ckn0olavrnnzi0730xs8rctn8), [C++](/technologies/cknin1y8lu2fr07307mskn2fn)

---

## Разработка и менторство

- Более 15 лет **hands-on** разработки и проджект‑менеджмента
- Главный разработчик и преподаватель платформы [freecode.academy](https://freecode.academy)
- **Ведущий менти-пул на платформе** — лично выращиваю новых звезд отрасли

### Мои менти и их результаты

| Менти (ФИО \| username)                               | Уровень | Рейтинг |
|-------------------------------------------------------|---------|---------|
| [Попов Дмитрий \| linklib](/users/cjoe890c706ji0d962oismzoe)           | 3       | 315     |
| [Сэт \| defk1lla](/users/ckzh1ita312978121imr9hpqfc64)                 | 3       | 670     |
| [Ксения Матвеева \| Ксения Матвеева](/users/ckz4awwlh10627771imr4wvpb7cj) | 2       | 0       |
| [Михаил \| Balamut](/users/cl1npq92z10258261vmbq0w6vfh2)               | 2       | 0       |
| [Ольга Ершова \| angel](/users/cjoe87zhk00250d969arluevk)              | 1       | 0       |
| [Егор \| rogedkone](/users/cksrdp47d3308261ijuq7wfrxdl)                | 3       | 0       |
| [Roman \| Roman43](/users/ckur2qtt64721431xoboyjcte52)                 | 2       | 0       |
| [Бут Игорь \| santiment](/users/ckttd9x20893951vmltb8t7sha)            | 1       | 0       |

**Доношу простую мысль: успех — это не магия, это осознанная системная работа и кайф от роста.**
Мои менти выводят решения в продакшн, пробиваются в лидеры рейтингов — кому не хочется быть в такой команде?

---

## Почему я?

- **Прокачаю проект** — от TDD архитектуры до культурного CI/CD
- **Вдохновлю команду** — и научу мыслить по‑новому, где ИИ — напарник, а не угроза
- **Выращу мидлов и сеньоров** — доказано платформой и рейтингами моих учеников

**Сила — в сообществе, а техника — это просто смазка для ваших побед. Присоединяйтесь!**

---

## Контакты

- 📧 [n.lanets@freecode.academy](mailto:n.lanets@freecode.academy)
- Телеграм: [@freecode_academy](https://t.me/freecode_academy)

---

**P.S.**: Мой опыт — ваш драйвер роста. Хотите в команду? Ищете менторство? Пишите. Растём вместе!