Как стать автором
Обновить
213.85

JavaScript *

Прототипно-ориентированный язык программирования

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

От React всё также веет безумием, но все об этом молчат

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

Недавно работал над хобби-проектом, который описал в другой своей статье. В процессе его реализации у меня возникло желание чиркануть пару абзацев о том, почему React — отстой, но в итоге я не смог удержаться и решил высказаться по полной…

Так что вот она полноценная статья, ещё больше той, из которой она родилась. Здесь я подробно опишу все проблемы React и поясню, почему это может не быть виной разработчиков.

Читать далее

Новости

Vue: Composables и TS это вам не Mixins и JS. С ними сложнее

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

Пришел к хитрому паттерну. Делюсь.

Будет полезен тем кому нравиться или приходится работать с Vue.
В подходящей ситуации он сэкономит кучу времени и поможет избежать дублирования кода.

Поехали!

Как я подружил Yandex Cloud и Gemini API без миграции на зарубежные сервера

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

Когда я начинал писать Node.js-сервис, который должен был интегрироваться с LLM-моделью, я уже понимал, что доступ к некоторым зарубежным API из России может быть проблемой. Именно поэтому моим первоначальным выбором была модель от Yandex Cloud — Yandex GPT.

Но после того как я и мои товарищи немного пообщались с ней, стало ясно, что Yandex GPT нам не подходит. Её ответы были слишком неестественными, «нечеловеческими» — особенно это было заметно в нашем конкретном кейсе. Поэтому пришлось искать альтернативу среди зарубежных моделей. Вариант обучать собственную модель отпал сразу — опыта у меня в этом не было, а искать кого-то, кто сможет это сделать, не было времени, так как хотелось быстро запустить. Так выбор пал на Gemini API от Google, о котором было много позитивных отзывов.

Однако это означало, что нужно было как-то решить проблему доступа из России, ведь мой сервис размещён именно в Yandex Cloud.

Читать далее

Эксперты шокированы: язык программирования на основе кликбейтных заголовков

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

Кликбейтные заголовки, давайте признаемся, надоели всем. Сейчас они встречаются даже на Хабре. Программист Линус Ли, судя по всему, испытывал те же чувства и решил действовать по принципу «не можешь победить — доведи до крайности». В результате он создал Tabloid — полноценный язык программирования, где весь код пишется в стиле сенсационных заголовков.

Представьте язык, где вместо привычного function hello() вы пишете DISCOVER HOW TO HELLO WITH (англ. «узнайте, как сделать... с помощью»), а вместо return используете SHOCKING DEVELOPMENT! (англ. «шокирующее развитие событий»). А еще каждый листинг должен заканчиваться фразой PLEASE LIKE AND SUBSCRIBE.

Звучит как странная шутка? Да, но этот язык реально работает, имеет собственный интерпретатор и позволяет писать полноценные программы.

СЕНЬОРЫ СКРЫВАЛИ ЭТОТ ЯЗЫК….

Обходим CSP nonce через дисковый кеш браузера

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

Эта статья описывает изощренную технику обхода Content Security Policy (CSP) на основе nonce-значений через эксплуатацию механизмов кеширования браузера. Автор демонстрирует, как комбинация CSS-инъекций, CSRF-атак и особенностей работы bfcache и дискового кеша может привести к выполнению произвольного JavaScript-кода даже при наличии строгой CSP.

Читать далее

Как я перенёс задачи из Яндекс.Трекера в JIRA с сохранением всего — от чек-листов до ссылок в комментариях

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

Когда руководстворешило перевести проектный трекинг с Яндекс.Трекера на JIRA, мы быстро поняли: простого «экспорта‑импорта» не будет. Ни одно из готовых решений не справлялось с задачей полноценно — а именно с сохранением всей истории, авторства, чек‑листов, вложений, связей, ссылок на другие задачи и пользователей, и даже оригинальной нумерации задач из Яндекс.Трекера.

Что ж, вызов принят. Ниже расскажу, как я за 3 месяца написал систему, которая перенесла всё — до последней запятой в комментарии.

Читать далее

Интерактивная карта Республики Коми с отображением социально-экономических показателей

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

Делюсь опытом как я сделал интерактивную карту Республики Коми: от QGIS и D3.js до графиков и API Wikidata. Карта визуализирует социально‑экономические показатели районов и населённых пунктов, поддерживает масштабирование, позволяет переключать слои, выбирать тёмную и светлую темы, а также получать справочную информацию об объектах.

Читать далее

Быстрый старт: пишем фреймворк для фронтенда

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

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

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

Читать далее

Организация селекторов для тестирования

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

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

В этой статье мы рассмотрим, как правильно организовать селекторы для тестирования веб-приложений.

🧪🧪🧪 TEST_ID="Читать далее" 🧪🧪🧪

Сотворение мира за 20 минут на JavaScript, или минималистичная модель эволюции

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

Впервые про моделирование эволюции я прочитал в 13 лет в статье «Жить и умереть в компьютере» (Техника — Молодежи, №5 1993 год). Она произвела на меня столь неизгладимое впечатление, что я тут же загорелся идеей создать что-то подобное.

Однако никак не удавалось проработать законы мира. Как организмы будут «смотреть» на окружающий мир? Как общаться? Как атаковать? Как кушать друг друга? Наконец, как будет устроен их «мозг»? Реализовать виртуальную машину, как в статье из журнала, или использовать что-нибудь проще, типа конечного автомата или схемы из блоков И-НЕ?

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

Запустить эволюцию

Слайдер с бесконечной плавной прокруткой на JavaScript

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

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

Приблизительный результат следующий:

Читать далее

Нюансы кроссплатформенной разработки на Vue и React

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

Этот документ — не просто список, а выжимка боли, шишек и неожиданных открытий, с которыми сталкивается почти каждый фронтендер. Неважно, Vue ты выбрал или React, если твое приложение должно работать в браузере на айфоне пятилетней давности — добро пожаловать в клуб. Здесь будет всё: от странностей с Safari до неожиданных проблем с синтетическими событиями.

Нюансы мобильных браузеров и PWA

iOS Safari не поддерживает Notification API без установки PWA

Проблема: На iOS ты не можешь просто вызвать new Notification(...) — API будет недоступно, пока пользователь не установит сайт как PWA на домашний экран. Так же, в Safari просто не будет доступен класс Notification, браузер его просто не имплиментирует на этапе браузерного окна.

Решение:

- Чтобы проверить можно ли использовать уведомления можно написать следующую проверку:

typeof window !== 'undefined' && 'Notification' in window;

🔗 [MDN — Notification API](https://developer.mozilla.org/en-US/docs/Web/API/Notifications_API)

🔗 [WebKit — Push Notifications](https://webkit.org/blog/12945/meet-web-push-on-ios/)

Читать далее

Введение в WebRTC

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

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

Читать 📞📞📞

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

Реактивные системы: возможно ли отслеживать зависимости в асинхронном коде?

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

В реактивных системах существуют специальные функции, такие как watchEffect во Vue или autorun в MobX, которые умеют автоматически отслеживать зависимости и перезапускать «эффект» при их изменении. Принцип их работы следующий:

Читать далее

Прощай, reCAPTCHA! Как я защитил формы входа с помощью бесплатной и невидимой CAPTCHA от Cloudflare

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

Привет, Хабр! На связи разработчик Peakline — аналитической платформы для Strava. Сегодня я хочу поделиться опытом внедрения Cloudflare Turnstile в веб-приложение на FastAPI.

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

Читать далее

Магия чисел в System Design: эти формулы спасут вас от банкротства и помогут оптимизировать вашу систему

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

При проектировании систем, обязательным этапом является расчет нагрузки и стоимости на вашу IT-Систему. Давайте разберемся что это за этап и почему он так важен. А также вместе посчитаем основные показатели нагрузки и договоримся о стоимости решения.

Читать далее

От магии до понятной структуры: разбираемся, как работает Change Detection в Angular

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

В Angular любое изменение в компоненте, которое отображается на экране, является результатом работы механизма отслеживания изменений (Change Detection, CD). За этим процессом стоит Zone.js, который можно представить в роли дирижера, сообщающего компонентам о необходимости обновить DOM.

Zone.js не запускает CD сам. Он лишь создает контекст, в котором Angular потом может его запустить. Его задача только уведомлять Angular о завершении асинхронных операций, после чего Angular решает, нужно ли проверять изменения.

Чтобы понять важность такого подхода, нужно учитывать особенности JavaScript. В JavaScript асинхронные операции, такие как setTimeout или fetch, разрывают стек вызовов. Это значит, что callback-функция, выполняемая после завершения асинхронной операции, не имеет информации о контексте, в котором она была вызвана. Для фреймворка, который отслеживает изменения, это создает определенные трудности: как узнать, что асинхронная операция завершилась и, возможно, изменила данные?

Заглянуть под капот

Скриншот-тестирование фронтенда: руководство по применению в 2025 году

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

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

Часто приходилось видеть тесты опосредовано проверяющие визуальное отображение html-элемента, что-то в стиле expect(elem.classList.contains("visible")).toBe(true). Говорить о надежности таких тестов конечно-же не приходится, так как изменив содержимое css-селектора стилизующий данный класс, данный тест все еще будет зелёным, несмотря на то что по факту элемент будет скрыт.

Результат от подобных тестов вполне ожидаемый. Обновили версию UI-библиотеки и на всем проекте поехала верстка? Тесты зелёные. Случайно переопределили CSS-переменную и теперь вместо приятной тщательно подобранной дизайнером гаммы цветов вы видите лишь кислотно-вырвиглазную солянку? “Бывает, надо было ручками протестировать” - скажет менеджер.

Решить данную проблему нам поможет добавление скриншот-тестирования на проект.

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

Читать далее

Как выжить в мире сложных интерфейсов в 2025-м: 7 работающих рецептов от React и CSS до дизайн-систем

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

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

Для МойОфис как мультипродуктовой экосистемы со сквозными сценариями — все эти вопросы очень актуальны! Поэтому на прошлой неделе JS-еры, дизайнеры и UX-исследователи нашей и других компаний собрались на митапе под названием Frontend&UX Talks, чтобы обсудить эти и другие проблемы современного веба. Получилось интересно, драйвово и даже сказочно! (и я в прямом смысле этого слова :-))

Под катом расскажем в 7 тезисах, к каким выводам пришли и как именно: поехали!

О фронтенде в 2025-м году мы поняли, что...

Понятный и простой код — куда важнее, чем кажется

Примитивы это сказка! (причем буквально...)

Реактивное программирование актуальное и удобное! Но не для всех...

Следить за CSS обновлениями каждый квартал – базовый минимум

Темизация это нелегко, но есть лазейки!

Редизайны продуктов – это не страшно! (ну почти...)

За сложными интерфейсами – глаз да глаз...

Читать далее

Гайд на полиморфизм. Что там под капотом?

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

В прошлой статье мы рассмотрели теоретическую основу такого понятия как полиморфизм. Теперь же перейдем к рассмотрению что там «под капотом».

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

Вклад авторов