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

Привет! Меня зовут Николай Тихонов, я работаю в команде Tinkoff eCommerce. Я начинал как фронтендер, а потом стал писать бэкенд и занялся CI/CD. А дальше — FullStack Ops и руководство процессами и собственной командой. Сегодня расскажу про FrontOps, blue-green и релизы без даунтайма. Эта статья — текстовая адаптация моего доклада для FrontendConf 2022. 

С минимальными знаниями Ops-технологий фронтендер может показывать каждому пользователю, что он сделал, и в одиночку реализовывать крутые продукты. А релизы с даунтаймом все еще существуют и не дают клиентам пользоваться продуктом ночью, поэтому в этой статье поговорим про практику blue-green.

Всем привет! Меня зовут Алексей Половинкин, и я отвечаю за Python в AGIMA. За последние 2 года мне повезло запускать сразу 2 крупных MVP‑проекта: классифайд автомобилей для Казахстана и проект в сфере телемедицины. За это время у меня и моей команды накопилось много опыта по запуску подобных проектов, и им хотелось бы поделиться. В этой статье рассказываю, как не допускать ошибок на этапе MVP и какие практики полезно внедрять сразу.

Привет, друзья!

В этой серии статей я продолжаю рассказывать о Remix — новом фреймворке для создания клиент-серверных веб-приложений на JavaScript (React) со встроенной поддержкой TypeScript.

Remix позволяет разрабатывать так называемые PESPA (Progressive Enhancement Single Page Apps — одностраничные приложения с возможностью прогрессивного улучшения). Это означает следующее:

• почти весь код приложения "живет" на сервере;
• приложение остается функциональным даже при отсутствии JS;
• JS используется только для прогрессивного улучшения UX (User Experience — пользовательский опыт).

Подробнее о PESPA и других архитектурах веб-приложений можно почитать здесь.

Очевидно, что разработчики Remix вдохновлялись Next.js и Svelte.

К слову, здесь вы найдете полное руководство по Next.js.

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

Это часть номер два.

Вот ссылка на часть номер раз.

Всем привет! Меня зовут Алексей Леонтьев, я старший разработчик и системный архитектор в компании KTS.

Мониторинг проекта — это комплексная задача. В неё входит не только передача метрик, но и сбор логов, трейсов, health-чеки, правила для алертов и система их доставки до ответственных разработчиков.

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

• Клиент-серверную модель
• Жизненный цикл запроса веб-страницы
• Hypertext Transfer Protocol
• Как браузеры рендерят контент

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

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

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

Начнем!

Мне нравится, когда люди делятся тем, что они хотят видеть в CSS. За последние несколько недель я прочитал два потрясающих списка желаний Дэйва Руперта и Эрика Мейера.

Я подумал, почему бы мне не поделиться с вами тем, что я хотел бы однажды увидеть в CSS.

Примерно 11 месяцев назад я начал разрабатывать пет-проект - Telegram чат для сайта. С тех пор и до сегодняшнего дня занимаюсь его разработкой и продвижением самостоятельно. Правда занимаюсь им в свободное от основной работы время, которого мало.

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

Хочу рассказать тем, кто тоже работает над своими проектами, как за год я пришел к текущим показателям (что было нелегко). Попробовал структурировать свои мысли, вышло довольного много текста. Текст разбил на статьи, содержание будет в каждой статье.

Привет, Habr! Сегодня я хочу поделиться опытом разработки системы контроля доступа (Access Control System, ACS) для low-code платформы Системный Геном. Задача была непростой: нужно было создать гибкую систему, которая поддерживает иерархии, автоматическую синхронизацию с приложениями и строгий контроль доступа, но при этом остаётся понятной для администраторов и быстрой в работе. В этой статье я расскажу, как мы справились с этой задачей, какие ошибки допустили на старте и как в итоге пришли к решению, которое теперь успешно работает в продакшене.

Hello, world!

Представляю вашему вниманию перевод этой замечательной статьи.

useSyncExternalStore — это один из хуков, представленных в React 18. Наряду с хуком useInsertionEffect, он считается хуком для библиотек (library hook):

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

В списке изменений React 18 речь также идет о библиотеках:

Добавлен useSyncExternalStore для помощи в интеграции с React библиотек внешних хранилищ (external store libraries)

Всем привет! На связи Spectr.

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

Привет, друзья!

В этом туториале я покажу вам несколько полезных приемов по работе с таблицами с помощью React Table.

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

Мы последовательно реализуем 5 вариантов таблицы:

• с возможностью сортировки строк;
• с возможностью фильтрации строк;
• с пагинацией;
• с возможностью выбора строк;
• комплексную.

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

Предполагается, что вы имеете некоторый опыт работы с React и TypeScript.

Для тех, кого интересует только код, вот ссылка на соответствующий репозиторий.

Интересно? Тогда прошу под кат.

Данная статья описывает утилиту для генерации статических страниц ошибок, используемых в качестве замены стандартным страницам. В статье подробно описаны возможности утилиты, среди которых шаблонизация, стилизация, локализация, генерация сниппетов для настройки сервера. Проект является Open Source, и открыт для новых идей и запросов.

CDN (Content Delivery Network) — распределенная сетевая архитектура, созданная для ускорения доставки контента пользователям. CDN влияет на скорость загрузки любого контента сайтов и приложений, который видит пользователь: аудио, видео, стриминг, изображения, тексты, графика.

Сеть доставки контента делится на три типа: P2P, Push и Pull. В материале разбираемся в отличиях и особенностях разных CDN.

Доброго времени суток.

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

Я выпустил библиотеку banditypes — самый маленький валидатор схем для TS / JS. Удивительно, но базовый функционал валидации с приятным API можно упихнуть в 400 байт, если сконцентрироваться на размере и добавить пару грязных хаков. В этой статье расскажу, как добился такого результата.

Привет, я Виктор. Двенадцать лет назад я пришел в веб-студию в Самаре. Так начался мой путь в разработке. У нас не было гита, CI/CD, тестовых стендов и много чего еще. Я видел, как это мешало развитию команды и бизнеса. Приходилось на ощупь собирать грабли, открывать для себя хорошие практики и внедрять их. С тех пор я поработал старшим разработчиком в российском финансовом холдинге и немецком b2b-стартапе. Был тимлидом в фудтех-проекте, СTO в образовательных стартапах для российского и латиноамериканского рынка — и почти везде поначалу натыкался на похожие проблемы. Недавно переехал в Израиль, стал консультировать стартап. И что бы вы думали…

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

Введение

Всем привет! Меня зовут Герман Панов и в этой статье мы разработаем табличный редактор - аналог Google Sheets (в упрощенном виде), работающий на основе вебсокетов, чтобы познакомиться со способами применения этой технологии в браузерах.

Поскольку цель - ознакомление, код будет не очень «чистым», но для базового примера этого будет достаточно. В качестве серверной платформы будем использовать Node.js, также потребуется пакет ws, предоставляющий API для работы с вебсокетами на сервере.