Тебе интересен 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
Статья про правила eslint, которые позволяют запретить импорты в проекте на основе определенных условий. Планирую попробовать у себя в проекте, есть подобные кейсы:
https://habr.com/ru/companies/psb/articles/905398/
#note@usyninis_dev
https://habr.com/ru/companies/psb/articles/905398/
#note@usyninis_dev
Хабр
Как ESLint помогает управлять архитектурой проекта
Привет, Хабр! Я Борис Ермаченко, фронтенд-разработчик сервисов для физических лиц ПСБ. В этой статье рассмотрим, как с помощью ESLint построить архитектуру в проекте, и поговорим про несколько...
👍2🔥2
Выступил с докладом для студентов в Колледже информационных и креативных технологий IThub.
Тема выступления: Задачи frontend-разработчика на реальных проектах.
Постарался студентам максимально рассказать о том, какими задачами занимается frontend-разработчик на различных проектах, чтобы это помогло им выбрать будущую ветку обучения🎓
Тема выступления: Задачи frontend-разработчика на реальных проектах.
Постарался студентам максимально рассказать о том, какими задачами занимается frontend-разработчик на различных проектах, чтобы это помогло им выбрать будущую ветку обучения
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥11👍4👏1
Я помогаю развитию бизнеса в России
Когда я выбирал работу в 2019 году, одной из приоритетных сфер я выбирал для себя финтех. Работа в банке казалась для меня максимально ответственной и полезной с точки зрения проектов и пользователей.
Тогда я выбрал альфа-банк и с тех пор мне удалось принять прямое участие в запуске мелких и крупных проектов для юридических лиц (ООО, ИП и т.д).
👨💻 Сейчас я работаю в ИТ Департаменте Малого и Микробизнеса и на одном из ИТ мероприятий топ менеджер раскрыл мысль, которая двигала мной при устройстве тогда, и позволяет с большим энтузиазмом браться за новые и сложные задачи сейчас: мы помогаем развитию бизнеса в России.
Будь ты разработчик, тестировщик или менеджер - ты важная деталь в большом механизме, где каждый специалист делает вклад, который в совокупности рождает продукт способный приносить пользу бизнесу.
Помощь бизнесу — это помощь стране 🇷🇺 и осознание этого наполняет работу особым смыслом и вдохновением.
Когда я выбирал работу в 2019 году, одной из приоритетных сфер я выбирал для себя финтех. Работа в банке казалась для меня максимально ответственной и полезной с точки зрения проектов и пользователей.
Тогда я выбрал альфа-банк и с тех пор мне удалось принять прямое участие в запуске мелких и крупных проектов для юридических лиц (ООО, ИП и т.д).
Будь ты разработчик, тестировщик или менеджер - ты важная деталь в большом механизме, где каждый специалист делает вклад, который в совокупности рождает продукт способный приносить пользу бизнесу.
Помощь бизнесу — это помощь стране 🇷🇺 и осознание этого наполняет работу особым смыслом и вдохновением.
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥5👍1
Рабочее место на сегодня 🌳👨🏻💻
🔥5👍1
This media is not supported in your browser
VIEW IN TELEGRAM
Внешне выглядит простым и лаконичным, но под собой скрывает интеграцию с системой распознавания, работу с распознанными полями документа, получение результатов распознования в процентах.
Компонент независим от контекста использования, т.е его можно встроить в любую форму, где может потребоваться работа с паспортом и его данными. Для пользователя это значит, что не надо вручную вводить данные, достаточно «скормить» документ форме - и она заполнится автоматически.
p.s: на записи все данные вымышлены :)
#workflow@usyninis_dev #js #javanoscript #frontend
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥4