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

К нам обратился заказчик, который хотел улучшить архитектуру высоконагруженного ресурса на основе Moodle. Сайт имел привычку падать при высокой нагрузке. Ничего необычного, подумали мы. Берем. 

Нетривиальность задачи оказалось в том, что кейсов инсталляции сервисов Moodle на ресурсы с нагрузкой >10 тыс. человек нет ни у Яши, ни у других сервисов, к которым мы привыкли. Из коробки ничего не работало, документации тоже не нашлось. Предыдущий исполнитель с задачей не справился и оставил сервис в печальном состоянии.

Срок выполнения задачи  – 2 месяца, что добавило остроты проекту перед Новым годом…

Нагрузочное тестирование API без использования UI

В этой статье поговорим о Нагрузочном тестировании при помощи JMeter-Java-Dsl и реализуем наш первый нагрузочный тест для API с генерацией динамических значений.

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

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

В настоящее время существует ряд различных инструментов на базе ИИ, которые могут помочь дизайнерам создавать более качественные пользовательские интерфейсы и включают в себя такие аспекта ADI как:

Привет, Хабр! Меня зовут Никита Дубко, я — руководитель службы разработки и пятый голос подкаста «Веб-стандарты», и вот уже год вместе с программным комитетом делаю конференцию FrontendConf. С FrontendConf я уже давно: первый доклад случился ещё в 2018 году. Все пять лет общался с бывшими и нынешними участниками программного комитета и не понаслышке знал, как много они делают ради качества наполнения. Поэтому, когда меня пригласили вступить в ПК, сразу согласился. Мне хотелось качественно влиять на frontend-индустрию. Нравилась идея самому готовить классных спикеров, чтобы они выходили на большее количество конференций.

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

А в конце интересный опрос про использование статических анализаторов.

"Реактивность" — это то, как системы реагируют на обновление данных. Существуют разные типы реактивности, но в рамках этой статьи, реактивность — это когда мы что-то делаем в ответ на изменение данных.

Паттерны реактивности являются ключевыми для веб-разработки

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

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

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

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

Привет! Меня зовут Виталий, я фронтенд-тимлид в KTS.

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

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

• В responsive mode браузера на компьютере

• С помощью эмуляторов iOS и Android

• На физическом iPhone и Android-устройстве через USB

• С помощью Browserstack

В этой статье мы покажем:

• как в разных ситуациях манипулировать веб-сайтом таким образом, чтобы он передавал пользователям вредоносный JavaScript.
• как скомпрометировать администратора сайта, отправив ему личное сообщение;
• как атаковать разом всех пользователей при помощи комментария под статьей;
• как заставить пользователя отправить запрос на действия, которые он не собирается выполнять;
• как прослушивать WebSocket-соединения;
• и коротко объясним, как предотвратить все эти безобразия.

В общем, под катом вас ждет рассказ про распространенные уязвимости на стороне клиента и некоторые методы Client-Side защиты.

Часто разработчики интересуются почему не рекомендуется использовать тип поля enum в базе данных, и в этой статье мы рассмотрим все плюсы и минусы данного типа.

Тип колонки enum используется для хранения данных, которые могут принимать определённые значения из заранее определённого набора. Он обеспечивает ограничение значений, которые может принимать колонка, и позволяет более строго контролировать данные. Это может быть полезно для хранения статусов, категорий, типов или любых других значений, которые могут быть заданы только из ограниченного набора вариантов.

Но это в теории. А что на практике? Рассмотрим под катом.

Если вы работали с Angular, то наверняка встречались с RxJS. Потоки, развесистые конструкции, много аргументов у метода pipe, а каждый аргумент возвращают разные функции с разным количеством аргументов. Есть интуитивно понятные функции типа filter или map. Первый явно фильтрует значения в потоке, а второй эти значения меняет. Такие функции называют операторами. И чем глубже вы проваливаетесь в RxJS, тем больше самых разных операторов вы узнаете. И со временем добираетесь до потоков потоков. То есть вместо обычных значений такой поток эмитит другие потоки. Такие потоки называют Higher Order Observables. И для работы с такими потоками существуют специальные операторы. Возможно, вы слышали, что такие операторы называют Higher Order Operators (HOO). Они могут выравнивать потоки или, другими словами, делать их обычным.

В этой статье я покажу, что в HOO нет ничего мифического, и расскажу в каких случаях вам нужно использовать операторы высшего порядка. Сейчас вы подумаете, что это скучный лонгрид, но не торопитесь. Мы рассмотрим всего 4 оператора: switchMap, exhaustMap, concatMap и mergeMap.

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

Технологии эволюционируют и функционируют, а новые технологии их полностью заменяют. Считаю, что сейчас наступает эпоха, когда технологии фреймворков и Электрона могут быть вытеснены генеративными AI. Рассмотрим несколько примеров.

Представьте себе следующую ситуацию: у вас на руках есть SPA с рендерингом полностью на клиенте, и вам необходимо сделать так, чтобы в зависимости от URL было разное содержимое у тега <head>.

Привет, Хабр! Меня зовут Евгений Лабутин, я разработчик в МТС Digital. Сегодня я расскажу вам о своем рецепте приготовления микрофронтендов без использования каких либо фреймворков. Ведь такие фреймворки как Webpack Module Federation, Single-SPA, SystemJS и подобные вам просто не нужны для написания микрофронтендов, ровно так же как вам не нужен jQuery для написания современных фронтендов. Ведь все необходимое для разработки и работы Микрофронтендов уже встроено во все современные браузеры. Интересно? Добро пожаловать в статью.

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

Разработчикам, живущим в пузыре под названием «США» трудно воспринимать остальные страны. Но мне очень часто напоминают, что снаружи тоже есть мир. Это введение может показаться похожим на совершенно необязательную мотивационную речь перед изложением чего-то крайне простого, но одна маленькая деталь может стать разницей между тем, что вашим приложением пользуются люди со всего света, или только люди вроде вас. Разницу между этими мирами я постоянно безуспешно пытаюсь осознать; к счастью, те, кто занимается разработкой качественных веб-браузеров, делают за нас всё самое сложное.

С самого начала разработки Standard Notes я получал просьбы о добавлении поддержки языков с написанием справа налево (RTL; это такие языки, как иврит, арабский и урду). И каждый раз, когда я начинал изучать необходимые для этого действия, это казалось нетривиальной задачей.

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

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

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

Рисовал я все это в PowerPoint.

Привет, Хабр! Сегодня расскажу, как сделал несколько десятков пет-проектов, научился работать с другими программистами, решать конфликты на GitHub и даже попробовал себя в роли тимлида. 

Меня зовут Абузар Мамедов, я студент курса «Фронтенд-разработчик» в Яндекс Практикуме, а этими проектами я занимался во время учёбы. Текст может быть полезен новичкам, которые хотят больше практиковаться и найти идеи для собственных проектов. 

В статье я подробнее расскажу о трёх проектах: генератор резюме с динамическим заполнением и SPA-приложение интернет-магазина и ещё одно приложение на React для поиска GIF. Чтобы понять, что можно улучшить, наставник курса Алексей Гмитрон оценил их качество и поделился мыслями.

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

Привет, я Антон Лисицкий — руководитель отдела дизайна компании Pyrobyte. Сегодня расскажу о том, как:

• зажечь огонь в глазах дизайнеров;

• научить их правильно распоряжаться своим временем;

• сплотить команду, работая над некоммерческим проектом.