Фронтенд

Вы когда-нибудь видели в консоли сообщение вроде: «Access to fetch at '…' from origin '…' has been blocked by CORS policy»? Это как в том фильме: «Суслика видишь? — А он есть». CORS не бросается в глаза, пока все работает, но в нужный момент пресекает недопустимые действия. Например, чтение ответа на кросс-запрос без разрешения сервера.

Меня зовут Баир, я разработчик в команде fuse8. В этой статье я отвечу на вопросы о том, зачем была создана CORS политика, как она устроена под капотом, почему простого действия типа «поставить заголовок на бэке» может быть мало, и какие безопасные паттерны стоит выбирать во фронтенде.

Полистав различные ресурсы в Интернете и просмотрев множество видео по данной теме, я решил составить наиболее полную картину по данному, не побоюсь этого слова, революционному API, чтобы вы уже сегодня могли начать использовать его в своём проекте!

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

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

Одно из правил - буквально слово в слово - я недавно встретил в одном популярном эссе о написании кода без ошибок (я расскажу об этом правиле позже). Мне стало любопытно, насколько применимы остальные правила со школьного плаката (короткий ответ – да), и есть ли у этого обоснование. Я немного зарылся в литературу, и вот что понял.

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

Меня всё также зовут Андрей Гринблат. В прошлых материалах я рассказывал о построении фотореалистичных изображений трёхмерных фракталов (часть 1 и часть 2). Это — завершающая статья цикла, в ней я разберу визуализацию оболочки Мандельброта, четырёхмерных аналогов множеств Мандельброта и Жюлиа, и рассмотрю гибридные фракталы.

Очень часто на собеседованиях кандидаты слышат вопрос: «В чем разница между HTTP и HTTPS?» И так же часто делают задумчивое лицо, не зная, что ответить. Мы даже как-то писали об этом пост.

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

Да, я его действительно ненавижу. Мне кажется, что команда React'а презирает разработчиков, и я презираю их в ответ. Все их решения направлены на то, чтобы сделать разработку сложнее, медленнее и непредсказуемее. На сегодняшний день они даже умудрились сломать работу JavaScript. Уму непостижимо, почему им это сходит с рук.

Мы переживаем величайший кризис качества программного обеспечения в истории вычислительной техники. Калькулятор теряет 32 ГБ оперативной памяти. ИИ-помощники удаляют рабочие базы данных. Компании тратят 364 миллиарда долларов, чтобы избежать решения фундаментальных проблем.

Команда JavaScript for Devs подготовила перевод статьи о том, почему Google Переводчик может ломать React и другие современные веб-приложения. Причина в том, что расширение вмешивается в DOM, нарушая работу виртуального DOM и вызывая ошибки вроде removeChild и insertBefore. Автор показывает реальные кейсы, обходные пути и поднимает важный вопрос: имеет ли фреймворк право на полный контроль над DOM?

Когда вы работаете с объектами и массивами в JavaScript, может показаться, что они ведут себя странно: изменение одной переменной неожиданно влияет на другую. Все это — следствие работы ссылочных типов данных.

Привет, Хабр! Меня зовут Александр Дудукало, я автор базового курса по JavaScript.  В этой статье я простыми словами расскажу, как работают ссылки, почему это важно знать и как правильно копировать объекты.

На прошлой неделе мы выпустили обновление кроссплатформенной библиотеки контролов Eremex Controls для Avalonia UI. О новых ее возможностях расскажем в этой статье, но уже в рамках нового корпоративного блога нашей компании Эремекс.

Добро пожаловать в ещё одну шпаргалку по React! Но подождите, это не то, что вы подумали — не просто набор случайных примеров кода и банальных объяснений, как в других шпаргалках.

Обещаю, это будет по-настоящему полезно. Мы вместе разберёмся, как работает ReactJS, и как реализованы все его крутые фичи «за кулисами», с помощью интерактивных демо, которые я специально подготовил для вас. Это поможет вам реально понять, как всё устроено, и применять знания на практике.

Это может прозвучать необычно, но развитие полноценных веб-приложений фактически началась с фронтенд-технологий. До разделения кода систем на фронтенд и бэкенд все они были как бы разновидностью сайтов, но с более сложными процессами, выполняющимися “на сервере”. На каждый запрос пользователя, сервером ему отдавался новый документ с такой же шапкой и подвалом. За редким исключением эти интерфейсы выходили достаточно примитивными, ведь каждое действие пользователя заставляло систему сначала немного подумать, и затем нарисовать новую страницу для результативного состояния. Значительные манипуляции с содержимым страницы в браузерах обычно были крайней непроизводительными, да и оказывались сложны для реализации. Изначально HTML-сайты или Web задумывались как упрощенный вариант издательской системы, в основе которой лежала идея "гипертекста” с переходами от одних страниц к другим через ссылки.  

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

Привет, Хабр! Меня зовут Сергей, я фронтенд-разработчик в Rusprofile. Давайте поговорим о работе autocomplete – автозаполнении полей в браузере. 

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

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

Эта статья – небольшая рефлексия на тему autocomplete; о природе проблем, с которыми сталкивается разработчик при работе с этим инструментарием.

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

Фронтенд на Rust — звучит странно? Я написал Telegram WebApp SDK на Rust, совместимый с официальным API, и уже использую его в реальных проектах. В статье — зачем я это сделал, с какими проблемами столкнулся и чем это лучше привычного React.

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

В основе кэширования лежит сокращение лишней работы. Каждый раз, когда браузер, CDN или прокси обращается к серверу за ресурсом, который не изменился, впустую тратятся время и трафик. Когда сервер заново формирует или повторно отдает идентичный контент, это лишь добавляет нагрузки и увеличивает затраты. А при пиковом трафике — например, в "черную пятницу", во время вирусной публикации или DDoS-атаки — такие ошибки стремительно накапливаются и приводят к сбоям всей системы.

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

Меня зовут Александр Марченко. Я руководитель команды Frontend-разработки в ОК. В этой статье я расскажу о особенностях и способах миграции Angular приложения на React, а также поделюсь своим опытом.

Привет, Хабр! Это моя вторая статья и, что ж такое, опять по заезженной теме.

В ней разбираемся в ДЕСЯТИ смертных грехах HR, которые они регулярно совершают по отношению к тем, кого нанимают. Эти ошибки не только портят репутацию компаний, но и обжигают доверие талантливых кандидатов. Разберём главные грехи, которые убивают имидж работодателя и мешают строить крепкие отношения с будущими сотрудниками.

В конце давайте пройдём опрос на тему: "Как замена HR на ИИ повлияет на кандидатов?".

Привет, Хабр! На связи снова Сергей, ведущий фронтенд-разработчик из Центрального университета. В последнее время я преисполнился URL и опять хочу про него рассказать. 

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