✅ решение (macos):
определяем PID по порту:
lsof -i tcp:<PORT> убиваем процесс:
kill -9 <PID>#workflow@usyninis_dev
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
https://excalidraw.com/
Сервис для рисования в браузере с возможностью совместного редактирования и стилизацией под карандаш
Удобно, если требуется нарисовать какую-нибудь схемку/структуру 👍
#tools@usyninis_dev
Сервис для рисования в браузере с возможностью совместного редактирования и стилизацией под карандаш
Удобно, если требуется нарисовать какую-нибудь схемку/структуру 👍
#tools@usyninis_dev
Excalidraw
Excalidraw — Collaborative whiteboarding made easy
Excalidraw is a virtual collaborative whiteboard tool that lets you easily sketch diagrams that have a hand-drawn feel to them.
🔥1
Привет! Пишу, в том числе, в социальной сеть для нетворкинга от hh.ru, где можно строит профессиональные связи, обмениваться экспертизой и развиваться в комьюнити.
Мой профиль в сетке: https://set.ki/2tsKkoy
Мой профиль в сетке: https://set.ki/2tsKkoy
Зачем frontend-разработчику изучать TypeScript? 🤔
В мире frontend-разработки решения принимаются быстро, и ошибки могут стоить дорого. Именно поэтому изучение TypeScript становится важным шагом для любого разработчика, желающего повысить качество и надежность своего кода. TypeScript вводит строгую типизацию в ваш проект. Это снижает риск возникновения ошибок и исключает неожиданности во время выполнения кода, делая его более предсказуемым.
⭐️Одним из основных преимуществ использования TypeScript является улучшенная поддержка инструментов разработки, таких как автозаполнение и рефакторинг. С TypeScript становится проще работать в команде, ведь каждый разработчик получает четкое представление, какие типы данных использовать.
Ещё одним бонусом является масштабируемость проектов. Чем больше ваш проект, тем сложнее управлять его архитектурой без ошибок. TypeScript помогает справляться с этой задачей, обеспечивая стабильность и возможность легкого контроля над кодовой базой.
На наших проектах мы полностью пишем код на typenoscript, будь-то бизнесовый код или общие библиотеки 🛠
В мире frontend-разработки решения принимаются быстро, и ошибки могут стоить дорого. Именно поэтому изучение TypeScript становится важным шагом для любого разработчика, желающего повысить качество и надежность своего кода. TypeScript вводит строгую типизацию в ваш проект. Это снижает риск возникновения ошибок и исключает неожиданности во время выполнения кода, делая его более предсказуемым.
⭐️Одним из основных преимуществ использования TypeScript является улучшенная поддержка инструментов разработки, таких как автозаполнение и рефакторинг. С TypeScript становится проще работать в команде, ведь каждый разработчик получает четкое представление, какие типы данных использовать.
Ещё одним бонусом является масштабируемость проектов. Чем больше ваш проект, тем сложнее управлять его архитектурой без ошибок. TypeScript помогает справляться с этой задачей, обеспечивая стабильность и возможность легкого контроля над кодовой базой.
На наших проектах мы полностью пишем код на typenoscript, будь-то бизнесовый код или общие библиотеки 🛠
❤1
вывести количество рендеров в react-компоненте
✅ решение:
import { useRef } from 'react';
export function useRendersCount(): number {
return ++useRef(0).current;
}в компоненте:
const Demo = () => {
const [item, itemChange] = useState(0);
const rendersCount = useRendersCount();
return (
<div>
<span>Renders count: {rendersCount}</span>
<br />
<button onClick={() => itemChange(item + 10)}>re-render</button>
</div>
);
};еще куча полезных хуков: https://github.com/streamich/react-use
#workflow@usyninis_dev
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
What is Turborepo?
Turborepo: https://turbo.build/ - Очень удобная и высокопроизводительная система сборки JS и TS. Используем на своем проекте для монорепозитория платформенных библиотек.
Гибкая система кэширования и реализация через таски позволяет реализовывать сложные сценарии сборки/тестирования/публикации пакетов в монорепе
#tools@usyninis_dev
Turborepo: https://turbo.build/ - Очень удобная и высокопроизводительная система сборки JS и TS. Используем на своем проекте для монорепозитория платформенных библиотек.
Гибкая система кэширования и реализация через таски позволяет реализовывать сложные сценарии сборки/тестирования/публикации пакетов в монорепе
#tools@usyninis_dev
Turborepo
Turborepo is a build system optimized for JavaScript and TypeScript, written in Rust.
Что такое kafka?
Даже если ты frontend-разработчик, важно понимать как устроен бэкенд/devops и в целом технологический стек проекта.
Для крупных проектов обязательным инструментом является брокер сообщений, на нашем проекте это Apache Kafka.
Следующий видос очень помог мне понять основу и назначение Kafka: https://rutube.ru/video/32b7ce6c5bb9b974dd448435241feb90/
Даже если ты frontend-разработчик, важно понимать как устроен бэкенд/devops и в целом технологический стек проекта.
Для крупных проектов обязательным инструментом является брокер сообщений, на нашем проекте это Apache Kafka.
Следующий видос очень помог мне понять основу и назначение Kafka: https://rutube.ru/video/32b7ce6c5bb9b974dd448435241feb90/
RUTUBE
Лучший Гайд по Kafka для Начинающих За 1 Час
Бесплатные материалы и шпаргалка по Kafka: https://www.faang.school/java-junior-library?utm_source=rutube_video&utm_medium=organic&utm_campaign=library-java-junior&utm_content=video-60
Работа с Kafka - ключевое умение для любого современного разработчика!…
Работа с Kafka - ключевое умение для любого современного разработчика!…
Тебе интересен frontend, разработка цифровых продуктов или хочешь понаблюдать за буднями frontend-разработчика? Тогда тебе точно стоит остаться на канале 🙂
Ты найдешь для себя:
- решение рабочих задач #workflow@usyninis_dev
- инструменты и сервисы для работы #tools@usyninis_dev
- ссылки и заметки на полезные материалы #note@usyninis_dev
Меня зовут Усынин Иван. Более 12 лет занимаюсь frontend-разработкой. Реализовывал проекты для Яндекса, Кинопоиска, Мегафона. Сейчас TechLead Frontend в Альфа-Банк.
Всегда рад видеть тебя у себя в личке - @usyninis
Подписывайся на канал, давай погружаться в разработку вместе!
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
❤1👍1
Логирование на проекте: почему это важно для production
🟣 Отладка и решение проблем: С помощью логов можно отслеживать ошибки, исключения и другие события, которые могут помочь в диагностике и решении проблем.
🔴 Мониторинг производительности: Логирование позволяет мониторить производительность приложения, включая время ответа, использование памяти и другие метрики. Это помогает выявить области, где приложение можно оптимизировать.
🟢 Улучшение пользовательского опыта: Логирование может помочь отследить ошибки и проблемы, которые могут возникнуть у пользователей. Это позволяет разработчикам быстро реагировать на проблемы и улучшать качество приложения.
В нашем проекте мы используем библиотеку Pino на стороне nodejs приложений, она достаточно гибкая для кастомизации под требования проекта, а так же имеет высокую скорость работы. Сами логи пишутся в elastic и администрируются в kibana 👨💼
#js #javanoscript #frontend #nodejs
🟣 Отладка и решение проблем: С помощью логов можно отслеживать ошибки, исключения и другие события, которые могут помочь в диагностике и решении проблем.
🔴 Мониторинг производительности: Логирование позволяет мониторить производительность приложения, включая время ответа, использование памяти и другие метрики. Это помогает выявить области, где приложение можно оптимизировать.
🟢 Улучшение пользовательского опыта: Логирование может помочь отследить ошибки и проблемы, которые могут возникнуть у пользователей. Это позволяет разработчикам быстро реагировать на проблемы и улучшать качество приложения.
В нашем проекте мы используем библиотеку Pino на стороне nodejs приложений, она достаточно гибкая для кастомизации под требования проекта, а так же имеет высокую скорость работы. Сами логи пишутся в elastic и администрируются в kibana 👨💼
#js #javanoscript #frontend #nodejs
👍1🔥1👏1
Достаточно популярный функционал, но в процессе рализации может возникнуть множество специфичных кейсов:
▫️ работа с элементом input type=«file»
▫️валидация размера/разширения файла на стороне браузера
▫️методы и ограничения загрузки документа на сервер
▫️реализация прогресс-бара при загрузке на сервер и ограничения сервера
▫️корректные http-заголовки для скачивания на клиенте
Ранее уже приходилось все это реализовывать, поэтому надеемся управиться быстро 🙂
#workflow@usyninis_dev
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5👏3❤1
Как прокачать софт-скиллы интроверту, чтобы продвигаться в IT?
Ты крутой специалист, но…
— Тебя не замечают на работе, а интересные проекты достаются другим?
— Ты знаешь, как улучшить процесс, но боишься сказать?
— Хочешь повышения, но не умеешь продавать свои успехи?
В IT часто считают, что навыки говорят сами за себя. Но мир не работает так. Чтобы тебя заметили, повысили и ценили, нужно уметь общаться и проявляться.
🌟 3 шага, чтобы переступить через себя и заявить о себе:
🟢 1. Выходи в зону видимости постепенно
Ты не должен сразу выступать на митингах или ходить на конференции. Начни с малого:
— Говори на митингах не только «сделал - делаю - буду делать», а хотя бы 1 мысль о том, что можно улучшить.
— Пиши короткие сообщения в рабочие чаты, если есть идеи, но страшно говорить вслух.
— Участвуй в код-ревью и задавай вопросы, чтобы быть замеченным.
🟢 2. «Продавай» свою работу
Если ты не говоришь, что сделал классную вещь — никто этого не узнает.
— Вместо «я исправил баг» — «я решил проблему, из-за которой пользователи теряли X% данных».
— Вместо «я просто написал код» — «я оптимизировал алгоритм, теперь он работает быстрее на X%».
🟢 3. Публичность без боли
Встречи и презентации — ад для интроверта, но можно подготовиться:
— Перед митингом запиши себе 3 мысли, которые хочешь сказать. Это снизит стресс.
— Представь, что ты просто объясняешь другу — так проще.
— Попробуй говорить последним. Пока другие говорят, ты адаптируешь свою мысль.
💬 Вывод:
В IT важны не только хард-скиллы, но и умение показать свою ценность. Начни с малых шагов, и со временем тебя заметят, продвинут и дадут крутые проекты.
Если интересно, как преодолеть подобные страхи и проработать мышление — Женя подробно рассказывает на своем канале.
Ты крутой специалист, но…
— Тебя не замечают на работе, а интересные проекты достаются другим?
— Ты знаешь, как улучшить процесс, но боишься сказать?
— Хочешь повышения, но не умеешь продавать свои успехи?
В IT часто считают, что навыки говорят сами за себя. Но мир не работает так. Чтобы тебя заметили, повысили и ценили, нужно уметь общаться и проявляться.
Ты не должен сразу выступать на митингах или ходить на конференции. Начни с малого:
— Говори на митингах не только «сделал - делаю - буду делать», а хотя бы 1 мысль о том, что можно улучшить.
— Пиши короткие сообщения в рабочие чаты, если есть идеи, но страшно говорить вслух.
— Участвуй в код-ревью и задавай вопросы, чтобы быть замеченным.
Если ты не говоришь, что сделал классную вещь — никто этого не узнает.
— Вместо «я исправил баг» — «я решил проблему, из-за которой пользователи теряли X% данных».
— Вместо «я просто написал код» — «я оптимизировал алгоритм, теперь он работает быстрее на X%».
Встречи и презентации — ад для интроверта, но можно подготовиться:
— Перед митингом запиши себе 3 мысли, которые хочешь сказать. Это снизит стресс.
— Представь, что ты просто объясняешь другу — так проще.
— Попробуй говорить последним. Пока другие говорят, ты адаптируешь свою мысль.
💬 Вывод:
В IT важны не только хард-скиллы, но и умение показать свою ценность. Начни с малых шагов, и со временем тебя заметят, продвинут и дадут крутые проекты.
Если интересно, как преодолеть подобные страхи и проработать мышление — Женя подробно рассказывает на своем канале.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍8❤2🔥2
Завершили переезд react router 7 🔥
На прошлой неделе во всех наших проектах обновили react-router до 7 версии . Самое полезное что теперь можно использовать:
🔜 loader + Await для подготовки данных в маршрутах. Поможет для отдельных маршрутов получать данные из api или, например, проверять поддержку какого-либо браузерного api.
🔜 useBlocker для реализации блокировки ухода со страницы. Например, при заполнении формы до ее сохранения через данный хук можно реализовать подтверждение "Вы действительно хотите покинуть страницу?"
🔜 bonus: react-router-dom теперь не нужен! Весь необходимый функционал лежит в пакете react-router. Минус одна зависимость 🙂
Больше фишек в официальной доке: https://reactrouter.com/home
#workflow@usyninis_dev
На прошлой неделе во всех наших проектах обновили react-router до 7 версии . Самое полезное что теперь можно использовать:
createBrowserRouter([
{
path: "/teams/:teamId",
loader: async ({ params }) => {
let team = await fetchTeam(params.teamId);
return { name: team.name };
},
Component: Team,
},
]);
function Team() {
let data = useLoaderData();
return <h1>{data.name}</h1>;
}
const Component = () => {
const [isBlocked, setIsBlocked] = useState(false);
useBlocker(() => isBlocked ? !confirm('Leave page?') : false);
return (
<React.Fragment>
<button onClick={() => setIsBlocked(true)}>block page</button>
<button onClick={() => setIsBlocked(false)}>unblock page</button>
</React.Fragment>
);
};Больше фишек в официальной доке: https://reactrouter.com/home
#workflow@usyninis_dev
Please open Telegram to view this post
VIEW IN TELEGRAM
👍2🔥2
Полезная статья про playwright и скриншотное тестирование:
https://habr.com/ru/companies/okko/articles/890438/
#note@usyninis_dev
https://habr.com/ru/companies/okko/articles/890438/
#note@usyninis_dev
Хабр
Playwright: игра в скриншотные тесты
Работа с Playwright всегда доставляет мне удовольствие. « Наиграв » уже десятки, если не сотни часов в библиотеке, решая проблемы, копаясь в исходниках или на просторах сети, я практически всегда...
👍1
Работающий туннель с https для локального сервера
Туннель - позволяет связать локальный хост с публичным URL, который будет доступен через интернет.
Пробовал разные решения, какие-то удалось запустить, но с лагами, в итоге остановился на VK Tunnel (импортозамещение в деле!). Пока все усраивает)
Инструкция по настройке:
1. ставим vk-tunnel
2. запускаем ваше приложение на локальном сервере (например на http://localhost:3000)
3. запускаем туннель:
4. при первом запуске VK Tunnel покажет URL вида `https://oauth.vk.com/code_auth?stage=check&code=..` , надо будет пройти авторизацию через VK. В последующем - сразу будет стартовать туннель и покажет публичный URL вашего приложения 👍.
Полный гайд:
https://dev.vk.com/ru/libraries/tunnel
Статья-обзор про туннели:
https://habr.com/ru/articles/868970/
#tools@usyninis_dev
Туннель - позволяет связать локальный хост с публичным URL, который будет доступен через интернет.
Пробовал разные решения, какие-то удалось запустить, но с лагами, в итоге остановился на VK Tunnel (импортозамещение в деле!). Пока все усраивает)
Инструкция по настройке:
1. ставим vk-tunnel
npm install @vkontakte/vk-tunnel -g
2. запускаем ваше приложение на локальном сервере (например на http://localhost:3000)
3. запускаем туннель:
vk-tunnel --insecure=1 --http-protocol=http --ws-protocol=ws --host=localhost --port=3000 --timeout=5000
4. при первом запуске VK Tunnel покажет URL вида `https://oauth.vk.com/code_auth?stage=check&code=..` , надо будет пройти авторизацию через VK. В последующем - сразу будет стартовать туннель и покажет публичный URL вашего приложения 👍.
Полный гайд:
https://dev.vk.com/ru/libraries/tunnel
Статья-обзор про туннели:
https://habr.com/ru/articles/868970/
#tools@usyninis_dev
👍7🙏4
Что такое Telegram Mini Apps?
Некоторое время назад я заинтересовался тем, как устроены Telegram Mini Apps (TMA). Мне кажется у них достаточно большой потенциал и при помощи TMA можно реализовать достаточно интересные пользовательские кейсы и бизнес задачи.
Если еще не знакомы с этой технологией, то TMA - это небольшие веб-приложения, созданные специально для интеграции с Telegram. Они работают быстро и плавно благодаря встроенным инструментам платформы. Эти мини-приложения позволяют пользователям совершать покупки, играть в игры, оплачивать услуги и многое другое непосредственно в чате или канале.
Преимущества Telegram Mini Apps:
- 📱 Удобство пользователя: юзеры остаются в одном приложении, не переключаясь между разными сервисами.
- ⚡️ Скорость работы: Приложения загружаются мгновенно, не требуют установки и занимают минимум места.
- ✅ Безопасность: Все транзакции защищены системой безопасности Telegram.
- 🌐 Интеграция с ботом: Это позволяет отправлять различные нотификации/сообщения, тем самым улучшая пользовательский опыт
Как создать Telegram Mini App?
Мне, как frontend-разработчику стало интересно погрузиться в создание TMA, это оказалось не очень сложно - гайдов по этой теме достаточно много, а официальная документация достаточно хорошо описана.
Из интересных dev-плюшек: встроенная авторизация, css-переменные для верстки/стилей, интеграция через SDK с нативными элементами, поддержка темизации. Таким образом на стороне разработчика - в основном реализация бизнес функционала, главное найти сервак/хостинг и развернуть там приложение с базой данных и настроить CI (в этом плане тут полная свобода).
Уже набросал свое тестовое Mini App, если руки дойдут - обязательно поделюсь👨💻
p.s: множество готовых TMA можно посмотреть/попробовать в Telegram Apps Center @tapps_bot
Некоторое время назад я заинтересовался тем, как устроены Telegram Mini Apps (TMA). Мне кажется у них достаточно большой потенциал и при помощи TMA можно реализовать достаточно интересные пользовательские кейсы и бизнес задачи.
Если еще не знакомы с этой технологией, то TMA - это небольшие веб-приложения, созданные специально для интеграции с Telegram. Они работают быстро и плавно благодаря встроенным инструментам платформы. Эти мини-приложения позволяют пользователям совершать покупки, играть в игры, оплачивать услуги и многое другое непосредственно в чате или канале.
Преимущества Telegram Mini Apps:
- 📱 Удобство пользователя: юзеры остаются в одном приложении, не переключаясь между разными сервисами.
- ⚡️ Скорость работы: Приложения загружаются мгновенно, не требуют установки и занимают минимум места.
- ✅ Безопасность: Все транзакции защищены системой безопасности Telegram.
- 🌐 Интеграция с ботом: Это позволяет отправлять различные нотификации/сообщения, тем самым улучшая пользовательский опыт
Как создать Telegram Mini App?
Мне, как frontend-разработчику стало интересно погрузиться в создание TMA, это оказалось не очень сложно - гайдов по этой теме достаточно много, а официальная документация достаточно хорошо описана.
Из интересных dev-плюшек: встроенная авторизация, css-переменные для верстки/стилей, интеграция через SDK с нативными элементами, поддержка темизации. Таким образом на стороне разработчика - в основном реализация бизнес функционала, главное найти сервак/хостинг и развернуть там приложение с базой данных и настроить CI (в этом плане тут полная свобода).
Уже набросал свое тестовое Mini App, если руки дойдут - обязательно поделюсь
p.s: множество готовых TMA можно посмотреть/попробовать в Telegram Apps Center @tapps_bot
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥17👍9❤2
Frontend-разработчик (фронтенд-разработчик) — это специалист, который создает интерфейсы веб-сайтов и приложений. Другими словами: разрабатывает внешний облик тех элементов, которые мы видим на сайтах и веб-сервисах: страницы, выпадающие списки, анимация, картинки, карточки товаров и все, с чем может взаимодействовать пользователь.
Если кликнуть правой кнопкой мыши на любой веб-странице и выбрать команду «Просмотр кода элемента», перед вами откроется HTML/CSS-код, созданный именно frontend-разработчиком
Frontend-разработчик создает страницу сайта по макету дизайнера. Он располагает блоки с информацией, добавляет контент, встраивает анимацию и интерактивные кнопки, на которые пользователь может нажимать, чтобы перемещаться по страницам или совершать действия.
Направления деятельности frontend-разработчика:
---
Таким образом, frontend-разработчики выполняют важные задачи, влияющие не только на эстетику и удобство пользования продуктом, но также на производительность, безопасность и надежность веб-приложений.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍11