Веб-разработка *

А вы уже пробовали запустить свой проект с помощью бесплатного объема облачных ресурсов Evolution free tier?

Тогда поделитесь опытом и мнением — опрос займет не больше 5-7 минут.

Пройти опрос 👈

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

Текущие условия:

• виртуальная машина в конфигурации 2vCPU, 4 ГБ RAM, диск 30 ГБ;

• ежемесячный объем хранилища S3 — 15 ГБ, 100 000 операций PUT/POST/LIST, 1 000 000 операций GET/HEAD, 10 ТБ исходящего трафика;

• ежемесячный объем ресурсов для запуска контейнеров — 120 vCPU x час, 480 ГБ RAM х час.

Этого хватит, чтобы хранить важные данные, развернуть сервер Minecraft, запустить умного Telegram-бота с AI, опубликовать персональный сайт или реализовать любые другие сценарии.

Узнать больше про free tier и попробовать 🕹️

Обновлён бесплатный учебник по JavaScript. Проект полностью на русском языке. Там собрано всё: от основ синтаксиса до замыканий и ООП, событий, промисов и других сложных концепций. В каждой главе десятки примеров кода — не понять материал просто невозможно. Есть много задач и контрольных как после глав, так и после больших разделов.

Почему я больше никогда не буду использовать сервис bitly?

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

Long story short: помогают тут ребятам с одним оффлайн проектом, нужно было быстро сделать QR код для флайеров, google выдает миллион сервисов для генерации, выбрал первый попавшийся “Create Your Free QR Codes”.  Удачно все сделал, заказали флаеры, не смотря на то, что по пути на каждому этапе было Free через 2 недели (когда уже все напечатано) прилетает вежливое “Oh no! Your Dynamic QR Codes will expire in 3 days”. И конечно же он перестанет работать если не заплатить ($20/month). 

Масштаб “потерь” - $40, но я готов заплатить $200 чтобы объяснить они строян бизнес на скаме и для кармы это вредно. 

Конечно же я не один такой, и большинство “сжимают зубы” и платят.  Например на редите 230 комментариев. 

Как вы поступаете в такой сиутации?  Я как-то с детства считаю что нельзя потокать и платить. 

Мои действия:

✅ никогда в жизни ни на одном из моих проектов не будет использоваться сокращалка Bitly

✅ написал далобу в FTC

✅ написал отзыв на Google Maps (там таких много)

☑️ найду и напишу отзывы на других сервисах

✅ попрошу вас помочь мне и присоединиться

P.S. Ресеч показал, что это не просто какие-то горе стартаперы, а проект компании Bitly (рейтинг 1.6 на Trustpilot).

Если вам нечем заняться и вам не сложно уделить 2-5 минут своего времени. 

Промпт для генерации отзыва:

Write a concise, neutral review of qr-code-generator.com (Bitly) in plain, easy-to-read language, 80-120 words. Context: It appears in Google for queries like "free qr code generator." During setup, the process is presented as free; any expiration notice, if present, seems absent or buried in terms. About 14 days later, the QR may be deactivated behind a paywall, leaving printed materials unusable unless payment is made to reactivate. The system does not allow converting that now paid QR to a free static code or redirecting it without payment. Many users report similar experiences online, including numerous Reddit comments. Keep the tone calm, factual, and non-accusatory. Do not include personal info or insults. Write in your own words.

Места куда стоит запостить отзыв:

- Google Maps (Bitly Office Google Maps)

- Trust Pilot

- G2

- Capterra

P.P.S. Есть кто-то из СМИ хочет изучить эту историю и написать подробнее - я буду рад ответить на вопросы и предоставить материалы. 

P.P.P.S. Особенно иронично выглядит позиция “Head of Happiness” в подписи письма

#justice 

Вам не нужен Activity Bar в vscode!

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

Раз. Убираем Activity Bar. В нем есть три типа иконок: нужные нам часто, нужные иногда, совсем ненужные. Логика такая: для нужных мы создаем горячие клавиши (или пользуемся существующими). Для средне-нужных используем cmd+p и выбор команды. Ненужными – не пользуемся :)

Кастомные настройки для горячих клавиш для управления разными View (плюс к стандратным):

[
    {
        "key": "shift+cmd+g",
        "command": "workbench.view.scm",
        "when": "workbench.scm.active"
    },
    {
        "key": "ctrl+shift+g",
        "command": "-workbench.view.scm",
        "when": "workbench.scm.active"
    },
    {
        "key": "shift+cmd+o",
        "command": "outline.focus"
    }
]

Два. Убираем Side Bar. Большую часть времени он не нужен. В основном нам просто нужно читать и реже писать код. Зачем нам Side Bar? Убирается основной по cmd+b, а второй по cmd+alt+b.

Но если оставить Side Bar справа, то его появление / скрытие будет двигать код. Что будет мешать. Потому – убираем его вправо.

Настройки:

{
    "workbench.activityBar.location": "hidden",
    "workbench.sideBar.location": "right"
}

Три. И не забудьте поместить Command Palette в центр рабочей области. Так будет удобнее: появяться она будет сразу перед глазами. Просто перетаскиваем мышкой.

Ссылка со всеми материалами: https://github.com/sobolevn/the-best-python-course/blob/main/minimal_vscode Там будет много полезного.

Говорим на языке событий: что даёт ивент-шторминг и как его правильно провести

Привет! Я Иван Чернов, системный архитектор, в этом посте расскажу про ивент-шторминг.

В Островке есть набор сервисов, который разбит на логические блоки так, чтобы в рамках блока можно было итерировать: Островок, Островок B2B и Островок Командировки. При этом запускать новые фичи, которые будут сквозь эти слои прорезаться. 

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

Что это за практика? На встрече с одной стороны сажаем бизнес, с другой — разработку. Просим бизнес рассказать, что и как он делает в работе с клиентом.

Ивент-шторминг проводится с фокусом на цикличную реактивность: происходит событие, которое визуально меняет что-то для пользователя, тот принимает решение и отдаёт команду, команда приводит к новому событию.

На этих циклах фокусируемся на доске в Miro во время встречи. 

В ивент-шторминге 3 этапа: 

1. Сейлзы выстраивают по циклам цепочку событий: от «клиента у нас ещё нет» до «клиент нас окончательно покинул». Даже в простых цепочках 20–30 действий. В готовом таймлайне есть happy pass: клиент успешно прошёл весь путь. И альтернативные пути: что-то пошло не так.

2. Проходим по таймлайну с конца, ищем ошибки. Выделяем ключевые события, которые нельзя откатить: клиент зарегистрировался, совершил бронирование, провёл оплату. Здесь происходит стык сервисов. На стыках обогащаем цепочку. Пишем, кто и что делает: актор-клиент зарегистрировался, подключился сервис юзер-менеджмента. 

3. Выявляем, какие агрегаты работают с событием. Мапим команды: клиент регистрируется, в работе участвует команда регистрации. 

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

Во время встречи составляем словарик. Если сейлз говорит непонятное разработчикам слово — мы его добавляем в словарь, и оно просасывается в наш интерфейс и кодовую базу. Всё это учит разработчиков понимать, на какие рычажки они влияют своим кодом. 

Поделюсь советами, как круто провести ивент-шторминг.

Онлайн-формат

● Для проведения онлайн достаточно доски в Miro.

● Разбивайте встречу на три части, каждая встреча — один этап.

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

● Максимум людей для успешной фасилитации онлайн — 8–10 человек.

Подбор людей и подготовка

● Соотношение участников: 70% бизнеса, 30% разработки.

● Ищите представителей бизнеса в оргчате выбранного домена: спрашивайте у руководства, «кто тут самый инициативный».

● Вам нужны работники «с полей», которые лучше всего шарят в процессах, и тимлиды первого уровня.

● Берите людей из разных направлений домена. 

● Бизнес-участники должны понимать: ивент-шторминг — процесс обучения, они эксперты, а разработка — ученики. Им нужно говорить на своём языке, а не подстраиваться под разработку.

● Дайте участникам базовый словарь. Четыре самых важных слова: актор, команда, событие, термин.

● Важны вводные по времени и цели: на сессию уйдёт суммарно 6–8 часов, она даст единое понимание процессов.

Фасилитация

● На старте не бойтесь повторить все вводные.

● Дайте сейлзсам 10 минут на то, чтобы каждый выстроил индивидуальный таймлайн, дальше начинайте мёржить таймлайны с общим обсуждением.

● Событие — факт в прошедшем времени, его не отмотать. Следите, чтобы так и записывали. 

● Первым делом простройте happy pass, иначе у вас не выстроится цельное видение процесса. Альтернативные ветки обозначьте на первом этапе, а достраивайте на втором, проверяя таймлайн с конца.

● Если бизнес утверждает, что два события происходят одновременно, это важная точка обсуждения.

● Организуйте пост-процессинг: важно передать разработке результаты, объяснить, какие процессы у нас уже верно реализованы, а где нужно обновление и дополнительное внедрение.

Как провести идеально бесполезное собеседование для фронтендера!

Шаг 1: Берем «элитный» шаблон Яндекс.Мультитрека.

Шаг 2: Удаляем всё ценное — оставляем только хаотичный набор вопросов.

Шаг 3: Делаем вид, что это «специально под вакансию» (спойлер: одни и те же 40 вопросов получают все — от стажера до лида).

Главные хиты программы:

— «Назови 5+ способов центрировать div» (ведь React-лид должен уметь это с закрытыми глазами). — «Расскажи про Event Loop как стихотворение» (иначе как проверить лидерские качества?). — «SOLID наизусть, включая историю создания каждого принципа». — Секретный прием: задаем общие вопросы, но с видом эксперта ждем «правильного» ответа (который знает только интервьюер).

Философский бонус: пока такие собеседования существуют, «прохождение собеседований» остаётся отдельным навыком в вакууме — где побеждает не тот, кто лучше код пишет, а тот, кто научился угадывать, что имел в виду интервьюер.

Гарантированный результат:

• Кандидат либо засыпает, либо пишет гневный пост.

• Ваша компания экономит на зарплатах — никто не доходит до оффера.

• Вы получаете статус «самое запоминающееся собеседование в карьере». Если узнали свою компанию — не переживайте, вы не одиноки в этом увлекательном квесте!

minimal vscode: открываем окна

Нет, не от духоты, ее в видео как раз не будет 🌚️️️️
Видео короткое, динамичное, практичное.

Перед тем как учиться пользоваться vscode, необходимо:

1. Её поставить

2. Научиться её открывать

3. Располагать её на рабочем пространстве

Мой конфиг: https://github.com/sobolevn/dotfiles

В видео поговорили про: hotkey managers, тайлы, всякие красивости для macos.

Менеджеры горячих клавиш:

• jumpapp для Linux: https://github.com/mkropat/jumpapp и https://linux.die.net/man/1/wmctrl

• AutoHotkey для Windows: https://autohotkey.com

• whkd для Windows: https://github.com/LGUG2Z/whkd

• skhd для macos: https://github.com/koekeishiya/skhd

• skhd-zig для macos: https://github.com/jackielii/skhd.zig

Тайловые менеджеры:

• macos: https://github.com/rxhanson/Rectangle мой конфиг: https://github.com/sobolevn/dotfiles/blob/master/config/RectangleConfig.json

• macos более продвинутая альтернатива: https://github.com/ianyh/Amethyst

• самая продвинутая альтернатива для macos: https://github.com/koekeishiya/yabai

• Windows: https://github.com/LGUG2Z/komorebi

• Linux: ТЫСЯЧИ ИХ

Полезности:

• Top Notch для macos: https://topnotch.app

• HazeOver для macos: https://hazeover.com/ru

• Brewfile: https://docs.brew.sh/Brew-Bundle-and-Brewfile мой конфиг: https://github.com/sobolevn/dotfiles/blob/master/Brewfile

Представлена бесплатная платформа Pagy, которая позволяет создавать лендинги и небольшие веб-проекты за секунды. Работает в браузере и собирает сайты или визитки без привлечения дизайнера, верстальщика. Не требует никакой установки ПО. Все просто: выбираете шаблон и сразу его редактируете, пишите текст, вставляете ссылки и пикчи. Ни одной строчки кода писать не нужно, хостинг не требуется. Есть аналитика метрик сайта и сотни уже готовых дизайнов от разрабов и коммьюнити.

Чужой товарный знак в TITLE вашего сайта: есть ли риск судебного иска?

Сайт - средство привлечения клиентов и сопровождения продаж. Инструмент мощный, но зависимый: нужна поисковая оптимизация, иначе сайт затеряется среди миллиарда похожих ресурсов.

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

Место страницы сайта в поисковой выдаче выше за счет текста внутри элемента TITLE.

 Элемент TITLE размещается вверху кода веб-страницы между служебными символами <title></title>. Внутри элемента - текст, который отражает ключевую мысль всего контента страницы.

Пользователю не виден код сайта, но код видит поисковый робот. Он переходит на веб-страницу, изучает сведения внутри TITLE и помещает ссылку на эту страницу в выдачу по соответствующему запросу пользователя. Повыше.

В чем проблема? Давайте на примере.

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

Моя специализация - юридическая помощь по интеллектуальной собственности. Поэтому в код элемента TITLE этой веб-страницы я поместил ключевую мысль: "Защита интеллектуальной собственности | Адвокат С.В. Пропастин".

Поисковый робот считывает код и учитывает текст из TITLE при выдаче ссылки на веб-страницу. По запросу пользователя "защита интеллектуальной собственности".

Я порылся в реестре товарных знаков Роспатента и нашел комбинированный товарный знак условного конкурента. На нем изображены щит и словосочетание: Патентное бюро "Защита интеллектуальной собственности" (заявка 2019763408).

Ключевая мысль "защита интеллектуальной собственности" в TITLE кода моего сайта и словесный элемент товарного знака бюро сильно похожи!

Отсюда вопрос -

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

Вопрос не праздный.

Гипотетически я могу отбирать клиентов у бюро: пользователи ищут в интернете именно бюро, за счет моего title наталкиваются на мой сайт и переходят на него, оценивают преимущества и обращаются ко мне за помощью.

Бюро вправе защищаться - подать на меня в суд. Потребовать, чтобы я перестал нарушать их права на товарный знак и возместил ущерб.

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

Ответ на вопрос мне не нравится, но истина дороже -

Маскировка чужого товарного знака в элементе TITLE кода веб-страницы не защищает меня от иска правообладателя знака. Почему?

1. Товарный знак включает словесный элемент "защита интеллектуальной собственности". Ключевая мысль в TITLE моего сайта тоже сформулирована в словесной форме с таким же наполнением.

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

2. Один из способов использования товарного знака - его размещение в сети "Интернет".

Сайты являются обязательным звеном этой сети. Без них линии связи теряют смысл: нечего соединять. Именно использование товарного знака без согласия его владельца - повод для судебного иска.

3. Без специальных сервисов элемент TITLE в коде сайта невидим пользователю. Но именно в случае с TITLE пользователь видит результат исполнения кода, так как ключевая мысль:

1) выводится в виде заголовка и подсвечивается системой на странице выдачи по поисковому запросу;

2) выводится на персональном компьютере в адресной строке браузера при переходе на главную страницу сайта.

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

Интересно, вы проговариваете в процессе SEO тему использования чужих товарных знаков?

Хотите подтянуть свои знания Go?

Тогда новый бесплатный курс для вас!

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

Если вы уже знакомы с Go, но не хватает практики, приглашаем пройти новый курс в Академии Selectel. С ним вы научитесь писать простые сервисы на Go и использовать его в некоторых рабочих задачах, а еще получите большую подборку ресурсов для погружения в этот язык. 

Несколько материалов для старта.

• Как написать свой REST API на Go? Разрабатываем сокращатель ссылок. Делимся пошаговой инструкцией, как написать REST API сервис URL Shortener и развернуть готовое приложение на сервере.

• Fuzzing-тесты в Go после v1.18. Рассказываем, как устроено fuzzing-тестирование в Go и как проверить функцию на корректную валидацию данных.

• Создаем сервис авторизации. Пошаговое руководство по написанию полноценного gRPC-сервиса с архитектурой на Go.

Открыть курс →

Находки на рыбалке: FastStream! Сходили с автором половить рыбу и пожарить всякое вкусное на углях. И пока было время – говорили про программирование.

Для тех, кто еще не успел познакомиться с новинкой, рассказываю: FastStream – аналог FastAPI, но для работы с событиями в брокерах / очередях.

Пример:

from faststream import FastStream
from faststream.kafka import KafkaBroker

broker = KafkaBroker("localhost:9092")
app = FastStream(broker)

@publisher("another-topic")
@subscriber("first-topic")
async def handle(user: str) -> str:
     return f"Hi, {user}!"

Что делает данный код? Читает сообщения из first-topic, парсит из них поле user типа str, выполняет вашу логику обработки, отправляет новое сообщение в another-topic. Просто? Удобно? Да!

Что нам дает такой подход?

• Декларативное описание, чего мы хотим. Не надо руками создавать коннекты и рулить потоком выполнения

• AsyncAPI документацию (аналог OpenAPI в вебе)

• Удобное тестирование

• Кучу других плюшек!

Внутри видео обсудили:

• Детали работы DI фастстрима

• Встроенное Observability

• Open Tracing

• Сообщество фреймворка (тут не будет проблемы "одного автора", сообщество живет!)

• Отличия от Celery: почему интструменты совсем разные?

Репозиторий: https://github.com/ag2ai/faststream
Документация: https://faststream.ag2.ai

Обсуждение: используется ли в ваших проектах асинхронная архитектура? Как вы работаете с событиями?

— Слушай, я посмотрел у Тинькоффа — у них такие крутые анимации. Давайте и нам такие сделаем!

— Ну, у нас не финтех, мобильного приложения нет, и вообще — у нас CRM для логистов…

— Ну и что? Люди любят, когда красиво! Сделаем плавные графики, чтобы всё оживало. UX, UI, ты же понимаешь!

— У нас при этом не работают фильтры, отчёты формируются вручную, и у клиента падает система при импорте Excel. Может, сначала это починим?

— Ладно… Только кнопки тогда сделай с закруглениями, как в Тинькоффе. Хоть что-то красивое будет.

Выглядит лучше. Работает — так же плохо.

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

Вдохновение — не преступление.

Но копирование без понимания контекста — худший выбор.

У Тинькоффа и команда дизайнеров, и исследования юзабилити, и огромный бюджет, и полгода на rollout.

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

Оффтоп
Читайте больше у меня в профиле и в Telegram канале

Как скрыть Webvisor от Яндекс.Метрики во вкладке "Сеть" в DevTools

При отладке фронтенда или анализе сетевых запросов в DevTools часто возникает проблема: запросы к mc.yandex.ru (Webvisor) загромождают вкладку «Сеть» и мешают сосредоточиться на действительно нужных данных. Особенно если на странице активно работает Яндекс.Метрика с включённым Webvisor.

Хорошая новость: эти запросы легко отфильтровать или полностью заблокировать. Делюсь несколькими способами, как это сделать.

Этот способ касается и других типов запросов, мне лично мешают запросы от mc.yandex.ru.

Способ 1. Фильтрация через DevTools (Network)

Если не хочется ничего ломать, просто исключите Webvisor из отображения:

1. Откройте DevTools (F12 или Ctrl+Shift+I / Cmd+Option+I).

2. Перейдите на вкладку Network (Сеть).

3. В строке фильтра введите: -mc.yandex.ru

Способ 2. Полная блокировка через Request Blocking

Если вы не хотите, чтобы эти запросы вообще происходили:

1. Откройте DevTools.

2. Нажмите на три точки в правом верхнем углу панели → More tools (Другие инструменты) → Network request blocking (Блокировка сетевых запросов).

3. В появившемся окне добавьте правило: *mc.yandex.ru*

4. Включите галочку Enable request blocking.

Теперь DevTools будет блокировать запросы к Webvisor ещё до их отправки.

Способ 3. Расширения браузера (например, uBlock Origin)

Для более глобального решения можно использовать расширения:

1. Установите uBlock Origin.

2. В настройках фильтров добавьте правило: ||mc.yandex.ru^

Теперь все запросы к mc.yandex.ru будут блокироваться на уровне браузера.

Заключение

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

Если у вас есть свои хаки по "чистке" вкладки Network — делитесь в комментариях 👇

Как немножко хакнуть Мосрег⁠⁠

Всем привет!

При оформлении заявлений в детский сад на детей на uslugi.mosreg.ru столкнулся с тем, что если ранее было подано заявление и нужно какие-то данные в нём поправить, то выбрать год зачисления ребёнка в ДС можно только следующий. То есть, мы подали в 2024, а теперь можно выбрать только 2026 год, потому что текущий нельзя.

Мне показалось это не очень удобным, решил немножко изучить фронтенд сайта и обнаружил, что валидации на простановку года нет :)

В видео подробнее, как обойти ограничение

P.S. На записи не видно контекстного меню в браузере, когда нажимаешь ПКМ, нас интересует последний пункт "Просмотреть код"

Joomla: как тестировать? Всего 8 минут.

Над CMS Joomla постоянно ведётся работа: создаётся новый функционал, исправляются ошибки, делаются мелкие правки. Разработка ведётся на GitHub. Изменения оформляются в виде Pull Request (PR). Для того, чтобы изменения могли войти в ядро - их обязательно должны успешно протестировать минимум 2 человека КРОМЕ автора изменений. А помочь с большинством PR можно очень и очень быстро, это не занимает много времени, чему подтверждением служит это видео.

Смотреть видео на YouTube

Смотреть на Vk Video

Смотреть на RuTube

🔮 14 день делаю Конструктор форм в режиме Build in public

Добавил ИИ-магии в наш конструктор форм!

Честно говоря, я сам офигел от того, что получилось закодить!

Можно создавать красивые и удобные формы буквально за секунды с помощью ИИ. Достаточно просто написать запрос, например:

«Сделай форму регистрации на мероприятие»

или

«Сделай форму для заявок на консультацию психолога»

- и всё! Форма генерируется автоматически, остаётся только немного поправить и подогнать под себя.

Можно сразу принимать заявки, собирать обратную связь и даже проводить полноценные опросы.

🤔 Как вам такая магия? Пора уже слезать с Гугл Форм? планирую релиз уже в Августе!

🚀 День 12 как работаю над нашим конструктором форм!

- Сделал получше интерфейс для компонентов

Прорабатываю компоненты под разные страны, хочу сделать локализацию под страны которые занимают наибольшую долю в интернете: 

• Английский - 49.2%

• Испанский - 6.0%

• Немецкий - 5.8%

• Японский - 5.1%

• Французский - 4.4%

• Португальский - 4.0%

• Русский - 3.8%

• Итальянский - 2.8%

Приглашаем на новый бесплатный вебинар «Как не развалить Angular-проект: архитектура, которая работает». 

Разберёмся, где заканчивается компонент и начинается сервис, как уменьшить связанность и повысить читаемость. Завершим практикой: проведем пошаговый рефакторинг на реальном примере.

📅 Дата: 11.07.2025

⏰ Время: 17:00-18:30 (Мск)

На вебинаре:

✔️ Разделение ответственности между компонентами и сервисами

✔️ Уменьшение связанности и повышение читаемости

✔️ Паттерны и антипаттерны в архитектуре Angular

✔️ Практический рефакторинг на примере «грязного» компонент

👨‍🎓 Спикер: Погорелов Павел — эксперт в области фронтенд-разработки.

Узнайте, как выстроить архитектуру Angular-приложения, которая выдержит рост команды и кода!

👉 Записаться

🛠 День 10: Разработка полным ходом.

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

📱 Мобильная версия

• Полнофункциональный интерфейс на телефоне- Можно создавать формы и просматривать ответы прямо с телефона

🔧 Конструктор форм

• Drag & Drop

• Автосохранение

• Заголовки (title, description)

• Брендинг: обложка, логотип (картинка, текст или эмодзи)

• 20+ типов полей: текст, email, телефон, рейтинги, файлы, дата, время

• Бизнес-поля: ИНН, ОГРН, КПП, БИК, СНИЛС, паспорт - с валидацией и проверкой хеша

• Рейтинги: 1-5 звёзд, 1-10

🌐 Переводы

• Уже есть RU / EN- Скоро сделаем ещё 48 языков

🗂 Папки и доступы

Папки с правами доступа - удобно делиться с командой

Уровни доступа:

• Владелец - полный контроль

• Администратор - всё, кроме удаления папки

• Редактор - формы и ответы

• Редактор форм - только формы

• Оператор - только просмотр/обновление ответов

• Платежи - доступ только к платежам

📋 Управление формами

• Поиск, фильтрация, сортировка

• Дублирование и удаление

• Шаблоны

🔗 Публикация

• Короткие ссылки (/f/abc1234)

• QR-коды

• Виджет для встраивания в сайт (iframe)

• SEO-метатеги

• Превью формы в соцсетях (OG, Twitter) с картинкой

• SSR-рендеринг форм

📊 Ответы и аналитика

• Фильтрация по дате, форме, IP

• Экспорт ответов в CSV

📎 Файлы

• Поддержка 20+ форматов

• Превью: изображения, PDF, CSV, текст и др.

UART-сенсоры и браузер: читаем воздух через браузер на sensor.pollutants.eu

Привет, Хабр!
Делюсь своим простым, но мощным инструментом: веб-интерфейс для чтения данных с UART-сенсоров прямо через браузер. Да, без установки чего-либо. Просто открываешь страницу — и видишь, что творится в воздухе.

🤔 Зачем всё это?

Если ты возишься с датчиками качества воздуха, то знаешь, как это бывает: подключил — и пошёл искать minicom, Ultra, какой-нибудь Python-скрипт, или ещё чего. А если ты просто хочешь посмотреть, дышит ли твой сенсор — зачем столько движений?

И тут пришла идея: а почему бы не сделать всё в браузере?

🌐 HTML + JS + JSON = 👌

Ты заходишь на sensor.pollutants.eu, выбираешь нужный сенсор из списка (если в JSON их несколько), подключаешься к COM-порту — и данные потекли.

Без установки. Просто HTML-страница, в которой уже всё встроено:

• работа с Web Serial API,

• парсинг бинарных фреймов по структуре из JSON,

• визуализация данных через Chart.js,

• конфигурация через внешний JSON-файл.

• скачивание статистики в CSV

⚙️ Конфигурация сенсоров

Конфиг грузится с GitHub и содержит несколько сенсоров. Можeте загрузить свой JSON.
Проект на hackaday