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

Микрофронтенд на пальцах с 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.

Обстоятельно и подробно, на конкретных примерах рассказываю как спроектировать и реализовать API, за которое потом не будет стыдно.

Когда-то я думал, что успех — это прямая линия вверх. Ты молод, амбициозен, голоден, у тебя горят глаза, и ты искренне веришь, что сможешь всё. Ты начинаешь действовать немедленно. Осваиваешь технологии, создаёшь алгоритмы, пишешь код, запускаешь свои первые онлайн-проекты. Радуешься первым пользователям, первым деньгам, первым успехам — и ловишь себя на мысли: «Вот оно. Кажется, я ухватил бога за бороду!»

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

Ты морально выгорел, твой банковский счёт опустел, а за окном — не Кремниевая долина, а грустное зрелище провинциального серого городка.

Никто не предупреждал, что успех может быть временным, а падение - болезненным и очень личным.

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

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

Всем привет. Некоторое время назад стояла задача интегрировать виджет CDEK в сайт на .NET. Код виджета доступен на github: фронт (ts) + бэкенд (php). При переносе на .NET с фронтом проблем нет. Кроме того, есть готовый скрипт, который можно подключить с cdn. Но при этом есть существенное ограничение для бэкенда: данный скрипт работает только с php.

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