Алексей Соин · zencod.ru
19 subscribers
165 photos
16 videos
4 files
1K links
Статьи по разработке

- frontend
- backend
- server

zencod.ru
Download Telegram
Притча про три конверта

Старый Head of Engineering уходит из компании и передаёт дела молодому преемнику. Напоследок вручает ему три конверта и говорит:
— Когда начнутся серьёзные проблемы, вскрой первый конверт.

Сначала всё идёт отлично: команда продуктивна, CI/CD работает как часы, релизы выходят вовремя. Но в какой-то момент начинаются проблемы: технический долг, дедлайны срываются, продакшен падает. Руководитель в панике, но вспоминает про конверты. Открывает первый:
— "Вали всё на предыдущую команду!"

Он так и делает: рассказывает CTO, как унаследованный код ужасен, архитектура устарела, а процесс разработки давно пора переделать. Получает поддержку, выстраивает новые процессы, дела улучшаются.

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

Он начинает рисовать графики, анонсирует рефакторинг, миграцию на новую архитектуру, внедрение best practices. Команда вдохновляется, менеджеры успокаиваются, и всё вроде бы налаживается.

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

П.С. Последнее время часто ее вспоминал, нашел и попроси GPT переделать под руководителя разработки, цитирую в оригинале. Вообще, конечно, да, можно долго удивляться как быстро растут дети как быстро развивается искусственный интеллект. Еще 25 лет назад, компов ни у кого не было особо, а сейчас — вот это вот. Дела
П.П.С. Все персонажи сгенерированы выдуманы, аналогии случайны. Если вы узнали себя, извините
Forwarded from BEARlogin
FSD: дело было не в бобине...

Часто слышу критику FSD: "Слишком много папок, слишком много правил, это избыточно!".
Но хочу сказать, что FSD — это не про количество папок. Это про направление зависимостей и архитектурные границы.

Ты не обязан сразу строить многоэтажный небоскрёб, если у тебя пока маленький проект. Начать можно просто.

Кстати, само название FSD (Feature-Sliced Design), на мой взгляд, не совсем корректно. Это не "дизайн, разделенный на фичи". Скорее, это методология, которая помогает структурировать код, организуя его вокруг бизнес-функционала и уровней ответственности, позволяя соблюдать принципы Low coupling и High cohesion.

Можете в комментариях предложить своё название. Лично я бы назвал это Business-Sliced Design — чтобы невозможно было интерпретировать методологию упрощённо и требовалось изучение её сути.


С чего начинать?

На старте достаточно трёх слоёв:
1. app/ — конфигурация приложения: роутинг, провайдеры, глобальные стили.
2. shared/ — переиспользуемые, не связанные с бизнесом компоненты, утилиты, стили и т.д.
3. pages/ — страницы приложения и используемые ими компоненты.

src/
app/
App.tsx
routes.ts
shared/
ui/
Button/
index.tsx
pages/
catalog/
ui/
CatalogPage.tsx
ProductList.tsx //кандидат на вынос
index.ts
recommended/
ui/
RecommendedPage.tsx
ProductList.tsx
index.ts

Сначала можно оставить всё в pages, если функциональность используется только там.

Но как только начинаешь дублировать код, либо твой слайс хочет что то импортировать у соседей, то логично вынести его в widgets.
src/
app/
App.tsx
routes.ts
shared/
ui/
Button/
index.tsx
widgets/
product-list/
ui/
ProductList.tsx
model/
useProducts.ts
index.ts
pages/
catalog/
ui/
CatalogPage.tsx
index.ts
recommended/
ui/
RecommendedPage.tsx
index.ts

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

Что касается entities и shared, то здесь есть определённая специфика. Об этом я расскажу в следующих постах.

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

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

Ставьте 🔥, если хотите больше практических примеров и советов по FSD.

BEARlogin dev — подпишись!

P.S. советую этот экстеншн для генерации слайсов https://marketplace.visualstudio.com/items?itemName=SbokyZahodi.fsd-slices

#архитектура #frontend #fsd

Подготовлю к собесам, помогу с рабочими задачами и росту хардов/софтов. Уперся в потолок с з/п, ответственностью?
Если необходимо менторство - пишите
@bearlogin
Please open Telegram to view this post
VIEW IN TELEGRAM
👩‍💻 Команда Яндекса рассказывает о своём опыте переноса бэкенда главной страницы с Perl на Go.

Занятная статья о сложностях перехода на другой яп при непрерывной разработке проекта. 👍

https://habr.com/ru/companies/yandex/articles/871868/
Please open Telegram to view this post
VIEW IN TELEGRAM
Мы все должны уходить с работы вовремя. Вот почему / Хабр
https://habr.com/ru/companies/minerva_media/articles/883318/
Идеальное центрирование текста в верхнем регистре 🥹

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

.text {
text-box: cap alphabetic;
}


P.S. пока только Safari и Chrome поддерживают это свойство, но остальные движки уже работают над реализацией этой фичи

Подробнее про text-box 👇
https://developer.chrome.com/blog/new-in-chrome-133?hl=ru#text-box
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥1
DeepSeek на железе за 45к / Хабр
https://habr.com/ru/articles/885056/
ESLint теперь официально поддерживает линтинг CSS: несколько готовых правил, поддержка кастомного синтаксиса и другие подробности → https://eslint.org/blog/2025/02/eslint-css-support/
This media is not supported in your browser
VIEW IN TELEGRAM
Отказываемся от JS-библиотек для анимаций: руководство по созданию анимированного меню на View Transitions → https://www.builder.io/blog/view-transitions
Forwarded from trash.js
Ты обновил Node.js? Я волнуюсь

Поговорим об уязвимостях. Например, CVE-2023-32002, где уро­вень опасности критический из-за уда­лен­ного выпол­нения кода (RCE). Уязвимость была в функции Module._load(), которая отвечает за загрузку модулей что открывает большой простор для утечек, подмены данных и т.д. Версии с исправлениями Node.js: 16.20.1+, 18.17.0+ или 20.5.0+.

Вижу несколько стратегий:
- Почитывать Node.js vulnerability blog
- Подписаться на рассылку nodejs-sec
- Настроить DevSecOps-проверки вроде gemnasium
- Подтюнить SonarQube, а именно Security Hotspot
- Настроить регулярные обновления Renovate / Dependabot
- Настроить базовый образ для CI, который всегда будет брать latest LTS
- Ждать серьезных дядь из КБ которые заставят обновить ноду 😎

Расскажите, как у вас устроен процесс реагирования на CVE? 🚀
Please open Telegram to view this post
VIEW IN TELEGRAM
Керниган — один из создателей Unix, создатель awk и автор авторитетнейших книг о программировании, Unix, C и сейчас уже Go.

А ещё он придумал hello world, реализовав впервые эту программу на языке B в 1972м. Теперь это первая программа, которую пишут в любом языке программирования.

Оказывается, у него ещё такая книга вышла. От Кернигана грех не почитать!
Forwarded from mefody.dev
Режим «от края до края» в Chrome на Android

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

Теперь такое же можно делать и в Chrome 135+. Для этого надо добавить метатег на страницу.


<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />


Ключ viewport-fit как раз и отвечает за включение этого специального режима.

А в CSS нужно тогда, как мы уже привыкли для iOS, поработать с env(safe-area-inset-bottom), чтобы всякое кликабельное у вас на сайте не попало в служебные островки, которые всё-таки будут мешать пользователю кликнуть.

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

Почему я режим называю «новым» в кавычках: потому что на iOS мы и так уже работали с похожим поведением, так что если у вас уже были оптимизации под островок и бровку на яблочных смартфонах, то в Android, по идее, заведётся тоже. Более того, Chrome умеет в правильные переменные env тоже очень давно, так что вся новость скорее в том, что теперь надо будет не забыть протестировать ваш красивый сайт ещё и в режиме «от края до края».

https://developer.chrome.com/docs/css-ui/edge-to-edge
🔥1
Преждевременная оптимизация

Есть такая тема: когда ты создаешь что-то новое, видишь кучу точек для оптимизации и начинаешь в них проваливаться, тратя уйму времени:
- О, у нас тут в перспективе появится большая нагрузка, давай я заморочусь с кешем и репликацией!
- Смотри, этот кусок кода явно станет bottleneck’ом через три года, давай перепишем его на Go/Rust/C!
- Надо заложить возможность оптимизировать процесс работы до уровня low-code, давай потратим все усилия, спроектируем и закодим сложнейший редактор!

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

Двигатель на фото — один и тот же, с разницей в пять лет.
Менеджер закладок на своём сервере / Хабр
https://habr.com/ru/companies/ruvds/articles/896082/
This media is not supported in your browser
VIEW IN TELEGRAM
В Chrome 135 появилась возможность полной стилизации нативных селектов: другие браузеры пока этого не поддерживают, но такая стилизация может быть прогрессивным улучшением → https://developer.chrome.com/blog/a-customizable-select