Обновить

Фронтенд

Сначала показывать
Порог рейтинга
Уровень сложности

Как мы пытались сделать фреймворк для фронтенда которого можно выучить за 5 минут и что из этого вышло

Уровень сложностиСредний
Время на прочтение4 мин
Количество просмотров404

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

Мы задались вопросом: что действительно нужно знать, чтобы создавать UI?

Оказалось, всего четыре концепции: компоненты, состояние, эффекты и DOM. Все остальное — синтаксический сахар и edge cases.

Так родился наш эксперимент: упаковать эти основы в максимально простую модель. Не изобретать новое, а отшлифовать существующее.

Иногда прогресс — это не добавление возможностей, а смелость убрать лишнее.

Читать далее

Новости

Грани полиморфизма в React: паттерн as

Уровень сложностиПростой
Время на прочтение5 мин
Количество просмотров932

Всем привет! Сегодня я возвращаюсь с новой порцией TypeScript- и React-магии. Вместе разберем полиморфизм в React, а именно — паттерн as. Зачем он нужен, как его прикрутить без багов и почему это сделает ваши компоненты в разы круче. Как обычно — всё под катом.

Посмотреть

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

Уровень сложностиСредний
Время на прочтение10 мин
Количество просмотров430

Привет! Меня зовут Алексей Гомелевский, я frontend-разработчик в Garage Eight. Моя команда занимается улучшением взаимодействия пользователей с продуктом, и недавно мы решили реализовать комментарии. В этой статье расскажу, как выбирали между решением из коробки и собственной разработкой, с какими сложностями столкнулись и как на базе комментариев создали чаты. 

Читать далее

Кастомные WPF-контролы, часть 2: ComboBox с фильтрацией содержимого, TimePicker, DateTimePicker

Уровень сложностиПростой
Время на прочтение11 мин
Количество просмотров376

В этой статье я продолжу разбирать нюансы разработки WPF-контролов. В прошлой части мы рассмотрели, как сделать свой стиль для кнопки и переключателя. Сейчас разберем ComboBox и DateTimePicker.

Читать далее

Пять лет спустя: почему мы всё переписали с нуля

Время на прочтение8 мин
Количество просмотров6.5K

Пять лет назад на Хабре мы писали о Web Camera Pro — и казалось, что впереди только апдейты, оптимизации и новые функции. За это время изменилось многое — и не только в технологиях, но и в законодательстве.

Как мы наступили на те же грабли

Когда в 2015 году мы начинали разработку системы для видеонаблюдения, Qt 5 казался идеальным решением. На первый взгляд всё выглядело просто: берём готовые библиотеки, оборачиваем в красивый интерфейс, добавляем AI-аналитику — и готово.

На Qt было создано множество известных программ для видеонаблюдения, и мы — как и десятки команд по всему миру, поверили в его универсальность.

“Один фреймворк, любая платформа” — звучало как музыка.

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

Qt позволял быстро собрать прототип, но, когда речь заходила о стабильности, о 24/7-нагрузке, о реальной работе с потоками и камерами, его недостатки становились критичны.

Читать далее

TypeScript: краткий гайд по дистрибуции типов

Уровень сложностиСредний
Время на прочтение5 мин
Количество просмотров1.8K

Привет, это Костя из Cloud.ru, я вернулся после долгого перерыва, чтобы снова открыть цикл коротких статей про Typescript. В этот раз поговорим о важном — дистрибуции типов. Зачем она вообще нужна, когда и как применяется, а также как работает. Как обычно интересное — под катом.

Читать

Я устал кликать по HH — отдал это Gemini и получил 7 инвайтов за 3 дня

Уровень сложностиПростой
Время на прочтение3 мин
Количество просмотров1.8K

Привет, Хабр!

Давайте честно, поиск работы — это ад. Я инженер и я ненавижу рутину. А поиск работы — это 90% тупого кликанья.

Открыть 50 вкладок — 50 раз написать «Здравствуйте‑ меня заинтересовало...» — 50 раз скопировать‑вставить. Это выжигает.

Можно конечно написать автокликер, который будет спамить «пустышками». Но рекрутеры не дураки — такие отклики летят в мусор. А «ручной» режим‑ это 3–4 часа в день.

Я понял — что должен быть третий путь. Не просто автоматизация — а умная автоматизация.

Читать далее

Я CSS-программист: «Магия» CSS или как превратить язык стилей в Тьюринг-полный ад

Уровень сложностиПростой
Время на прочтение10 мин
Количество просмотров6.9K

Представьте, что вы — разумный человек. Вы знаете, что CSS — это язык стилей. Cascading Style Sheets. Для оформления. Не для логики. Не для программирования. Просто цвета, шрифты, отступы.

А потом вы заходите на CodePen.

И там кто-то сделал полностью рабочий калькулятор. На чистом CSS. Без JavaScript.

Читать далее

Веб. К черту фреймворки! Пишем свой starter-kit с роутером и сторами. Часть 3

Уровень сложностиСложный
Время на прочтение13 мин
Количество просмотров2.2K

Последняя часть по созданию своего starter-kit.

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

Читать далее

Обзор возможностей для разработчиков при работе с VK Mini Apps

Уровень сложностиСредний
Время на прочтение12 мин
Количество просмотров592

В 2025 году аудитория ВКонтакте достигла 92,5 млн пользователей в месяц. Пользователи ВКонтакте активно используют все внутренние сервисы, в том числе мини-приложения и игры, которые любой внешний разработчик может представить многомиллионной аудитории с помощью VK Mini Apps.

Меня зовут Никита Васюков, руководитель команды спецпроектов в направлении разработки игр и приложений. И в этой статье я расскажу, что такое VK Mini Apps, какие возможности предоставляет платформа и как мы её используем для своих задач.

Читать далее

HTML и CSS антипаттерны

Уровень сложностиСредний
Время на прочтение7 мин
Количество просмотров6.4K

Привет, Хабр!

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

Только по какой-то причине сложно найти антипаттерны по языкам HTML и CSS. Может, потому что они не языки программирования?

В общем, у меня появилось желание это исправить. Я собрал несколько примеров, которые лично отношу к антипаттернам. Возможно, это субъективно, но надеюсь, что нет.

Давайте посмотрим, что я вам подготовил.

Читать далее

Полный обзор функциональности российского трекера ошибок Хоук

Уровень сложностиПростой
Время на прочтение22 мин
Количество просмотров1.4K

Hawk — это open-source трекер ошибок, разработанный в России. Позволяет отслеживать ошибки в веб-приложениях, API и мобильных сервисах. В этой статье подробно рассмотрим функциональность, которая сегодня доступна пользователям Хоука — от регистрации до продвинутых SDK-функций и планов на будущее.

Читать далее

Регулярные выражения в плагине «Аналитика» для Р7 офис

Уровень сложностиПростой
Время на прочтение6 мин
Количество просмотров283

Если обычный человек посмотрит на исходный код программы, написанный на популярных языках вроде JavaScript или Python, то по контексту и знакомым словам он сможет понять, что происходит. Но регулярные выражения со стороны похожи на случайный набор символов – будто кошка прошла по клавиатуре. В этом случае даже код на Ассемблере выглядит более читаемым.

Мы в «ЛАНИТ-Интеграции» не понаслышке знаем, как бывает сложно собрать воедино данные из нескольких источников, привести их к общему виду и создать на их основе единую таблицу с полным отчетом. Для решения этой задачи был создан плагин «Аналитика» для Р7-офис как инструмент автоматизации для выгрузки и обработки данных. В этой статье в блоге ЛАНИТ хочу рассказать вам о новых возможностях поиска данных в плагине в сочетании с функционалом RegExp (они же регулярные выражения или просто регулярки).

Читать далее

Ближайшие события

Разбираемся с композитным видеосигналом NTSC, и стоит ли изучать его в 2025 году. Часть 1

Уровень сложностиСредний
Время на прочтение18 мин
Количество просмотров4.5K

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

Производительности микроконтроллера хватает для генерирования сигнала с достаточной степенью дискретизации, а цифроаналоговый преобразователь можно собрать, используя минимум электронных компонентов. Естественно, качество такого композитного видеосигнала будет невысоким, но думаю, эффект «Wow» и почва для экспериментов будут обеспечены.

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

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

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

Кому интересно скоротать несколько вечеров, хочется улучшить свои знания и умения, добро пожаловать под кат.

Читать далее

Гайд по Веб Компонентам (Web Components)

Уровень сложностиПростой
Время на прочтение6 мин
Количество просмотров4.2K

Компонентно-ориентированный подход уже давно зарекомендовал себя как отличная практика разработки. Его массовая популярность пришла вместе с такими библиотеками, как React и Vue. Создавая компоненты, мы чётко разграничиваем логику, формируем зоны ответственности и эффективно боремся с дублированием кода. Обычно компонент отвечает за рендеринг HTML-разметки и динамически обновляет её в зависимости от своего состояния. Кроме того, ключевую роль играют механизмы контроля жизненного цикла, например, обработка этапов: «компонент присоединился», «компонент обновился» и «компонент был удалён». Это база, но часто существует и множество других хуков.

Раньше для работы с этой парадигмой мы были вынуждены использовать React, Vue или аналогичные фреймворки. Однако сегодня можно обойтись без дополнительных библиотек и обязательной сложной сборки, потому что компоненты доступны «из коробки» в современных браузерах. Да, я говорю о Веб-компонентах. Если быть точнее, о Пользовательских элементах (Custom Elements), поскольку «Веб-компоненты» — это скорее набор стандартных технологий, позволяющих создавать эти самые элементы.

Читать далее

Грядет htmx — fetch()ening. Когда приходится выпускать версию 4.0, потому что пообещал, что версии 3.0 никогда не будет

Уровень сложностиПростой
Время на прочтение4 мин
Количество просмотров2.4K

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

Как мы помним, одним из важных обещаний при переходе с версии 1.0 на версию 2.0 была заморозка API. Карсон Гросс, создатель htmx, гарантировал, что больших изменений больше не будет - никогда. Все изменения и дополнения выносились в расширения.

Несмотря на большой интерес и воодушевление со стороны фронтэнд сообщества (статьи на habr: тут, тут, тут и тут), адаптация htmx затормозилось в последние несколько лет из-за некоторых, скажем так, спорных решений и ригидности API. Однако изменение ситуации было маловероятным, что привело к созданию альтернативных HATEOAS фреймворков разной степени успешности.

И поэтому мне было приятно прочитать, что 1 ноября 2025 года Карсон Гросс признался: «Я говорил, что не будет версии 3. Но ничего не говорил про версию 4». Так с юмором началась история htmx 4.0, получившей подзаголовок The fetch()ening.

Читать далее

URL как контейнер состояния

Уровень сложностиПростой
Время на прочтение11 мин
Количество просмотров4.3K

Пару недель назад, когда я писал пост The Hidden Cost of URL Design, мне нужно было добавить подсветку синтаксиса SQL. Я направился на веб-сайт PrismJS, пытаясь вспомнить, можно ли добавить его в качестве плагина. Меня утомило количество вариантов на странице скачивания, поэтому я вернулся к своему коду. Поискав в файле PrismJS, я нашёл в его начале комментарий, содержащий URL:

/* https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript+bash+css-extras+markdown+scss+sql&plugins=line-highlight+line-numbers+autolinker */

Я совершенно забыл об этом. После нажатия на URL меня перенаправило на страницу скачивания PrismJS, где все чекбоксы, раскрывающиеся меню и опции были заранее выбраны и полностью соответствовали моей конфигурации. Подобраны темы. Настроены языки. Включены плагины. Всё идеально было воссоздано из этого единственного URL.

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

Я задумался: как часто мы, фронтенд-разработчики, забываем об URL как об инструменте управления состоянием? Мы пытаемся использовать для этого всевозможные абстракции: глобальные хранилища, контексты, кэши, забывая при этом одну из самых древних и изящных фич веба: скромный URL.

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

Читать далее

Опыт SEO + PWA оптимизации кода на NextJS

Время на прочтение3 мин
Количество просмотров2.6K

GitHub

Я собрал production-ready архитектуру для максимизации SEO и PWA функциональности в Next.js приложениях. Система включает централизованную конфигурацию, универсальную генерацию метаданных, JSON-LD схемы для Rich Snippets, интеллектуальное кеширование Service Worker, динамическую sitemap, robots.txt, ISR для свежести контента и security headers. Все компоненты работают синергично, обеспечивая быструю загрузку, офлайн функциональность, правильное индексирование и доверие поисковых систем. Система автоматически применяется на каждую новую страницу без дополнительного кода. Создал это потому, что AI контент наводнил интернет, техническая оптимизация стала критичной, и никто не собирал это всё вместе в одно рабочее решение.

Читать далее

Делаем Electron UI более «нативным». Простой гайд из 15 шагов

Уровень сложностиПростой
Время на прочтение3 мин
Количество просмотров6.3K

Ниже я приведу примеры, как пустить пыль в глаза юзерам можно улучшить ситуацию с ощущением чужеродности приложения среди других, написанных на честном Gtk, китами из XCode, Windows UWP и прочим с 0% вайбкодинга

Читать далее

Просто используй кнопку

Уровень сложностиПростой
Время на прочтение3 мин
Количество просмотров8.7K

Мне часто доводится вести странные споры с фанатами фреймворков о том, действительно ли <div> «столь же хорош», как и <button>.

Спойлер: нет. И давайте выясним, почему.

Читать далее
1
23 ...