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

Привет, Хабр. Я продолжаю рассказывать про неизвестные широкому кругу разработчиков 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 может быть наиболее компактным, гибким, легким и производительным способом создания фронтенд-приложений.

Представьте, что вы разрабатываете новую функцию в приложении, но пока не готовы открыть её всем пользователям. Хочется выложить код на продакшн, но оставить функцию «под замком» до поры до времени. В таких случаях на помощь приходят feature flags (по-русски часто говорят «фича-флаги») — специальный механизм переключения функциональности. Проще говоря, фича-флаг – это пара «ключ – значение (обычно булевое)», которая определяет, активна ли та или иная возможность в приложении. В коде это проявляется как условие: если флаг включён, выполняется новая логика, а если выключен – используется старое поведение. С помощью фича-флагов можно не только скрывать незавершённые функции за условными операторами, но и гибко управлять их постепенным запуском для аудитории (например, включать новую фичу только для X% пользователей).

На первых порах разработчики часто реализуют флаги «локально» – в виде переменных конфигурации, констант или параметров в коде приложения. Такой локальный флаг хранится и меняется непосредственно в приложении (или на сервере, где оно запущено). Этот подход может сработать в небольшом проекте, но в масштабе команды и множества окружений у него быстро обнаруживаются недостатки. Во-первых, если значение флага жёстко прописано в конфигурации или коде, для его изменения зачастую требуется выкатывать новую версию приложения (то есть делать повторный деплой). Возможность динамически «покрутить тумблер» теряется, и смысл фич-флагов частично сводится на нет. Во-вторых, появляется рассинхрон между окружениями: например, в продакшене новый флаг включён через удалённую конфигурацию, а в тестовой сборке по умолчанию выключен. В итоге тестировщикам приходится вручную приводить локальные значения флагов в соответствие с продакшеном, что неудобно и чревато ошибками. Кроме того, без общего подхода трудно отслеживать, какие флаги существуют в системе, кто и когда их включал, и на что они влияют.

Каждый год 4 апреля веб-разработчики и дизайнеры отмечают неофициальный, но очень символичный праздник — День 404. Это повод вспомнить о культовой ошибке, которая знакома каждому пользователю интернета, и отметить креативность, с которой её можно обыграть.

С вами Дима, старший фронтенд разработчик в Surf, и сегодня мы разберём React 19 — новую версию одной из самых популярных библиотек для создания пользовательских интерфейсов. 

Вперёд, к подробному разбору основных фичей, оценке их плюсов и минусов и исследованию будущего React. 

Всем привет!

Это очередная статья из цикла, где мы разбираем различные способы применения ИИ-агентов с RAG — методом оптимизации работы и вывода LLM агента благодаря добавлению в контекст базы знаний. Проще говоря, мы даём модели какой-то объём знаний, по которому она способна работать. Это может быть как документ, по которому будет вестись поиск релевантных данных, так и база данных.

Использование подхода может быть полезно в различных задачах. Такая модель сможет работать с актуальными для вас данными, даже если память самой LLM ограничивается на неактуальных данных какого-нибудь 2022 года.

Сегодня будет рассматриваться очередной веб-интерфейс для взаимодействия с ИИ. И это будет FlowiseAI. Я постараюсь наглядно показать установку и работу с ним так, чтобы смог разобраться даже новичок.

С вами снова Юля, системный аналитик из EvApps и мы продолжаем разбираться в технологии WebSocket. В первой части (WebSocket для начинающих системных аналитиков: просто о сложном. Часть 1), мы познакомились с основами WebSocket, а теперь давайте заглянем под капот реального сайта, например, криптобиржи. Попробуем понять, как работает этот сложный механизм: что происходит, когда вы видите мгновенно меняющиеся котировки и графики, и что происходит “за кулисами”.

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

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

Меня зовут Сергей Шахов, я долгое время занимался развитием корпоративного фреймворка в нашей компании. Наш фреймворк помогает создавать командам пользовательские интерфейсы, иными словами, это фронтенд-фреймворк.

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

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

После долгого перерыва читайте все главные новости из мира Joomla с момента выхода Joomla 5.2.0 (15 октября 2024 года) в одной статье. Но для удобства в названии ограничимся первым кварталом 2025 года. Традиционно наш дайджест обозревает новости, расширения, шаблоны и статьи из мира Joomla.

Всем привет, меня зовут Артур Богданов. Я занимаюсь проектированием, разработкой и оптимизацией высоконагруженных веб-приложений на ASP.NET Core.

Хочу поделиться с сообществом своей разработкой, которая позволяет использовать несколько фоновых задач (или «раннеров») для отложенной обработки консолидированных данных. Раннеры построены на шаблоне PubSub для асинхронного ожидания новых задач, что делает этот подход более реактивным, но менее ресурсоемким.

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

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