Forwarded from Уставший техдир
Притча про три конверта
Старый Head of Engineering уходит из компании и передаёт дела молодому преемнику. Напоследок вручает ему три конверта и говорит:
— Когда начнутся серьёзные проблемы, вскрой первый конверт.
Сначала всё идёт отлично: команда продуктивна, CI/CD работает как часы, релизы выходят вовремя. Но в какой-то момент начинаются проблемы: технический долг, дедлайны срываются, продакшен падает. Руководитель в панике, но вспоминает про конверты. Открывает первый:
— "Вали всё на предыдущую команду!"
Он так и делает: рассказывает CTO, как унаследованный код ужасен, архитектура устарела, а процесс разработки давно пора переделать. Получает поддержку, выстраивает новые процессы, дела улучшаются.
Но через год ситуация снова ухудшается. Продукт растёт, скорость разработки падает, баги множатся. Вскрывает второй конверт:
— "Обещай всё исправить и делай красивые роадмапы!"
Он начинает рисовать графики, анонсирует рефакторинг, миграцию на новую архитектуру, внедрение best practices. Команда вдохновляется, менеджеры успокаиваются, и всё вроде бы налаживается.
Но проходит время, и проблемы возвращаются: рефакторинг затянулся, технический долг растёт, сроки срываются. Уже не получится свалить вину на предыдущих, и красивые планы больше не работают. Вскрывает последний конверт:
— "Готовь три конверта…"
П.С. Последнее время часто ее вспоминал, нашел и попроси GPT переделать под руководителя разработки, цитирую в оригинале. Вообще, конечно, да, можно долго удивлятьсякак быстро растут дети как быстро развивается искусственный интеллект. Еще 25 лет назад, компов ни у кого не было особо, а сейчас — вот это вот. Дела
П.П.С. Все персонажисгенерированы выдуманы, аналогии случайны. Если вы узнали себя, извините
Старый Head of Engineering уходит из компании и передаёт дела молодому преемнику. Напоследок вручает ему три конверта и говорит:
— Когда начнутся серьёзные проблемы, вскрой первый конверт.
Сначала всё идёт отлично: команда продуктивна, CI/CD работает как часы, релизы выходят вовремя. Но в какой-то момент начинаются проблемы: технический долг, дедлайны срываются, продакшен падает. Руководитель в панике, но вспоминает про конверты. Открывает первый:
— "Вали всё на предыдущую команду!"
Он так и делает: рассказывает CTO, как унаследованный код ужасен, архитектура устарела, а процесс разработки давно пора переделать. Получает поддержку, выстраивает новые процессы, дела улучшаются.
Но через год ситуация снова ухудшается. Продукт растёт, скорость разработки падает, баги множатся. Вскрывает второй конверт:
— "Обещай всё исправить и делай красивые роадмапы!"
Он начинает рисовать графики, анонсирует рефакторинг, миграцию на новую архитектуру, внедрение best practices. Команда вдохновляется, менеджеры успокаиваются, и всё вроде бы налаживается.
Но проходит время, и проблемы возвращаются: рефакторинг затянулся, технический долг растёт, сроки срываются. Уже не получится свалить вину на предыдущих, и красивые планы больше не работают. Вскрывает последний конверт:
— "Готовь три конверта…"
П.С. Последнее время часто ее вспоминал, нашел и попроси GPT переделать под руководителя разработки, цитирую в оригинале. Вообще, конечно, да, можно долго удивляться
П.П.С. Все персонажи
Forwarded from BEARlogin
FSD: дело было не в бобине...
Часто слышу критику FSD: "Слишком много папок, слишком много правил, это избыточно!".
Но хочу сказать, что FSD — это не про количество папок. Это про направление зависимостей и архитектурные границы.
Ты не обязан сразу строить многоэтажный небоскрёб, если у тебя пока маленький проект. Начать можно просто.
С чего начинать?
На старте достаточно трёх слоёв:
1. app/ — конфигурация приложения: роутинг, провайдеры, глобальные стили.
2. shared/ — переиспользуемые, не связанные с бизнесом компоненты, утилиты, стили и т.д.
3. pages/ — страницы приложения и используемые ими компоненты.
Сначала можно оставить всё в pages, если функциональность используется только там.
Но как только начинаешь дублировать код, либо твой слайс хочет что то импортировать у соседей, то логично вынести его в widgets.
А затем продолжаешь углублять структуру. Например, если два widget используют схожую логику или функциональность, то логично вынести её в features. Дальше это движение продолжается по мере необходимости.
Что касается entities и shared, то здесь есть определённая специфика. Об этом я расскажу в следующих постах.
Вынос в новый сегмент какого то функционала не является самоцелью. Я бы сказал, даже наоборот — если можно не выносить и остаться в рамках одного слайса — оставайтесь.
Таким образом FSD подходят для любых проектов на старте, позволяя сразу закладывать возможности для масштабирования и помогает соблюдать принципы низкой связанности и высокого зацепления.
Ставьте🔥 , если хотите больше практических примеров и советов по FSD.
BEARlogin dev — подпишись!
P.S. советую этот экстеншн для генерации слайсов https://marketplace.visualstudio.com/items?itemName=SbokyZahodi.fsd-slices
#архитектура #frontend #fsd
Подготовлю к собесам, помогу с рабочими задачами и росту хардов/софтов. Уперся в потолок с з/п, ответственностью?
Если необходимо менторство - пишите @bearlogin
Часто слышу критику 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 подходят для любых проектов на старте, позволяя сразу закладывать возможности для масштабирования и помогает соблюдать принципы низкой связанности и высокого зацепления.
Ставьте
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
Занятная статья о сложностях перехода на другой яп при непрерывной разработке проекта.
https://habr.com/ru/companies/yandex/articles/871868/
Please open Telegram to view this post
VIEW IN TELEGRAM
Как я развернул фулстек-приложение на «NestJS» с «Angular» в «Supabase» и «Vercel» / Хабр
https://habr.com/ru/articles/882726/
https://habr.com/ru/articles/882726/
Хабр
Как я развернул фулстек-приложение на «NestJS» с «Angular» в «Supabase» и «Vercel»
Предыдущая статья: Конвертация даты по временной зоне пользователя в "NestJS", а также ввод и отображение даты в "Angular" Я разработал небольшое фулстек-приложение в качестве примера REST +...
Чеклист для tsconfig.json / Хабр
https://habr.com/ru/companies/timeweb/articles/877162/
https://habr.com/ru/companies/timeweb/articles/877162/
Хабр
Чеклист для tsconfig.json
В этой статье я расскажу о настройках TypeScript, определяемых в файле tsconfig.json , которых я использую в своих проектах. ❯ 1. Возможности, не затрагиваемые в этой статье В этой статье описывается...
Мы все должны уходить с работы вовремя. Вот почему / Хабр
https://habr.com/ru/companies/minerva_media/articles/883318/
https://habr.com/ru/companies/minerva_media/articles/883318/
Forwarded from Frontend по-флотски 👨💻 | AI & Modern Dev
Идеальное центрирование текста в верхнем регистре 🥹
Тебе надоели ненужные пробелы над и под текстом? Всего одна строчка кода может исправить это, и ты сможешь идеально выровнять текст верхнего регистра по центру
P.S. пока только Safari и Chrome поддерживают это свойство, но остальные движки уже работают над реализацией этой фичи
Подробнее про text-box👇
https://developer.chrome.com/blog/new-in-chrome-133?hl=ru#text-box
Тебе надоели ненужные пробелы над и под текстом? Всего одна строчка кода может исправить это, и ты сможешь идеально выровнять текст верхнего регистра по центру
.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/
https://habr.com/ru/articles/885056/
Forwarded from For Web — фронтенд, дизайн, программирование
ESLint теперь официально поддерживает линтинг CSS: несколько готовых правил, поддержка кастомного синтаксиса и другие подробности → https://eslint.org/blog/2025/02/eslint-css-support/
Forwarded from For Web — фронтенд, дизайн, программирование
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). Уязвимость была в функции
Вижу несколько стратегий:
- Почитывать Node.js vulnerability blog
- Подписаться на рассылку nodejs-sec
- Настроить DevSecOps-проверки вроде gemnasium
- Подтюнить SonarQube, а именно Security Hotspot
- Настроить регулярные обновления Renovate / Dependabot
- Настроить базовый образ для CI, который всегда будет брать latest LTS
- Ждать серьезных дядь из КБ которые заставят обновить ноду 😎
Расскажите, как у вас устроен процесс реагирования на CVE?🚀
Поговорим об уязвимостях. Например, 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
nodejs.org
Node.js
Node.js® is a free, open-source, cross-platform JavaScript runtime environment that lets developers create servers, web apps, command line tools and scripts.
Управляем питанием компьютера кнопкой вызова от старого лифта / Хабр
https://habr.com/ru/companies/timeweb/articles/873908/
https://habr.com/ru/companies/timeweb/articles/873908/
Хабр
Управляем питанием компьютера кнопкой вызова от старого лифта
Приветствую всех! Однажды увидел я на просторах ролик, как кто-то подключил лифтовой вызывной пост вместо обычной кнопки включения компьютера. И вот как-то раз я снова вспомнил про это, отчего мне...
Forwarded from Диджитализируй!
Керниган — один из создателей Unix, создатель awk и автор авторитетнейших книг о программировании, Unix, C и сейчас уже Go.
А ещё он придумал hello world, реализовав впервые эту программу на языке B в 1972м. Теперь это первая программа, которую пишут в любом языке программирования.
Оказывается, у него ещё такая книга вышла. От Кернигана грех не почитать!
А ещё он придумал hello world, реализовав впервые эту программу на языке B в 1972м. Теперь это первая программа, которую пишут в любом языке программирования.
Оказывается, у него ещё такая книга вышла. От Кернигана грех не почитать!
Forwarded from mefody.dev
Режим «от края до края» в Chrome на Android
В нативных приложениях для Android есть фича показывать интерфейс приложения от верхнего края экрана до нижнего. Не от границ приложения, которые выделяет ОС со служебными полосками, а от физического края до другого физического края. Залезая на шторки, островки и прочие приколы современных смартфонов.
Теперь такое же можно делать и в Chrome 135+. Для этого надо добавить метатег на страницу.
Ключ
А в CSS нужно тогда, как мы уже привыкли для iOS, поработать с
В статье есть примеры кода, как работать с «новым» режимом. И видео с визуальной разницей старого и нового режимов. И инструкция, как потестировать это уже сейчас. Больше всего в инструкции мне нравится фраза «Restart Chrome twice».
Почему я режим называю «новым» в кавычках: потому что на iOS мы и так уже работали с похожим поведением, так что если у вас уже были оптимизации под островок и бровку на яблочных смартфонах, то в Android, по идее, заведётся тоже. Более того, Chrome умеет в правильные переменные
https://developer.chrome.com/docs/css-ui/edge-to-edge
В нативных приложениях для 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
Chrome for Developers
Chrome on Android edge-to-edge migration guide | CSS and UI | Chrome for Developers
Build edge-to-edge web experiences
🔥1
Весна пришла — пора паять! 5 проектов на малинке, чтобы не скучать / Хабр
https://habr.com/ru/companies/selectel/articles/893268/
https://habr.com/ru/companies/selectel/articles/893268/
Хабр
Весна пришла — пора паять! 5 проектов на малинке, чтобы не скучать
Март — время, когда хочется заняться чем-то новым. У кого-то это сад, у кого-то — ремонт, а у гиков — электроника на Raspberry Pi. В сегодняшней подборке мы собрали пять свежих проектов на «малинке»:...
Крошечный веб-сервер на ESP32 / Хабр
https://habr.com/ru/companies/otus/articles/894174/
https://habr.com/ru/companies/otus/articles/894174/
Хабр
Крошечный веб-сервер на ESP32
Доступ по сети к вашему DIY‑устройству позволяет сделать его более гибким, ведь для того, чтобы внести какие‑то изменения в настройки к примеру, вашей метеостанции, вы можете...
Forwarded from Уставший техдир
Преждевременная оптимизация
Есть такая тема: когда ты создаешь что-то новое, видишь кучу точек для оптимизации и начинаешь в них проваливаться, тратя уйму времени:
- О, у нас тут в перспективе появится большая нагрузка, давай я заморочусь с кешем и репликацией!
- Смотри, этот кусок кода явно станет bottleneck’ом через три года, давай перепишем его на Go/Rust/C!
- Надо заложить возможность оптимизировать процесс работы до уровня low-code, давай потратим все усилия, спроектируем и закодим сложнейший редактор!
Все эти идеи уводят тебя от первоначальной задачи, которой ты на самом деле занимаешься. Очень важно сфокусироваться на требованиях и сделать их максимально простыми и понятными. И только после того, как у тебя есть реально рабочий прототип, который отвечает всем требованиям, можно переходить к оптимизации.
Двигатель на фото — один и тот же, с разницей в пять лет.
Есть такая тема: когда ты создаешь что-то новое, видишь кучу точек для оптимизации и начинаешь в них проваливаться, тратя уйму времени:
- О, у нас тут в перспективе появится большая нагрузка, давай я заморочусь с кешем и репликацией!
- Смотри, этот кусок кода явно станет bottleneck’ом через три года, давай перепишем его на Go/Rust/C!
- Надо заложить возможность оптимизировать процесс работы до уровня low-code, давай потратим все усилия, спроектируем и закодим сложнейший редактор!
Все эти идеи уводят тебя от первоначальной задачи, которой ты на самом деле занимаешься. Очень важно сфокусироваться на требованиях и сделать их максимально простыми и понятными. И только после того, как у тебя есть реально рабочий прототип, который отвечает всем требованиям, можно переходить к оптимизации.
Двигатель на фото — один и тот же, с разницей в пять лет.
Менеджер закладок на своём сервере / Хабр
https://habr.com/ru/companies/ruvds/articles/896082/
https://habr.com/ru/companies/ruvds/articles/896082/
GitLab CI для Docker-образов / Хабр
https://habr.com/ru/companies/otus/articles/896010/
https://habr.com/ru/companies/otus/articles/896010/
Forwarded from For Web — фронтенд, дизайн, программирование
This media is not supported in your browser
VIEW IN TELEGRAM
В Chrome 135 появилась возможность полной стилизации нативных селектов: другие браузеры пока этого не поддерживают, но такая стилизация может быть прогрессивным улучшением → https://developer.chrome.com/blog/a-customizable-select