👉 @seniorFront

🤔 E.preventDefault() и E.stopPropagation(), для чего нужны?

e.preventDefault() предотвращает стандартное поведение элемента (например, отправку формы при нажатии на кнопку). e.stopPropagation() останавливает дальнейшую передачу события по цепочке DOM, предотвращая его обработку родительскими элементами.

Ставь 👍 если знал ответ

🎞 Функциональное программирование от А до Я. ФП на JS. Монады, функторы, каррирование, композиция

Приветствую всех друзья! На канале новое видео, из серии "Computer science" или для "общего развития". Видео с монтажом, примерами и последовательным раскрытием темы.

В ролике конечно не будет какой то глубокой математической программы или тонкостей для людей, которые пишут на чисто функциональных языках (haskell, lisp, f#), но будет вся необходимая для погружения в тему теория для прикладных разработчиков.

Ссылка на видео - https://youtu.be/ScgmlDb5ed4

Рассмотрим такие темы:
- процедура и функция
- Декларативность
- Чистые функции и сайд эффекты
- Иммутабельность (неизменяемость)
- Функции первого класса
- Функции высшего порядка
- Композиция/конвейер
- Частичное применение и каррирование
- Chaining
- Контейнеры
- Функторы и аппликативные функторы
- Монады
- Спецификация Fantasy-Land

Как обычно буду рад вашей поддержке в виде лайков и комментариев под видео, это очень помогает продвижению роликов и развитию канала! Всем спасибо и приятного просмотра ❤️

​Как общаться с руководителем

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

Первое. Не теряйте ответственности по дороге
Всю дорогу стараюсь донести до своих разработчиков мысль, что задача (таск в Джире) — это их зона ответственности вплоть до попадания кода в прод. Хотя деплоит в прод за редким исключением не разработчик.

Антипример.
— (на дэйлике) Разработчик Васенька, скоро уж страшный зим катит глаза, в смысле, окончание спринта, что у тебя вот с тобой задачкой на 6 человеко-часов?
— Ой, а я же тебе на позапрошлом дэйлике сказал, что Луна в Третьем доме, поэтому на неё забил…
— (немая сцена)

Что пошло не так? Исполнитель неявно спихнул ответственность за свою часть работы на руководителя: пусть Папа Римский помолится за всех нас! Не произошло явной передачи (это когда обе стороны понимают, кто теперь тащит задачу, и фиксируют договорённость где-то, хоть в той же Джире). У подчинённого возникла иллюзия, что если он проговорил вслух о своей проблеме, то добрая фея уже прилетела и всё решила за него.

Второе. Старайтесь не общаться с марсианами
Этот пункт развивает мысль, начатую в первом. Иногда, особенно при разборе какого-то факапа, разработчик начинает говорить о задаче отстранённо: «в коде появилось...», «в ветку влилось...», «в прод залили...». Мой руководитель иногда перебивает такое повествование вопросом: «Кто, марсиане залили?»

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

Третье. Вместе с жалобой приносите проект решения
Конечно, эмоции важны, и совершенно естественно прийти к руководителю со словами «да конём оно...», в смысле «мсье, я обескуражен наметившейся тенденцией». Но ведь вы не только хотите спустить пар, но и, как ответственный исполнитель, решить проблему? — Тогда помогите своему руководителю (самые хитрые тут даже начинают направлять его усилия в нужную им сторону не только по поводу одной задачи, но это отдельное искусство)!

Четвёртое. Руководитель — ваш рычаг, ваш бустер, ваш джинн из бутылки
Частенько люди пишут, мол, я что, нанимался ещё и требования писать, и код тестировать? Я хочу, чтобы мне просто приносили ТЗ, а я просто пилил код, отстаньте от меня все!

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

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

Пятое. Доверие — основа общения
И наконец, пункт, который говорит о базе, на которой строится взаимодействие. Тут не про его осуществление, а про подготовку. Люди, как и все другие социальные существа, постоянно «обнюхивают» друг-друга, то есть стараются построить более-менее точную картину насчёт того человека, с кем они имеют дело.

👉 @seniorFront

​Какие бывают utility types в TypeScript ?

Это встроенные типы, которые помогают манипулировать другими типами и упрощают работу с ними. Они позволяют изменять, расширять, ограничивать и комбинировать типы, что делает код более гибким и безопасным. Вот некоторые из наиболее часто используемых утилити и их примеры:

Partial
Делает все свойства типа T необязательными.

interface User {
  id: number;
  name: string;
  email: string;
}

const updateUser = (id: number, userUpdates: Partial<User>) => {
  // Обновление пользователя
};

updateUser(1, { name: 'Alice' }); // Можно передать только часть свойств

Required
Делает все свойства типа T обязательными.

interface User {
  id?: number;
  name?: string;
  email?: string;
}

const user: Required<User> = {
  id: 1,
  name: 'Alice',
  email: 'alice@example.com'
}; // Все свойства должны быть указаны

Readonly
Делает все свойства типа T только для чтения.

interface User {
  id: number;
  name: string;
  email: string;
}

const user: Readonly<User> = {
  id: 1,
  name: 'Alice',
  email: 'alice@example.com'
};

user.id = 2; // Ошибка: свойство id доступно только для чтения

Pick
Создает тип с набором свойств K из типа T.

interface User {
  id: number;
  name: string;
  email: string;
}

const user: Pick<User, 'id' | 'name'> = {
  id: 1,
  name: 'Alice'
}; // Только свойства id и name

Omit
Создает тип, исключающий свойства K из типа T.

interface User {
  id: number;
  name: string;
  email: string;
}

const user: Omit<User, 'email'> = {
  id: 1,
  name: 'Alice'
}; // Все свойства, кроме email

Record
Создает тип объекта, ключи которого из K, а значения типа T.

type Roles = 'admin' | 'user' | 'guest';

const roles: Record<Roles, string> = {
  admin: 'Admin User',
  user: 'Regular User',
  guest: 'Guest User'
};

Exclude
Создает тип, исключая из T те типы, которые находятся в U.

type T = 'a' | 'b' | 'c';
type U = 'a';

type Result = Exclude<T, U>; // 'b' | 'c'

Extract
Создает тип, включающий только те типы из T, которые также находятся в U.

type T = 'a' | 'b' | 'c';
type U = 'a' | 'c';

type Result = Extract<T, U>; // 'a' | 'c'

NonNullable
Исключает null и undefined из типа T.

type T = string | number | null | undefined;

type NonNullableT = NonNullable<T>; // string | number

ReturnType
Получает тип возвращаемого значения функции T.

function getUser() {
  return { id: 1, name: 'Alice' };
}

type User = ReturnType<typeof getUser>; // { id: number, name: string }

👉 @seniorFront

React — это популярная JavaScript-библиотека, используемая для создания пользовательских интерфейсов. Она основана на компонентах и позволяет строить динамичные и эффективные веб-приложения. React также использует концепцию виртуального DOM (Document Object Model), который значительно ускоряет обновление интерфейса.
Основные концепции React:
1.Компоненты: В React все представление UI состоит из компонентов. Каждый компонент управляет своим собственным фрагментом интерфейса. Компоненты могут включать в себя HTML, CSS и JavaScript.
2.Виртуальный DOM: Виртуальный DOM — это упрощенная версия реального DOM. React сначала вносит изменения в виртуальный DOM, а затем применяет эти изменения к реальному DOM. Это позволяет значительно ускорить процесс обновления страницы.
3.Однонаправленный поток данных: В React данные передаются сверху вниз, от родительского компонента к дочерним. Это упрощает управление состоянием и делает приложение более предсказуемым.

function Counter() {
  const [count, setCount] = useState(0);

  const increment = () => setCount(count + 1);
  const decrement = () => setCount(count - 1);

  return (
    <div>
      <h1>Счётчик: {count}</h1>
      <button onClick={increment}>Увеличить</button>
      <button onClick={decrement}>Уменьшить</button>
    </div>
  );
}

export default Counter;

Объяснение:
1.useState: Это хук, который используется для управления состоянием в функциональных компонентах. В примере переменная count хранит значение счётчика, а функция setCount используется для его обновления.
2.onClick: При нажатии на кнопки вызываются функции increment или decrement, которые увеличивают или уменьшают значение счётчика.

Преимущества React:
1.Быстрое и эффективное обновление: Благодаря виртуальному DOM, React обновляет только те части интерфейса, которые изменились, что повышает производительность.
2.Переиспользуемые компоненты: Компоненты в React можно использовать многократно в разных частях приложения.
3.React Hooks: Хуки React позволяют использовать состояние и другие возможности в функциональных компонентах, что делает код более компактным и удобным.


Таким образом, React — это мощный инструмент для создания современных веб-приложений с высокой производительностью и удобным управлением состоянием.

Assalomu aleykum.Barodaron shumoro bo Idi fitr tabrik mekunam.Allohi mehrubon ruzahoi giriftai shumoro qabul kunad.To Ramazoni digar hamai movu shumoro sihatu salomat rasonad Omin🤲🤲🤲

Дар Telegram акнун метавонед вазифа (таск) гузоред — дар дохили чатҳо!

• Метавонед дар чатҳои шахсӣ ва гурӯҳӣ истифода баред — барои худатон ё барои аъзои гурӯҳ вазифа таъин кунед
• Ҳар як вазифа иҷрокунандаи алоҳида дорад, бо расми профилаш намоиш дода мешавад
• Метавонед режимро интихоб кунед: ё як нафар иҷро мекунад ё ҳамаи иштирокчиён — танзими чандир барои ҳама гуна ҳолатҳо

🚀 Elevating UX with React Native Reanimated + Gesture Handler


I’m excited to share a smooth, gesture-driven UX feature I recently built using react-native-reanimated paired with react-native-gesture-handler.
🔍 What I achieved:
🌀 Created interactive swipe, drag, and spinner effects using Reanimated’s native-thread animations.
🎯 Integrated gesture detection with Gesture Handler to deliver fluid, responsive motion—even during complex interactions.
🧩 Designed modular UI components that feel native and intuitive.
Why it matters:
Reanimated moves animations off the JS thread, avoiding frame drops and delivered buttery smoothness
Gesture Handler handles low-latency swipe, pinch, and tap gestures, solving gesture conflicts in nested views .
Together, they empower developers to craft polished interfaces, from Tinder-style cards to draggable sheets

🤝 How this benefits teams & apps:
📈 Better performance on lower-end devices
👌 Safer and more maintainable gesture code
🧰 Easily extendable—mix in Reanimated for animation, Gesture Handler for interaction, even Skia for visuals
If you're working with react-native-reanimated and react-native-gesture-handler, feel free to message me — I'm happy to help.

✍️ Друзья! Открываем запись на новый поток курсов по Фронтенд-разработке! 🧑🏻‍💻

💻 Если ты мечтаешь создавать современные и стильные сайты — начни путь в IT уже в августе! Тебя ждут понятные уроки, поддержка наставников и дружелюбная атмосфера.

📌 Что важно знать:
• Старт: август 2025
• Продолжительность: ~5 месяцев;
• Занятия: 3 раза в неделю
• Начало занятий: 18:00
• Длительность: 2 часа
• Место проведения занятий: Душанбе, Регус — Бустон Сити (ориентир: магазин «Гуля Голд», лицей №4)
• Стоимость 1-го месяца: 200 сомони

✅ По завершении первого месяца — экзамен. Успешно сдавшие смогут продолжить обучение на следующих этапах.

📲 Перейди по ссылке заполни заявку на обучение прямо сейчас.

🤖 Заявку также можно отправить через нашего бота @MyHamdam_bot

🚀 Не упусти шанс освоить востребованную профессию в сфере веб-технологий!

📱 975-68-86-86

Телеграм | Фейсбук | Инстаграм

Асоси фарқиятҳои байни localStorage, sessionStorage ва cookies чист?

✅ Ҷавоб ҳар 10 дақиқа гузошта мешавад!

Javob:
localStorage → доимӣ нигоҳ дошта мешавад, ҳатто вақте браузер баста шавад ҳам нест намешавад.

sessionStorage → танҳо то поёни сессия нигоҳ дошта мешавад.

cookies → ба сервер низ фиристода мешавад, ҳаҷми он хурдтар аст!

📖 Просто оставлю это здесь

https://developer.chrome.com/blog/chrome-devtools-mcp

https://github.com/ChromeDevTools/chrome-devtools-mcp/?tab=readme-ov-file#chrome-devtools-mcp

JSON не поддерживает комментарии 😡

Не проблема! В package.json можно использовать специальные поля для комментариев 🪿

⚡️Volta

Все мы знаем про инструмент управления версиями Node.js под названием NVM (Node Version Manager), но есть ещё один - Volta.

📌Какие же отличия?

Volta не требует инициализации функций оболочки при каждом открытии терминала и выбирает версию на лету. Volta закрепляет и Node, и npm/yarn на проект через package.json, а nvm фокусируется на Node и обычно опирается на .nvmrc с ручным переключением.

📕 Документация тут