Полезная статья про 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
Хочу порекомендовать сервис, которым регулярно пользуюсь: ндфлка.ру
Сервис помогает получить налоговый вычет по всем возможным расходам: покупка жилья, инвестиции, здоровье и т.д.
Консультанты сервиса всегда помогут со сбором необходимых документов, с учетом меняющихся требований он налоговой, сформируют и отправят декларацию за вас.
Получай вычет без головной боли) а еще, небольшой бонус при регистрации по ссылке: https://ndflka.ru/ref/b2e2d 🙂
Сервис помогает получить налоговый вычет по всем возможным расходам: покупка жилья, инвестиции, здоровье и т.д.
Консультанты сервиса всегда помогут со сбором необходимых документов, с учетом меняющихся требований он налоговой, сформируют и отправят декларацию за вас.
Получай вычет без головной боли) а еще, небольшой бонус при регистрации по ссылке: https://ndflka.ru/ref/b2e2d 🙂
❤3
🔥 На прошлой неделе в нашем департаменте прошел AI Хакатон по промт-инженерии. 415 инженеров соревновались в написании промтов и создании работающего web-приложения с помощью искусственного интеллекта 🤖
⭐️ Я участвовал в качестве эксперта жюри по компетенции JS, оценивая промты участников по множеству критериев. Было очень даже не просто, узнал множество нюансов по взаимодействию с AI и написанию промтов.
По итогам хакатона еще раз убедился в том, что важно не только наличие инструмента, но и то, как ты им пользуешься 🙂
Что касается меня: использую AI уже давненько, но в основном взаимодействую с чатами. До этапа когда за меня AI пишет код или делает задачи пока не дошел 😅
#ии #AI #хакатон #tech #chatgpt #frontend #js #react #typenoscript #prompts #workflow@usyninis_dev
⭐️ Я участвовал в качестве эксперта жюри по компетенции JS, оценивая промты участников по множеству критериев. Было очень даже не просто, узнал множество нюансов по взаимодействию с AI и написанию промтов.
По итогам хакатона еще раз убедился в том, что важно не только наличие инструмента, но и то, как ты им пользуешься 🙂
Что касается меня: использую AI уже давненько, но в основном взаимодействую с чатами. До этапа когда за меня AI пишет код или делает задачи пока не дошел 😅
#ии #AI #хакатон #tech #chatgpt #frontend #js #react #typenoscript #prompts #workflow@usyninis_dev
👍3🔥3❤1
Forwarded from Zar Zakharov | Lead Developer
🚨 Новость, о которой говорят.
Случилась самая масштабная атака на экосистему JavaScript: хакеры через фишинг увели npm-аккаунт популярного мейнтейнера Qix и запушили обновления в 18 ключевых пакетов (`chalk`,
Уверен, у вас это уже обсуждают в рабочих чатах. Но что можно сделать прямо сейчас, чтобы обезопасить себя?
Пошаговая инструкция
1. Проверить, используются ли в проекте эти либы:
Более точная проверка (по конкретным заражённым версиям):
2. Проверить lock-файлы (важно даже если в
– Проверить наличие пакетов:
– Проверить заражённые версии:
3. Если нашли — удалить заражённые версии:
4. Залочить безопасные релизы:
– В
Это запретит ставить заражённые версии, но позволит брать старые или новые безопасные.
– В
⚡️ Советую не откладывать в долгий ящик проверку своих продуктов. Если что-то нашли — заводите задачу, подключайте всех ответственных.
Ну и пересылайте инструкцию своим коллегам.
Ну что, нашли зараженный пакет у себя в проекте?
Let’s keep in touch | 🚀 Дать Boost
Случилась самая масштабная атака на экосистему JavaScript: хакеры через фишинг увели npm-аккаунт популярного мейнтейнера Qix и запушили обновления в 18 ключевых пакетов (`chalk`,
debug, strip-ansi, color-convert и др.) — суммарно это 2,6 млрд загрузок в неделю.Уверен, у вас это уже обсуждают в рабочих чатах. Но что можно сделать прямо сейчас, чтобы обезопасить себя?
Пошаговая инструкция
1. Проверить, используются ли в проекте эти либы:
npm ls ansi-styles debug chalk supports-color strip-ansi ansi-regex wrap-ansi color-convert color-name is-arrayish slice-ansi color color-string simple-swizzle supports-hyperlinks has-ansi chalk-template backslash error-ex
Более точная проверка (по конкретным заражённым версиям):
npm ls ansi-styles@6.2.2 debug@4.4.2 chalk@5.6.1 supports-color@10.2.1 strip-ansi@7.1.1 ansi-regex@6.2.1 wrap-ansi@9.0.1 color-convert@3.1.1 color-name@2.0.1 is-arrayish@0.3.3 slice-ansi@7.1.1 color@5.0.1 color-string@2.1.1 simple-swizzle@0.2.3 supports-hyperlinks@4.1.1 has-ansi@6.0.1 chalk-template@1.1.1 backslash@0.2.1 error-ex@1.3.3
2. Проверить lock-файлы (важно даже если в
package.json всё ок):– Проверить наличие пакетов:
grep -E 'ansi-styles|debug|chalk|supports-color|strip-ansi|ansi-regex|wrap-ansi|color-convert|color-name|is-arrayish|slice-ansi|color|color-string|simple-swizzle|supports-hyperlinks|has-ansi|chalk-template|backslash|error-ex' \
package-lock.json yarn.lock pnpm-lock.yaml 2>/dev/null
– Проверить заражённые версии:
grep -E 'ansi-styles@6.2.2|debug@4.4.2|chalk@5.6.1|supports-color@10.2.1|strip-ansi@7.1.1|ansi-regex@6.2.1|wrap-ansi@9.0.1|color-convert@3.1.1|color-name@2.0.1|is-arrayish@0.3.3|slice-ansi@7.1.1|color@5.0.1|color-string@2.1.1|simple-swizzle@0.2.3|supports-hyperlinks@4.1.1|has-ansi@6.0.1|chalk-template@1.1.1|backslash@0.2.1|error-ex@1.3.3' \
package-lock.json yarn.lock pnpm-lock.yaml 2>/dev/null
3. Если нашли — удалить заражённые версии:
npm cache clean --force
rm -rf node_modules
rm -f package-lock.json yarn.lock pnpm-lock.yaml
npm install # или yarn / pnpm
4. Залочить безопасные релизы:
– В
npm можно добавить блок "overrides" в package.json:
{
"overrides": {
"chalk": "<5.6.1 || >5.6.1",
"debug": "<4.4.2 || >4.4.2"
// и так далее по списку
}
}
Это запретит ставить заражённые версии, но позволит брать старые или новые безопасные.
– В
yarn/pnpm проще закрепить конкретную безопасную версию, например:
{
"resolutions": {
"chalk": "5.6.0"
}
}
⚡️ Советую не откладывать в долгий ящик проверку своих продуктов. Если что-то нашли — заводите задачу, подключайте всех ответственных.
Ну и пересылайте инструкцию своим коллегам.
Ну что, нашли зараженный пакет у себя в проекте?
Let’s keep in touch | 🚀 Дать Boost
👍1🔥1
Forwarded from Уставший техдир
Media is too big
VIEW IN TELEGRAM
Слив! Архив 468 докладов FrontendConf =)
Ребята, я вам принес огроменный архив, в котором вы найдете все доклады за 10 лет нашей конференции! Делитесь со своими фронтендерами, забирайте, смотрите, изучайте, эксперементируйте)
- FrontendConf 2024, 56 докладов
- FrontendConf 2023, 50 докладов
- FrontendConf 2022, 42 доклада
- FrontendConf 2021, 40 докладов
- FrontendConf Live 2020, 62 доклада
- FrontendConf 2019, 32 доклада
- FrontendConf 2019 (РИТ++), 34 доклада
- FrontendConf 2018, 36 докладов
- FrontendConf 2018 (РИТ++), 37 докладов
- FrontendConf 2017 (РИТ++), 30 докладов
- FrontendConf 2016 (РИТ++), 18 докладов
- FrontendConf 2015 (РИТ++), 31 доклад
До конференции остался ровно месяц! 20-21 октября пройдет FrontendConf 2025. Промокод со скидкой:
https://frontendconf.ru/moscow/2025
Ребята, я вам принес огроменный архив, в котором вы найдете все доклады за 10 лет нашей конференции! Делитесь со своими фронтендерами, забирайте, смотрите, изучайте, эксперементируйте)
- FrontendConf 2024, 56 докладов
- FrontendConf 2023, 50 докладов
- FrontendConf 2022, 42 доклада
- FrontendConf 2021, 40 докладов
- FrontendConf Live 2020, 62 доклада
- FrontendConf 2019, 32 доклада
- FrontendConf 2019 (РИТ++), 34 доклада
- FrontendConf 2018, 36 докладов
- FrontendConf 2018 (РИТ++), 37 докладов
- FrontendConf 2017 (РИТ++), 30 докладов
- FrontendConf 2016 (РИТ++), 18 докладов
- FrontendConf 2015 (РИТ++), 31 доклад
До конференции остался ровно месяц! 20-21 октября пройдет FrontendConf 2025. Промокод со скидкой:
fc25_TiredGlebMikheevhttps://frontendconf.ru/moscow/2025
❤🔥2❤1
Я на FrontendConf 2025
Уже совсем скоро: 21 октября выступаю на одной из крупнейших конференций для фронтенд-разработчиков в России.
✔️ Тема доклада: Микрофронтенды: упрощаем разработку через dev-окружение
Это мой первый опыт выступления на подобном мероприятии. Настрой отличный, постараюсь дать максимум пользы💬
Подробнее о докладе и самой конференции: https://frontendconf.ru/moscow/2025/abstracts/16074
#js #javanoscript #front #frontend #web #developer #frontendconf2025
Уже совсем скоро: 21 октября выступаю на одной из крупнейших конференций для фронтенд-разработчиков в России.
Это мой первый опыт выступления на подобном мероприятии. Настрой отличный, постараюсь дать максимум пользы
Подробнее о докладе и самой конференции: https://frontendconf.ru/moscow/2025/abstracts/16074
#js #javanoscript #front #frontend #web #developer #frontendconf2025
Please open Telegram to view this post
VIEW IN TELEGRAM
👍8🔥5❤1