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

Привет! Я Игорь Кечайкин, руководитель группы разработки во Frontend-команде Flocktory. Недавно, решая задачу, связанную с API WebUSB для Fingerprint-атрибуции пользователя, задался совершенно не связанным теоретическим вопросом: а как создать с этим API  драйверы на JavaScript?

Чтобы разобраться, изучил спецификацию API WebUSB, а теперь принёс на Хабр выжимку самых важных элементов. В статье я расскажу о принципах работы решения и том, что с ним делать веб-разработчику, который хочет напрямую реализовать на сайт функцию, например, 3D-принтинга с пользовательских девайсов. А также вы узнаете, насколько это безопасно — для сайта, внедряющего API, и для девайсов юзера.

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

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

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

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

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

В статье детально рассмотрим интересный вектор атаки на приложения, использующие OAuth/OIDC, разберем, какие предусловия для этого нужны, и увидим, что они не так недостижимы, как может показаться на первый взгляд. Узнаем, что такое «прерывание OAuth flow» и как его применять, затронем использование паттерна Backend‑for‑Frontend и способы реализации PKCE для confidential clients, попутно проверив, помогают ли они защититься от рассматриваемой атаки. Взглянем и на другие существующие рекомендации и предлагаемые лучшие практики, а также подумаем над прочими мерами защиты, которые действительно могут помочь. Все это с примерами, схемами и даже видео.

Материал будет интересен как для занимающихся разработкой приложений, так и для представляющих атакующую сторону.

Привет! Меня зовут Дмитрий, и я уже много лет работаю с TypeScript. За это время я был частью разных команд с разным уровнем владения этим языком, в том числе тех, кто только готовился перевести проект с JavaScript. И нередко я замечал, что разработчики воспринимают TypeScript не как инструмент, упрощающий работу, а как рутинную обязанность, которая лишь замедляет процесс. В этой статье я расскажу, как сделать TypeScript своим союзником и заставить его работать на вас, а не против.

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

Расслабьтесь: я не собираюсь грузить вас сложными терминами или вдаваться в подробности алгоритмов криптографии. И уж точно не стану рассказывать очередные байки про “убийцу” Uber или про новую эпоху Web3, которую нам обещают уже который год. Нет.

Я просто хочу поделиться с вами своими мыслями — как разработчик, который непосредственно имеет дело блокчейном. Как человек, который не только разрабатывает смарт-контракты, но и занимается проектированием и математическим обоснованием экономических моделей. Хочу вместе с вами порассуждать на тему: 

Перед нами действительно технология будущего — или всё это масштабный скам, который затянул в себя весь мир?

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

Пыль в глаза.

Для начала давайте разберёмся — чем сегодня заполнено информационное пространство в криптосекторе? Чем мы вообще подпитываем свои познания в этой сфере? Что мы смотрим, читаем, на кого ориентируемся?

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

Логирование является одним из ключевых и важнейших элементов разработки и эксплуатации приложений. Умение правильно вести журнал логов — ключ к эффективной отладке и мониторингу приложений. Оно дает ценную информацию всей цепочке заинтересованных лиц: от разработчиков и системных администраторов до руководителей бизнеса.

В статье рассмотрен де-факто стандарт логирования — модуль logging в Python. Я дам общие рекомендации по его настройке и опишу практики применения модуля, подходящие для большинства случаев.

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

В этой статье будет обзор online менеджера паролей и конфигов для разработчиков, который помимо управления еще может шифровать данные, причем даже в двух режимах. Один безопаснее другого. Стало интересно? Добро пожаловать под кат.

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

Если всё сделано правильно, вы сможете разрабатывать и поддерживать весь проект, используя только 6–8 основных цветов и их оттенков.

Может ли браузер справиться с миллионом элементов? Если вы когда-нибудь пробовали рендерить в браузере миллион элементов <div>, то знаете, что происходит — он вылетает, зависает и перестаёт реагировать.

Недавно мы выпустили фичу, привлёкшую большое внимание — загрузку и визуализацию до миллиона спанов на нашей странице детализации трассировок. Это вызвало любопытство у пользователей и разработчиков, поэтому многие начали задавать вопрос: как нам это удалось?

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

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

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

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

Сейчас гайки закручивают всё больше, а бизнес продолжает находить решения. Компании используют несколько стратегий, чтобы публиковать приложения на iOS и удерживаться там подольше. Рассказываем, как это делают.

Привет, Хабр. Я продолжаю рассказывать про неизвестные широкому кругу разработчиков CSS фишки. Я отбираю их так, чтобы они были полезны в разного рода проектах. Неважно, верстаете ли вы сайт для малого бизнеса или создаёте супермодное React приложение. Они поддерживаются большинством браузеров. Отдельно отмечу, что я не считаю IE11 современным браузером. По этой причине я не учитывал его.

Сегодня мы рассмотрим:

• как можно избежать длинных значений для свойства transform;
• можно ли побороть неоднозначность медиа-запросов;
• малоизвестное и полезное свойство при работе с «гридами»;
• какой нюанс вы можете не знать про свойство align-content;
• древнейшее свойство, помогающее улучшить взаимодействие пользователя клавиатуры с интерфейсом.

Больше не буду затягивать. Давайте посмотрим, что я вам подготовил.

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

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

Именно такие ожидания я связывал с Next.js — опенсорсным фреймворком для веб-разработки, созданным и управляемым компанией Vercel. Vercel — это облачный провайдер, предлагающий управляемый хостинг Next.js как услугу.

Микрофронтенд на пальцах с module federation 2.0. Как собрать микрофронты из кубиков без магии по шагам.

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

В свободное от работы время зумеры-айтишники пилят игру в Telegram Mini App, и нет, это не тапалка!

Про игру
 
Может быть вы помните, а может и не знали, но в 80-е была популярна элегантная стратегическая игра Trax. 

Ее придумал Дэвид Смит – дипломированный бухгалтер, семьянин, бизнесмен и даже автор песен. Он опубликовал более 20 игр, но считает Trax своей лучшей придумкой. 
Вокруг неё формировались клубы в разных странах, организовывались турниры по электронной почте и даже чемпионаты мира. Из года в год Trax стабильно входил в топы лучших игр на протяжении 80-х и получал многочисленные награды.

И вот спустя годы давно запылившаяся, но когда-то популярная игра Тракс вдруг попалась моему мужу Кириллу, точнее его другу ака одногруппнику из ИТМО, при очень интересных обстоятельствах. Как-то раз он попал на комиссию по отчислению в ИТМО, где случайным образом попадался один из двух билетов:
первый - сделать бесконечные крестики нолики, где нужно сложить диагональ в 10 крестиков (по крайней мере так запомнил мой муж), а другой бесконечный Тракс в консольном варианте. Посмеялись, поиграли и затянуло. Тогда игра была доступна только в двух вариантах: настольная и ПО на Винду. Возможности поиграть онлайн не было, за исключением изощренных способов, например транслировать экран и под диктовку выставлять ходы оппонента или через TeamViewer. И тогда в голове Кирилла появилась мысль – а почему бы не запилить веб-версию Тракса.

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

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

Пару недель назад меня попросили помочь на техническом собеседовании для Senior/Lead backend-разработчика и поделиться опытом. В процессе я формализовал несколько правил, которых придерживаюсь при проверке кандидатов. Чем я и хочу поделиться.

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

IF-Statement - это конструкция для некоторого условного выполнения кода. Она позволяет выполнить определенный блок кода в зависимости от того истинно или ложно некоторое условие и согласно официально спецификации ECMAScript, syntax if-statement можно записать как:

Почти — потому что используется всего две функции из библиотеки:

Создать элемент DOM

Обновить элемент DOM

Эта библиотека упрощает использование нативных функций DOM, таких как createElement и replaceChild. Библиотека Fusor направлена на то, чтобы сделать эти функции проще и компактнее.

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