Lex Kravetski в ФБ написал оду Микрософт Ворду, с которым у меня плохие отношения еще с конца 1980-х, когда он был под DOS-ом в графическом режиме. Причем тогда Ворд был еще более-менее, хотя бОльшая часть его функциональности лично мне не была нужна, для форматированных текстов хватало Лексикона от Eugene Veselov из ВЦ Академии Наук, затем уехавшим в Микрософт и ныне ставшим очень политизированным.
Главные проблемы с Вордом для меня начались после 2000 года, когда у него стало прыгать форматирование невпопад, особенно в текстах с комбинацией списков, таблиц и картинок. Lex такую проблему упоминает с позиции своих оппонентов: "блин, даже пробел в нём как-то странно работает, по коей причине даже простое форматирование сделать тяжело."
Из-за этого прыгания я сейчас для редактирования форматированных текстов как правило использую простой текстовый редактор joe (который имитирует редактор в TurboC 1988 года, но с квадратными блоками), а в нем - .md Markdown, который потом конвертирую в .pdf с помощью программы pandoc.
Также использую Google Doc, в нем форматирование не прыгает, как в Microsoft Word и в Libre Office, а сделано по человечески.
Раньше еще писал в текстовом редакторе на HTML, но Markdown удобнее, так как читабильнее в голом виде. Если вы еще не выучили Markdown и мучаетесь Вордом - просто нагуглите его в википедии, он учится за 15 минут.
Как получить почти бесконечное зацикливание без использования циклов и без переполнения стека вызовов:
// Установите N = 64, и эта функция никогда не завершится
// Количество вызовов (calls) = 2^(N+1)
// Максимальная глубина вложенности = N
let calls = 0
const N = 18
function func(state, visited) {
calls++
if (calls > 10_000_000) {
throw new Error('calls: ' + calls)
}
if (visited.includes(state)) return
const newVisited = [...visited, state]
func((state + 1) % N, newVisited)
func((state + 1) % N, newVisited)
}
func(0, [])
console.log('calls:', calls)
Почему это работает без переполнения стека?
func(0, [])
├── func(1, [0])
│ ├── func(2, [0,1])
│ │ └── ... глубина растёт до N
│ │ и перебираются все возможные комбинации значений в newVisited
│ └── func(2, [0,1]) - возвращается, глубина УМЕНЬШАЕТСЯ
└── func(1, [0]) - второй вызов, стек уже освободился
А Garbage Collector (GC) при этом бесконечно удаляет созданные ранее массивы newVisited
Стек "дышит" - достигает максимума N, потом сворачивается, потом снова растёт. Это обход огромного дерева, имеющего небольшую глубину, но очень большую ширину. Это не бесконечная рекурсия. Но при N = 64 количество вызовов будет 2^65 (примерно 10^19) - это займёт тысячи лет, и стек никогда не переполнится.
За годы менторства по Angular (в том числе в HTML Academy) я заметил одну системную проблему: студенты и даже миддлы часто знают синтаксис RxJS, но не понимают реактивного мышления. В итоге мы получаем subscribe внутри subscribe и императивную лапшу.
Я искал интерактивные курсы, но большинство бесплатных ресурсов ограничиваются основами.
Курс бесплатный. Делал для себя и студентов, но теперь делюсь со всеми.
Буду рад фидбеку и баг-репортам (проект активно допиливаю).
Команда разработчиков Chrome собрала на одной странице все крупные изменения в CSS за 2025 год. У каждой новой фичи есть подробное описание, интерактивная демонстрация, примеры кода и информацию о поддержке в основных браузерах.
Друзья, классная новость! Мы с коллегами из GitVerse закончили разработку интеграции!
Теперь в Gramax можно подключить GitVerse в качестве хранилища. Работает в лучшем виде: клонирование, синхронизация, коммит, пуш — все как и должно быть ✨
Это была масштабная и интересная работа: мы вместе анализировали API, чтобы получилось максимально удобно. Потому будем очень рады увидеть ваши плюсики!
Gramax — Open Source-платформа для работы с документацией в подходе Docs as Code. GitVerse — AI-first платформа для работы с кодом.
Поделюсь самодельным расширением для VS Code, которое позволяет создавать React-компоненты в один клик.
Демонстрация работы расширения
Что умеет:
гибкое именование файлов: выбор между PascalCase, camelCase, kebab-case или snake_case для генерируемых файлов;
работа с .tsx и .jsx для файлов компонентов, а также .scss, .css, .less и .sass для стилей;
редактируемые шаблоны: настройка содержимого генерируемых файлов прямо в VS Code;
опциональное создание файлов реэкспорта и стилей.
Более подробный readme на странице расширения, ссылка на исходники там же. На мой взгляд экстешнен написан таким образом, что его довольно легко переписать для любого web-фреймворка.
На всякий случай: ни с какими внешними сервисами и нейронками расширение не взаимодействует)
Массовая замена HTML-разметки в Sublime Text с помощью RegExp
При работе с HTML часто возникает рутинная задача: есть десятки однотипных элементов, которые нужно заменить на реальную разметку. Делать это вручную - долго и рискованно, также можно легко допустить ошибку.
В моём случае это были заглушки вида:
<p>Image 1</p>
<p>Image 2</p>
<p>Image 3</p>
Нужно было превратить их в теги изображений, сохранив номера файлов изображений.
Почему не руками
Ручная правка подходит только для пары строк. Когда элементов больше 10–20, возрастает риск:
ошибиться в номере изображения
забыть закрыть тег
нарушить единообразие разметки
Поэтому логичнее использовать инструменты, которые уже есть в редакторе.
Решение через Sublime Text и RegExp
В Sublime Text есть мощный поиск и замена с поддержкой регулярных выражений. Этого более чем достаточно для задачи.
Открываем HTML-файл и вызываем панель замены:
Ctrl + H (Windows / Linux)
Cmd + Alt + F (macOS)
Обязательно включаем режим Regular Expression (иконка .*).
Шаблон поиска
<p>Image (\d+)</p>
Разберём выражение:
<p>Image — фиксированная часть
(\d+) — группа захвата, которая находит любое число
</p> — закрывающий тег
Число внутри скобок сохраняется как первая группа.
Шаблон замены
<img src="images/\1.jpg">
Здесь \1 — ссылка на первую группу захвата из шаблона поиска. На её место подставляется найденное число.
В результате:
Image 1 → images/1.jpg
Image 12 → images/12.jpg
Проверка и замена
Перед массовой заменой полезно нажать Find All, чтобы убедиться, что совпадения находятся только там, где нужно.
После этого можно смело использовать Replace All — Sublime Text заменит все подходящие строки за один шаг.
Подводные камни
Несколько моментов, о которых легко забыть:
если не включить RegExp, \1 подставлен не будет
в Sublime используется именно \1, а не $1
шаблон чувствителен к пробелам и регистру
Альтернативы
Для подобных задач подойдут и другие инструменты:
sed в терминале
массовая генерация HTML через bash-циклы
аналогичная замена в VS Code
Но если файл уже открыт в Sublime Text, RegExp — самый быстрый вариант.
Вывод
Регулярные выражения в Sublime Text позволяют эффективно автоматизировать рутинные правки HTML без дополнительных скриптов и плагинов. Даже простые приёмы вроде групп захвата экономят время и снижают количество ошибок.
Дополнительно
Более подробная пошаговая инструкция с ориентацией на новичков опубликована в моём блоге:
Доброго всем. Первая публикация, прошу не особо...
Не стану растекаться мыслью по древу, пост - следствие поиска по запросам типа "как лучше вставить и анимировать SVG иконки", и подобным в том же ключе. Так как самыми релевантными ответами поиска не удовлетворён, решил написать свой, во-первых, чтобы услышать сообщество. Мало ли, возможно технология уже вовсю применяется в фреймворках, и на поиск все забили "всё и так слишком очевидно". Во-вторых, сам до сих пор копаюсь в ванильном, поэтому, если старшие товарищи найдут сей вариант приемлемым, пусть пост останется как справка, вроде "а чё, так можно было?". Если же такая практика не применима по ряду пока неизученных мной причин, пост тоже пусть остаётся дополненный комментариями, как пример того "как не надо делать". В общем.
Решил упаковать спрайт в Web Components. Для примера взял отображение файловых иконок, за подопечных три распространённых файловых формата .docs, .xls, .pdf. Раз уж мне и так пришлось испытать муки отсутствия музы( вообще ни разу не художник), прошу отнестись с пониманием к внешнему виду конечного продукта. Упор был на простоту, контролируемость, компоновку. В том смысле, что косметика человеком с утончённым восприятием этого мира может быть применима отдельно. Да, и ещё один аспект постарался обыграть - наличие общих свойств для всех иконок, коими выбрал подложку, и текст mime типа, и уникальные для каждой иконки элементы, ими выступили "брендовые" цвета и элементы. Так, выбор иконок файловых форматов для спрайта показался оптимальным. Далее, в общем код(сокращённо, рабочий пример по ссылке), совсем немного к нему объяснений и ссылка на песочницу. И, само собой, ожидание комментариев.
Код прокомментирую на предмет того, что в init() пришлось соблюсти порядок объявления переменных. Для определения схожих классов с разными "модификаторами" сначала брался атрибут в компоненте. По нему же делалась выборка this.#unic впоследствии вставляемая в this.#preform . Стили здесь не привожу, отмечу лишь, что настройки :hover и анимации там вполне работают.
Google представил топ лучших расширений для Chrome в 2025 году:
HARPA AI: позволяет автоматизировать любую работу в интернете: мониторинг сайтов, напоминания, боты, поиск, скрапинг;
Quillbot: если работаете с текстом — это вам. Проверка орфографии, рерайт ИИ‑текста, подборка синонимов и даже проверка осмысленности текста;
Monica и Sider: добавляют в браузер боковую панель с самыми полезными нейронками. Удобный доступ к сразу нескольким чат‑ботам, быстрой генерации картинок и видео, проверке и переводу документов;
Fireflies и Bluedot: помогут в создании заметок и автоматической расшифровке бесконечных созвонов;
QuestionAI и eJOY: школьники и студенты, а это вам — помощник по выполнению домашних заданий и разбору тем по любым предметам.
Adobe Photoshop: быстрый доступ к Фотошопу. Веб‑версия проще, но там есть все нужные инструменты для редактирования фотографий, в том числе ИИ‑фотошоп;
Phia: шопинг‑расширение с ИИ для автоматического сравнения цен при покупках в браузере. Идеально, если все ещё мечтаете найти дешёвые ОЗУ.
Я часто вижу, как разработчики испытывают трудности с i18next. И действительно, это технология интернационализации, которую нелегко освоить.
Несмотря на это, i18next остаётся решением по умолчанию, которое ChatGPT рекомендует для внедрения i18n. Мы слишком часто попадаемся на удочку страниц «Get Started» (да, оно работает, но действительно ли это сделано правильно?).
На практике я замечаю, что многие проекты пропускают самые критичные аспекты интернационализации, особенно связанные с SEO: перевод метаданных, теги hreflang, локализация ссылок, настройка sitemap и robots.txt.
Что ещё хуже, почти половина проектов, использующих i18next (особенно после роста популярности ИИ), не структурируют контент по неймспейсам или же загружают все неймспейсы при каждом запросе.
Последствия? Вы можете заставлять каждого пользователя загружать контент всех страниц на всех языках, даже если он посещает только одну страницу. Например: при 10 страницах и 10 языках 99% загружаемого контента никогда не будет использовано. Совет: используйте анализатор бандла, чтобы выявить это.
Чтобы решить проблему, я подготовил руководство о том, как правильно интернационализировать приложение Next.js 16 с i18next в 2025 году.
Представлен ИИ-сервис Vibetest Use, который тестирует сайты на прочность и ищет уязвимости. Параллельно запускаются сразу несколько проверок с помощью ИИ, которые ищут ошибки, битые ссылки или проблемы в дизайне. Работает на базе Claude. В качестве альтернативы можно запустить с бесплатным API от Google через Cursor.
Как мы избавились от рутины в сетевом коде с помощью собственного фреймворка Chord 🪄
Расскажем на крупнейшей конференции для разработчиков разного профиля — Holly JS 🤟
Спикером конференции станет Дмитрий Дин, fullstack-лид Далее. В докладе «Chord’овская декларативность: побеждаем бойлерплейт сетевого взаимодействия» он поделится опытом внедрения собственного инструмента Chord (на базе JSON-RPC), который уже больше года работает в продакшене и избавляет команды от рутины при взаимодействии между клиентом и сервером.
Доклад будет особенно полезен frontend- и fullstack-разработчикам (уровня Middle и выше), которые работают с TypeScript и современными фреймворками вроде SvelteKit, Next.js или Nuxt.
Приходите послушать доклад Димы 21 ноября, с 15.30, в секции Фреймворки.
Представлен открытый проект релейного компьютера 1961 года Minivac 601, работающий в браузере (код на GitHub). До появления микрочипов компьютеры строились на основе механических реле. Это рабочая модель Minivac 601, образовательного компьютера, разработанного Клодом Шенноном.
Представлена шпаргалку по JavaScript. Внутри есть всё для изучения, проверки себя и прокачки навыков до уровня сеньора: основы и теория, поиск и выбор элементов, CSS, AJAX и база по DOM, формы и ввод данных, общие проверки , разметка и текстовое содержание, документ, область просмотра, переходы и удобный поиск по всем темам.
minimal vscode - гайд по кастомизации vscode: чистим status bar, пишем плагины на #javascript
В статусбаре в vscode – очень много всего: как полезного, так и лишнего. Сегодня посмотрим, как можно его кастомизировать:
Можно просто спрятать (как делаю я)
Можно очень детально кастомизировать
Можно перенести часть его функций в плагины
И вот тут главная фича vscode выходит наружу – у нас ведь просто браузер с html / css / js. А значит, мы можем использовать css и js для кастомизации всего! И оно будет работать одинаково даже в cloud версиях IDE.
В выпуске:
Будем писать CSS для удаления лишнего из status bar
И создавать локальные плагины на #javascript для кастомизации поведения редактора
function updateColumnPosition() {
const positionLabel = document.querySelector(
'#status\\.editor\\.selection .statusbar-item-label',
)
if (!positionLabel || !positionLabel.textContent) {
// It might not exist for some reason ¯\_(ツ)_/¯
return
}
const currentLine = document.querySelector(
'.line-numbers.active-line-number',
)
// Now we would have the column position instead of the active line number:
const colNumber = positionLabel.textContent.match(/Col (\d+)/)
currentLine.textContent = colNumber[1]
}
Впереди еще пара взрывающих мозг видосов, будем и дальше превращать vscode в Черный Квадрат Малевича.
Лучший стэк для запуска MVP SaaS-стартапа в РФ на 2025 год.
Вот наш боевой стэк, который мы сейчас используем для разработки SaaS-стартапа.
Проверено на собственной шкуре!
✅ Frontend:
- NextJS 15 (+React 19, Turbopack, Server Actions) - актуальный стек для веб-приложений.
- Shadcn UI (сделана на Tailwind) - библиотека UI-компонентов, чтобы сделать крутой интерфейс без дизайнеров.
- Netlify - бесплатный хостинг для тестовой версии продукта.
✅ Backend:
Supabase:
- База данных
- Database SQL Functions (функции сразу в базе PostgreSQL)
- Edge Functions (серверные функции на TypeScript)
Nextauth:
- Авторизация
✅ Инфраструктура:
Kubernetes:
- Репликация БД и сервисов на 3-х Worker-нодах
- Rollout-обновления без простоя
- Политики безопасности и изоляция
- CI/CD из GitHub.
+ Пароли/ключи в KeePass XC.
✅ Инструменты:
- IDEA Ultimate - среда разработки
- Cursor - для вайбкодинга (чистый, без всяких инфоцыганских MCP)
- DBeaver - для работы с БД
- GitHub - репозиторий
✅ Платежка
- Robokassa (РФ + иностранные платежи)
✅ Лендинг + блог
- Tilda (проще сделать сайт на конструкторе, чем все это вайбкодить)
Как мы все настроили
- Развернули проект в облачном хостинге в РФ, чтобы хранить данные в соответствии со 152 ФЗ. Выбрали хостинг с k0s, потому что он дешевле классического k8s.
- Supabase поставили на свой сервер (Cloud не подходит, так как данные хранятся не в РФ).
- Настроили регулярные бэкапы (хотя мы еще не релизились, но 1 раз у нас уже отлетали жесткие диски).
Почему именно такой стэк?
- Проще работать с технологиями, которые ты уже хорошо знаешь.
- Нам важна надежность, быстрое переключение новых версий на проде без простоя и возможность разделить продукт на версию под РФ и "мир".
- Для работы в РФ нужно хранить персональные данные в РФ и избегать трансграничной передачи данных.
- Конструктор сайтов как простой и недорогой вариант для лендингов и блога. Чтобы не вайбкодить целую CMS.
Сейчас мы подключаем платежку, причесываем баги, допиливаем лендинг и готовимся к релизу.
А какие технологии используете вы для разработки MVP?
Возьмите три ингредиента: HTML для чёткой структуры, CSS для красивого оформления и JavaScript для динамики. Смешайте всё в нужных пропорциях, добавьте немного практики, щепотку креатива — и получится интерфейс, которым приятно пользоваться.
А если хотите разобраться во всём шаг за шагом — ловите подборку по основным инструментам топового фронтенд-разработчика:
Привет! На связи Иван и Михаил, Flutter-разработчики из Финама. Когда мы начали писать на Flutter, поняли — граблей тут много, и на некоторые мы уже успели наступить, собрали бинго и готовы рассказать, где они поджидают. Делимся «анти-чеклистом» — вдруг поможет сэкономить время и нервы:
«Книга — лучший подарок», но не в этом случае
Первая ошибка — искать идеальную книгу по Flutter, язык и фреймворк меняются быстрее, чем успевает выходить новое издание. Через пару месяцев некоторые главы могут быть уже неактуальны.
Что делать? Читать документацию, она обновляется. Поначалу может быть трудно вникнуть, опираясь только на нее. На этот случай есть запасной вариант — пройти какой-нибудь годный курс (вроде Udemy). Выбирайте те, где обновления выходят после каждого релиза.
Где брать актуальную информацию
Чтобы не отстать, нужно искать и читать свежие статьи про Flutter и Dart. Из русскоязычных источников нам помогает, конечно, Хабр, а еще рекомендуем ТГ-канал Amiga. Хорошие статьи на английском выходят на Medium. На Youtube-канале Flutter регулярно публикуют интересные видео. А еще мы попробовали лайфхак с нейросетью: она собирает дайджест свежих материалов за неделю. Удивительно, но это правда работает.
Начни со стейт-менеджментов и правильной архитектуры приложения
Самая частая боль новичков — хаос в коде. Мы видели проекты, где бизнес-логика жила прямо в build(). Всё работало… до первого бага.
Как действовать:
Начните с простого setState — это базовый способ управления состоянием. Затем попробуйте пакеты Bloc, Riverpod — почувствуете разницу в читаемости и структуре.
Изучите основы чистой архитектуры: это позволит вам быстрее понимать чужой код и лучше разбираться в своем.
Хотите потренироваться? Попросите AI сгенерировать пример проекта с Bloc — и разберите его построчно. Или обратитесь к статьям.
Не бойся проблем при сборке
При сборке проекта ты скорее всего столкнешься с ошибками компиляции и в 90% случаев это будут ошибки, связанные с Xcode и Gradle. Не нужно паниковать, Flutter достаточно умен и в большинстве случаев предложит тебе решение. Если не было предложено решение или оно не сработало — не беда, первая ссылка в гугле вероятнее всего решит твою проблему. И не забывайте про старый дедовский способ перезагрузки:
flutter clean
flutter pub get
В топку тяжелые среды, работай по четвергам в Visual Studio Code
Среда разработки — твой основной инструмент, ты будешь работать в ней 99% своего времени, а значит она должна быть удобной и комфортной для тебя. Для Flutter есть две основные IDE: Android Studio и Visual Studio Code. Android Studio — мощная, с готовыми тулзами и анализаторами, но тяжеловесная. VS Code — лёгкий, быстрый и гибкий.
В Финаме мы работаем в VS Code — там проще интегрировать CLI-инструменты, автогенерацию кода и кастомные скрипты. Но выбор — это вопрос привычки: рекомендую попробовать обе. Главное, чтобы IDE не тормозила, когда запускаешь hot reload 20 раз в час. Я знаю людей, которые переходили с Android Studio на Visual Studio Code, но не знаю обратных примеров.
Логике в UI не место
Выгружать логику работы приложения (например, сетевые запросы, обработку данных) в методе build() — грубая ошибка. Это ведет к багам, фризам, затрудняет тестирование, нарушает принципы разделения обязанностей.
Используйте стейт-менеджеры. Логика должна быть отделена от UI — это облегчает поддержку, переиспользование и покрытие тестами.
Делите UI на независимые виджеты
Если экран превращается в тысячу строкового монолита — значит пора рефакторить. Разбивайте интерфейс на маленькие, самодостаточные виджеты (например: заголовок, список, кнопки). Это упрощает чтение, тестирование и повторное использование компонентов. И старайтесь ограничивать один экран не больше 150-200 строками кода.
Async — не просто await
Асинхронное программирование в Dart требует внимания:
Оборачивайте важные вызовы в try/catch.
Используйте async/await для читаемого кода; а если используете .then(), не забывайте обработать
