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

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

Меня зовут Тарас Иванов, уже семь лет я развиваю фронтенд ВКонтакте, а сейчас руковожу командой, которая занимается производительностью и инфраструктурой. В статье я расскажу, как мы с командой ускорили загрузку m.vk.com в 4 раза, на какие метрики обращали внимание и какие сервисы использовали для оценки эффективности. Описанные способы и инструменты помогут повысить производительность в любом проекте: от многостраничных платформ с большим количеством legacy до свежих лаконичных лендингов. Актуально как для мобильной, так и десктопной версий.  

Как правило, работа с документацией — это последний этап любого проекта, связанного с данными (data science, data visualization и т. д.), проектированием и разработкой ПО. Речь о создании и редактировании библиотек, файлов README, обучающих материалов и др. Среди всех преимуществ VScode — его уникальная экосистема расширений. И особенно впечатляют те, что помогают работать с документацией. В этой статье поделюсь самыми полезными из них.

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

Проект прошел несколько этапов разработки, включая формирование функциональных требований, CJM, Список фичей, определение архитектуры, разработку и успешный альфа-тест, на котором были выявлены и устранены наиболее критичные проблемы. На данный момент "Капибара" входит в новый этап своего развития – открытый бета-тест. Этот этап является важной вехой на пути к полноценному запуску проекта. Открытие бета-теста дает возможность всем желающим присоединиться к сообществу, оценить ресурс и внести свой вклад в его развитие. Код проекта находится в открытом доступе, позволяя участникам вносить свои предложения и улучшения в качестве авторов, пользователей, тестировщиков и разработчиков.

История проекта

Проект "Капибара", как идея, был зарожден 24 июля 2023 года в ответ на объявление о ключевых изменениях на пикабу . Ответный пост прожил всего час перед удалением, но за это время собрал огромное количество комментариев поддержки и предложения помощи в создании нового портала. Сразу после объявления идеи был создан телеграмм-чат, в который за первые сутки пришло 3,5 тысячи человек, а через несколько дней число участников достигло 9 тысяч. Из этого числа была сформирована команда разработчиков. Основная концепция "Капибары" заключалась в создании портала с акцентом на честной саморегуляции контента пользователями, прозрачности алгоритмов и открытом исходном коде. Ввиду острой потребности авторов в площадке для публикации уникального контента, команда быстро создала телеграм-бота, который принимал посты пользователей и публиковал их в канале, где другие могли оценивать и комментировать их.

Привет👋 В последние годы среди фронтенд разработчиков Typescript используется практически везде по умолчанию, начиная небольшими пет-проектами и заканчивая огромнейшими веб-приложениями. Однако, до сих пор на некоторых проектах можно встретить кучу any и Function. Давайте разберемся используете ли вы этот невероятно мощный инструмент правильно?

Разираем, как разработчик попал под массовые увольнения, но потом за 10 дней запустил простой продукт, дублирующий его зарплату.

Привет, Хабр! Меня зовут Данил, я Frontend-разработчик в Samokat.tech. Недавно мы с командой распилили монолит на Angular и перешли к микрофронтендам на Vue. 

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

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

Статья подготовлена по материалам внутреннего митапа по информационной безопасности.

Всем привет, меня зовут Александр Карташов, я Java-бэкенд разработчик в Альфа-Банке. Работаю в проекте альфа-бизнес мобайл, мобильное приложение для юрлиц. В рамках проекта мне часто приходилось интегрироваться с разными банковскими системами, с разными стеком технологий, так и родилась эта статья, как попытка все упорядочить.

Hello world!

Представляю вашему вниманию первую часть обновленного руководства по Next.js.

• Вторая часть
• Третья часть
• Руководство целиком

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

Предполагается, что вы хорошо знаете JavaScript и React, а также хотя бы поверхностно знакомы с Node.js.

Обратите внимание: руководство актуально для Next.js версии 14.

При подготовке руководства я опирался в основном на официальную документацию, но в "отсебятине" мог и приврать (или просто очепятаться) 😁 При обнаружении подобного не стесняйтесь писать в личку 😉

Парочка полезных ссылок:

• Официальные примеры использования Next.js
• Классные туториалы по разработке веб-приложений с помощью Next.js

У нас во «Фланте» инженеры работают еще и с технической документацией. При этом многие термины, например, относящиеся к Kubernetes, пишут по-разному: кто-то использует сленг, кто-то — латиницу, а кто-то — кириллицу. Чтобы навести порядок в терминологии, а заодно и исправлять опечатки, мы решили создать спелл-чекера и автоматизировать проверку орфографии.

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

WAAP (Web Application and API Protection) является брандмауэром веб-приложений следующего поколения WAF (Web Application Firewall). Термин впервые начал использовать Gartner для описания защиты современных, постоянно меняющихся web-сервисов. Так как в мире CI/CD, динамики и API first компаний, функций традиционного WAF (Web Application Firewall) уже недостаточно.

WAAP - это совокупность методов и технологий, которые используются для защиты веб-приложений и сервисов от атак и уязвимостей. WAAP включает в себя технологии, такие как WAF-NG, сканер уязвимостей, автоматическое обнаружение и блокирование атак 0-дня (в том числе с помощью виртуального патчинга), выявление аномалий с помощью технологий Machine Learning и смарт-капчи.

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

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

Приложения, созданные на платформе 1С:Предприятие, могут быть развернуты в трёхзвенной архитектуре (Клиент – Сервер приложений – СУБД). Клиентская часть приложения может работать, в частности, как веб-клиент, в браузере. Веб-клиент – это довольно сложный фреймворк на JavaScript, отвечающий за отображение пользовательского интерфейса и исполнение клиентского кода на встроенном языке. Одна из задач, которая стояла перед нами в ходе разработки веб-клиента – это корректная работа с различного рода ресурсами (в первую очередь – их своевременное освобождение).

Мы провели анализ существующих подходов и хотим рассказать вам об этом. Добро пожаловать под кат!

Запустили сайт HomeBro, который ищет квартиры сразу на всех топовых сайтах объявлений. Все предложения по недвижке на одной карте + уведомления о новых вариантах в телегу.

Приветствую, уважаемый коллектив Хабр!

В данной статье будет рассмотрен ряд вопросов, включая насущный «насколько далек веб-мастер в начале своего пути от системного аналитика?» и «факторы, способствующие развитию и трансформации в IT-сфере».

Свой путь в IT начал еще с юношеского возраста в 2003 году с разработки первых веб-сайтов на HTML еще во времена популярности narod.ru. Прошел путь разработки более, чем в 100+ веб-проектов, работал инженером сервисной службы, инженером-конструктором в КБ «Салют», прошел путь от первой линии технической поддержки до сетевого инженера и далее до руководителя отдела автоматизации.

Давайте обо всем по порядку.

Hola Amigos! На связи Евгений Шмулевский, PHP-разработчик в Amiga. Начал заниматься программированием с 2001 года, привет Basic и Express/Turbo Pascal. Веб-разработкой — с 2011 года, а профессионально в вебе с 2013 года. Работал продолжительное время с Битрикс, а с 2018 начал осваивать Laravel. 

Hello world!

Представляю вашему вниманию вторую часть обновленного руководства по Next.js.

• Первая часть
• Третья часть
• Руководство целиком

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

Предполагается, что вы хорошо знаете JavaScript и React, а также хотя бы поверхностно знакомы с Node.js.

Обратите внимание: руководство актуально для Next.js версии 14.

При подготовке руководства я опирался в основном на официальную документацию, но в "отсебятине" мог и приврать (или просто очепятаться) 😁 При обнаружении подобного не стесняйтесь писать в личку 😉

Парочка полезных ссылок:

• Официальные примеры использования Next.js
• Классные туториалы по разработке веб-приложений с помощью Next.js

О программисты! Костяк цифровой эры, незримые прядильщики нашей онлайн-вселенной. Боковая ветвь человекообразных приматов, связанных тесными родственными узами с Homo Sapiens. Отличаются плохой осанкой, лёгкой степенью мизантропии и способностью решить любую проблему, заглянув в Google. Это густонаселённое племя пестрит восхитительным разнообразием, которое чётко прослеживается в стилях программирования и личностных характеристиках.

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

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