Web-технологии

Недавно делал код ревью и заметил, что в pnpm-lock.yaml (альтернатива yarn.lock в pnpm) добавлена 17-я версия реакта, хотя на проекте мы используем 18-ю. Нам не нужно тянуть в проект 2 версии реакта — поэтому идём разбираться.

Дело в том, что в библиотеке react-cheetah-grid, которую мы используем для рендера длинных таблиц, реакт указан в секции dependencies вместо peerDependencies.

dependencies vs peerDependencies

- dependencies: пакеты, которые необходимы для работы вашего приложения и устанавливаются автоматически
- peerDependencies: пакеты, которые должны быть уже установлены в среде, где используется ваш пакет, чтобы избежать конфликтов версий

Чтобы быстро исправить проблему — можно переопределить версию реакта для определённого пакета в pnpm с помощью метода readPackage. Также нужно откатить изменения в pnpm-lock.yaml и запустить pnpm install .


// .pnpmfile.cjs
const package = require('./package.json');

function readPackage(pkg, context) {
if (pkg.name === "react-cheetah-grid") {
pkg.dependencies['react'] = package.dependencies['react'];
pkg.dependencies['react-dom'] = package.dependencies['react-dom'];
}

return pkg;
}

module.exports = {
hooks: {
readPackage,
},
};


Но затем лучше создать ишью в репозитории библиотеки или отправить пул реквест.

https://t.me/cherkashindev/211

Примечание: Мне нравится структура из angular и это не мешает использовать похожий стиль в компонентах. Используйте основную структуру из доков nuxt. Старайтесь не допускать больше трех уровней.

Разработчик сделал 40% проекта и метался от одного UI kit к другому, а я слушал и крутил барабан револьвера. Сделав одну страницу, меня попросили удалиться, попытка разбить вёрстку на компоненты и избавился от ненужных дубликатов html кода смутила разраба фирмы BODUNOV. И тут меня ждала новая не менее амбициозная компания, с 10-ти летним стажем на рынке.

На собеседование в "Стрекозлы в АйТи" я убедился у интервьюера, в отсутствие глуповатого маркетингового приёма, сверстать статический сайт и показать клиенту, сказав: 'Всё готово шеф, дело осталось за малым'. Люди серьёзные, работают с продукцией 1с и считаются в ней экспертами.

Ну хоть хорошо что excell не используется как база данных для бэка. А вместо word не используют markdown. Вот тупые, кто `markdown` придумал.

После ознакомительного диалога ПМ-а по работе со Шмитрикс, я не понял как они ведут разработку. На канбан доске вместо привычных столбцов было несколько столбиков связанных со временем:

// Без срока // Запланированные // Сделаю сегодня // Сделаю на недели //

Хмм... наверное для перевода на тест нужно делегировать тестировщику, а потом...

А нееее... кроме менеджера, разработчиков и дизайнера больше никого нету. То есть нет тестировщиков, контент-менеджеров, seo, devops и т.д.

Менеджер сказал (не дословно, почти): "Всех кого-ты перечислил сомнительные личности и результат их работы не ясен. У нас было много SEO специалистов, целых 3, ой, 2 человека. Ну руководство не поняло их трудов и уволило."

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

Three Days Later...

Прошло 3 дня, а я ничего не сделал. Нет, вина не в моём титуле Капитан Улитка, просто задач нет! Как объяснил менеджер, он болеет, неделя очень тяжелая, задачу выдать не могу. (На самом деле было ещё 2 менеджера которые могли его подменить, но заставлять работать больного сотрудника веселее)

Обычно первым делом в любой компании заставляют читать документацию на 6 часов, ставить vpn, но в документах Шмитрикса было почти пусто, компания не хотела покупать продвинутую подписку, поэтому каждый создавал файлы в облаке, кто в гугл, кто в яндексе. Каждый держал файл у себя, а не в общей папке, поэтому узреть могли только избранные.

Первое задание. Разместить статический сайт выполненный начинающим верстальщиком Рыжий. Видимо только вчера прошел курс ХалалАкадемии и решил проверить новоиспеченный скил. Где-то пагинация была сделана картинкой, где-то отсутствовали блоки, где-то хромал адаптив.

Мне дали доступ по ssh и попросили поставить сайт с сертификатом на nginx. В принципе окей, но в вакансии про эти скилы не слова.

One Day Later...

Разговор с дизом и ПМ. Дизайн находится под слоём черновик, каждый макет не имеет статуса готового к разработке.

Примечание: кнопка фигмы Ready For Dev, некоторые дизайнеры делают свой компонент для статусов макета или используют цветовые зоны, т.к. макет может иметь много статусов (прототип / в процессе доработки / на утверждение / готов)

Даже без матёрого глаза можно приметить множество огрехов в дизайне. Отсутствие модалок, элементы не интерактивные, нет статусов элементов форм. В некоторых местах много воздуха, неравномерные отступы... В общем полный комплект ошибок ждуна. Дизайнер пытается скрыть смущение, намекая на сроки, мол времени на UX и полировку UI не было. Удивительный факт, разработчикам всегда представляют диза так: "А это наш UI/UX дизайнер". Вот только времени на UX исследования у него нет.

И теперь работа? Нет. Доступа к гитлабу нет, задач в шмитриксе нет.

На следущий день получил доступ к гитлабу, сразу начал создавать проект, хотя задачи не было, есть интуиция и особая минтайная связь. ПМ захлебывался соплями и издавал предсмертный хрип, получить инфу по проекту было нельзя.

А инфы по проекту не было / LOL / Редизайн предполагалось делать на основе нового диза и поглядывая на старый сайт. Только новый дизайн сильно отличался. Не было к примеру локализации (был выбор региона) и ПМ сказал твёрдо её НЕ БУДЕТ! Вот тут и была первая подстава.

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

Спойлер: По мнению руководства я должен был делать не по дизайну, а по старому сайту, дизайн лишь красивый фантик для клиента и задача разработчика самому продумать адаптивность и функционал сайта.

Благо старый сайт не имел минификации и обфускации.

Примечание: После компиляции кода, файл со скриптом крайне тяжело прочитать. Начинающие разработчики умеют кидать скрипты в конец документа, чтобы не мешать прорисовке странице, на этом их знания исчерпываются. Раньше мы прописывали чанки в webpack ручками, теперь с vite многие разрабы не знают про это.

Ладно с дизайном всё ясно, ну мне нужно делать динамический сайт похожий по типу на интернет магазин, где взять бэкенд? Старый сайт был выполнен в php шаблонизаторе и имел мобильное приложение (отличается по функционалу от сайта), теперь предстояло сделать его на nuxt, а значит старое api не подходило.

Угадайте кто должен был придумать дизайн API? Бэкенд! Не угадали. Конечно же фронтенд (по факту vue SSR это уже fullstack)

Примечание: Бэкенд разработчики могут разработать API самостоятельно, а значит они могут приступить к работе сразу без верстки. После одобрения прототипа, уже можно предположить какие данные будут выводится. Прототип дазайна уже определяет базовое расположение блоков и медиаконтента

Мне позвонил специалист по отделу кадров, спрашивает как дела и мол я буду звонить тебе каждый месяц (это был последний звонок). А я такой: "not bad, но знаешь, тут ..."

- А покажи что ты сделал.

Я отправляю ему ссылку на сайт.

- Скажи, то что сделал Рыжий, тебе как-то помогло?

- Как я говорил на собесе, всю эту вёрстку все равно нужно переделывать, к тому же там было много косяков, вёрстка была абсолютная не валидна по w3c. Я начал с начала.

- Ну ты же понимаешь я не могу показать это?

На тот момент навигация еще не приходила с бэка, перемещаться по сайту было нельзя, а также были видны некоторые косяки. Я и не хотел демонстрировать сайт.

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

Менеджер посмотрел на меня как на шарлатана. Почему кадровик ведет переговоры по проекту с клиентом? А может он, вовсе и не кадровик?

Два месяца спустя или 44 раб дня

Бэкендер выходит из долгожданного отпуска...

4-5 остальных видимо были очень заняты. Я лично работал с двумя, но официально в штате их должно быть больше. Да и как-то на созвоне созвали толпу, которой объяснили как сделать 1 эндпойнт с получением данных из firebase. Результат: я поднял nuxt и сделал сам. Ну что сказать команда профессионалов, умеют убеждать.

Ах, да... Бэкенд выходит из отпуска и заходит в шмитрикс. Бэкендер плачет ПМ: "Там слишком много! Апи уже почти готово, там всё есть"

Конечно же там много чего не было, апи первой версии сделано не по REST, которому далеко до стандартов JSON:API.

Swagger-а нету, есть postman, апи которое написано ручками (тока шайтаны пишут доки в аннотациях и используют модуль автодокументации)

Примечание: Незнаю как в Yii, но в Symfony генерировать коллекции с готовыми Rest Api эндпоинтами милое дело. По идее мы один раз заморачиваемся пишем ядро, а далее используем от проекта к проекту. Документацию легко можно импортировать в postman. Если у вас будет фронтенд SPA/SSR в виде отдельного приложения, задумайтесь, а нужно ли его писать на php? Бэкенд на nodejs может сэкономить время. Низкой порог вхождения !== выгода. Nodejs может быть serverless, а php это танцы с бубном в плане деплоя. А там типизация от бэка почти готовая

Меня попросили переделать для бэка документ с api запросами и как вы думаете он приступил к правкам сразу? Конечно же нет. Рабочий день начинался в 9 часов, точнее так было у удалёнщиков, офисные планктоны почти всегда приезжали на работу после обеда. Оказывается часть сотрудников работают во вторую смену, а бэкендер на протяжения дня занимается бумажками от шефа, сам шеф со спокойной душой уезжал в командировку. По более сложному проекту с картами, мне приходилось ждать фидбека от шефа компании каждый вечер, а днём по указаниям из аудиосообщения я пилил приложение.

Конечно для написания ТЗ необходимо время, а наболтать по телефону сообщение это дело не сложное. Ну и тупые эти разработчики, носятся со своими ТЗ.

Хороший мальчик Бобби

Не курит, не пьёт. Деньги в копилку кладёт. Большая часть рынка разработки это ждуняшки ожидающие маны небесной. В один прекрасный день армию ждунов без тимлида, мидлов или сеньоров, только ждуны, только харкор. Банда маркетологов оказывается чаще всего во главе малого бизнеса (будем честны в крупных компаниях, тоже не всегда руководители инженеры), это приводит к печальным последствиям для IT рынка. Сначала нанимают партию разработчиков, через год или два, шеф проходит специальные курсы по бизнесу и открывает новые слова: "B2B" и "B2C". Он смотрит в собственное отражение и видит гениального человека, способного открыть свой телеграм канал и продовать свои собственные курсы. Увольняем 90% разрабов, получаем чистый профит с курсов. \ STONKS /

Судная ночь

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

-- Эту кнопку убрать! Батюшки, я ведь всё ни так! Клиент? Какой клиент! Я так вижу! Сделать по моему! Клиент потом посмотрит и скажет. В смысле, конечно макет утвержден! Видишь дизайнер тока что стрелочки в дизайне дорисовал, а у тебя их нет! А ну быстро отсеките голову этому халопу! Стража! Стража!

Титры

Нет повести печальней, чем история о Shaltier и потерянном времени. Почему никто не плачет? Не забываем купить мои курсы "Как открыть IT стартап для ...". Продолжение пишем в комменты.

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

За последние годы, как бы это ни было странно, но моим основным облачным хранилищем стали «Избранные» в Telegram, потому что сервис доступен на всех платформах и сам открыто рассказывает об этой возможности в своих соцсетях. В какой-то момент я столкнулся с проблемой того, что куча файлов в «Избранном» выглядит слишком кучно и разбирать во всем этом неудобно.

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

В этом материале я расскажу, как установить Teledrive на свой облачный сервер и получить свое безлимитное облачное хранилище за 300 рублей в месяц. И это не кликбейт! Процесс установки займет всего 15 минут.

Создаем базу данных

Первое, что я советую сделать это создать базу данных postgresql — она как раз отвечает за хранение информации о структуре файлов и папок в Teledrive. Получается, что вы можете развернуть Teledrive на любом железе и при подключении базы данных у вас всегда будет ваша привычная структура файлов.

Для удобство создание postgresql я использую бесплатный сервис Neon.

После того как вы зарегестрируетесь в нем, на стартовом экране введите любое название проекта и название базы данных. В списке выбора хранилища выберите Франкфурт — так получение информации из базы данных будет максимально быстрым.

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

Далее необходимо арендовать облачный сервер. Nwo

Арендуем сервер

Далее необходимо арендовать облачный сервер, на котором мы будем разворачивать Teledrive. Я использую российский хостинг VDSina (реф), так как у них стабильная скорость интернет-порта 1 Гбит/сек и объём трафика 32 ТБ в месяц. Вы можете использовать любой другой хостинг, которым вы пользуетесь.

Файлы, которые вы будете загружать в Teledrive будут храниться на серверах Telegram в вашем аккаунте! Сервер нужен только для работы приложения, на нем никакие файлы храниться не будут.

Главное, чтобы облачный сервер соответствовал следующим характеристикам:

Процессор: 1 ядро

RAM: 2 Гбайт

Хранилище: 50 Гбайт

Локация: Москва

Стоимость: 13 рублей в день (390 рублей в месяц)

Особенно обратите внимание на объем оперативной памяти, её должно быть не меньше 2 Гбайт. На сервере с 1 Гбайт у меня Teledrive не заработал.

Подготовка к установке

После того как вы создали базу данных и арендовали сервер, откройте данные для подключения к серверу из тикета, запустите терминал и поочередно вводите следующие команды:

1. ssh root@ip-адрес сервера (его можно найти в Поддержка/Тикеты)

2. Согласитесь с подключением — yes

3. После введите пароль сервера (его также можно найти в тикете)

4. apt-get update (обновляем сервер)

5. apt-get install build-essential (устанавливаем пакеты, необходимые для компиляции программы)

6. Нажимаем y

7. git clone https://github.com/vuchaev2015/teledrive (копируем репозиторий Teledrive с исправленным установщиком)

8. wget https://raw.githubusercontent.com/nvm-sh/nvm/master/install.... (устанавливаем NVM (Node Version Manager)

9. bash install.sh

10. source ~/.bashrc

11. nvm install v18.16.0 (устанавливаем Node.JS версии 18.16.0 через NVM)

12. npm i -g yarn (устанавливаем Yarn)

13. sudo apt install postgresql -y (устанавливаем ПО для базы данных)

14. apt-get install tmux (устанавливаем мультиплексор для фоновой работы Teledrive)

15. tmux new -s teldr (создаем сессию мультиплексора для фоновой работы Teledrive)

После этого окно терминала должно обновиться, начнется новая сессия tmux, в которой мы будем держать запущенный Teledrive. Теперь приступаем к установке.

Устанавливаем Teledrive

Осталось несколько финальных шагов.

1. cd teledrive (переходим в папку приложения)

2. chmod +x ./install.manual.sh

3. ./install.manual.sh(запускаем установщик)

После у вас появится окно с вводом данных для подключения приложения. Переходим на сайт my.telegram.org и входим под тем аккаунтом.

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

• TG_API_ID: ID приложения

• TG_API_HASH: хэш-номер

• ADMIN_USERNAME: имя пользователя Telegram, у которого будут права администратора

• DATABASE_URL: адрес базы данных из сервиса Neon, который вы должны были сохранить в начале

• PORT: номер порта

• REACT_APP_API_URL: адрес, через который вы будете заходить на Teledrive (вводите в формате: http://IP-адрес сервера:номер порта, например, http://123.4.56.7.8:1234)

После ждем 10 минут, пока Teledrive устанавливается. Когда процесс будет завершен появится сообщение «running at (адрес порта)».

После этого можете закрыть терминал и начинать пользоваться Teledrive. Вход в оболочку осуществляется также, как вход в приложение Telegram. Загружать файлы в хранилище можете через браузер с любого устройства.

Объём хранилища не ограничен. Единственное, что максимальный размер одного файла составляет 4 Гбайт для Premium-пользователей и 2 Гбайт для тех, кто не имеет подписки.

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

Учитывая что общая ёмкость не ограничена, за 300 с небольшим рублей в месяц получается приятная альтернатива стандартным облачным хранилищам.

Пользуйтесь! Если есть вопросы — пишите в комментарии.

Взял из своего блога на IXBT LIVE.