Remove the parentheses

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

Примечания
Кроме круглых скобок в строке могут встречаться только буквы и пробелы. Не беспокойтесь о других скобках, таких как "[]" и "{}", так как они никогда не появятся. Круглых скобок может быть несколько. Круглые скобки могут быть вложенными.

Пример:

removeParentheses("a (bc d)e") => "a e"
removeParentheses("a(b(c))") => "a"

👉 @seniorFront

Ты — ненастоящий айтишник / Дедовщина в IT

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

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

👉 @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

Supercharged CSS with Anchor Positioning

Реализовано при помощи CSS anchor. Анимировано библиотекой gsap. Перемещения созданы библиотекой Draggable.

👉 @seniorFront

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

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

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

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

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

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

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

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

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

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

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

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

👉 @seniorFront

Отцы и дети: как привычки пользователей из разных поколений влияют на ваш продукт

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

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

👉 @seniorFront

SVG Animation Using Animation Element

Вся сцена - это SVG картинка, анимируемая при помощи SVG animate.

👉 @seniorFront

Как подготовиться к собеседованию и переехать в другую страну? Что делать, если выгорание близко и работа совсем не радует? Как вкатиться в IT за полгода, если тебе уже за 30?

Ответы на эти вопросы — в канале «Люди и код». Команда канала беседует с опытными и начинающими разработчиками и программистами, находит интересные и неожиданные темы и помогает влюбиться в IT. Про мемы и конкурсы тоже не забываем :) А ещё у нас есть подкаст, послушать его можно по этой ссылке.

Наши любимые материалы:

1. Как грамотно начать свой путь в IT в России в современных условиях?
2. Кто такой DevRel? Чем он занимается и сколько зарабатывает?
3. Какие игры помогут прокачаться в программировании? Подборка.
4. Как транзисторы перевернули наш мир: большой спецпроект
5. Как программисту пройти собеседование. 6 советов.
Подписывайтесь на канал «Люди и код»: @skillbox_media_code

Реклама. ЧОУ ДПО «Образовательные технологии «Скилбокс (Коробка навыков)», ИНН: 9704088880 erid:2VtzqwECa4f

Animated Click Effect

В этом видео создается анимация, запускаемая по клику на CSS и JS.

👉 @seniorFront

Отправляй своему руководителю

👉 @seniorFront

Background Line Animation

Реализовано при помощи библиотеки slick-carousel. Свёрстано на чистых HTML и CSS.

👉 @seniorFront

Super charger

Реализовано и анимировано на HTML и SCSS.

👉 @seniorFront

Checkout Form

В этом видео создается форма оплаты в виде карточки на HTML и CSS.

👉 @seniorFront

Tab Bar Interaction

Создано на HTML и CSS. Логика переключения табов реализована в JS.

👉 @seniorFront

Запишите число в развернутом виде

Вам будет дан номер, и вам нужно будет вернуть его в виде строки в расширенной форме
Все числа будут целыми числами больше 0

Пример:

expandedForm(12); //  '10 + 2'
expandedForm(42); //  '40 + 2'
expandedForm(70304); //  '70000 + 300 + 4'

👉 @seniorFront

Всё под контролем: сила useRef и forwardRef в React

Начнем с небольшой истории. Как-то раз я с размахом накинулся на проект — в духе нынешних фреймворков всё было обложено компонентами, декларативный стиль царил, все шло идеально… ну почти. Дошел я, значит, до нужды контролировать DOM-узлы напрямую. И что вы думаете? Прямого доступа нет, React закрыл от меня этот мир, сидит и ухмыляется: мол, мы тут за производительность боремся, зачем тебе что-то трогать руками?

Но мы не из тех, кто сдаётся, верно? React предлагает своё решение — рефы, и именно о них сегодня пойдет речь.

👉 @seniorFront

​Чем HTTP/2 лучше HTTP/1?

HTTP/2 предпочтительнее HTTP/1.1 потому, что он позволяет мультиплексирование запросов по одному соединению, сжимает заголовки для эффективности передачи данных и улучшает общую производительность веб-сайтов за счет бинарного формата и приоритезации потоков.

Минусы
- HTTP/1.1 позволяет использовать несколько одновременных соединений для загрузки ресурсов с одного домена, но это число ограничено (обычно 6-8 соединений). Это приводит к значительным задержкам, особенно при загрузке большого количества ресурсов (изображений, скриптов, стилей) на современных веб-страницах.

- В HTTP/1.x заголовки передаются в каждом запросе и ответе, что увеличивает накладные расходы, особенно при использовании длинных куки-файлов и других данных заголовков.

- HTTP/1.x не поддерживает отправку нескольких запросов и ответов одновременно по одному соединению, что приводит к блокировке при медленных запросах или больших ресурсах.

- В HTTP/1.x соединения часто закрываются после завершения передачи данных, что требует повторного установления соединений для последующих запросов, увеличивая задержки.

Плюсы
- HTTP/2 использует бинарное кодирование вместо текстового в HTTP/1.x, что упрощает анализ и обработку данных, а также снижает вероятность ошибок.

- HTTP/2 позволяет отправлять несколько запросов и получать несколько ответов одновременно по одному TCP-соединению, устраняя блокировку и повышая эффективность передачи данных.

- HTTP/2 использует эффективное сжатие заголовков, что значительно уменьшает накладные расходы при передаче заголовков.

- HTTP/2 поддерживает установку приоритетов для отдельных потоков данных, что позволяет более эффективно управлять передачей важных ресурсов.

- HTTP/2 поддерживает длительные соединения, что уменьшает количество повторных установлений соединений и улучшает производительность.

- HTTP/2 позволяет серверу отправлять ресурсы клиенту до того, как они будут запрошены, что ускоряет загрузку страниц.

👉 @seniorFront

Sphere Packing

Создано и анимировано на canvas при помощи библиотеки Three.js

👉 @seniorFront

​Тренды в дизайне и сайтах на 2025-й год

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

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

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

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

4. Неразрывность эмоциональности и практичности
Зачастую эмоциональность и практичность разделяются. Студии брендинга и дизайна фокусируются на визуале и эмоциях. А UX- и UI-дизайн акцентирует внимание на функциональности. В 2025-ом году будет важно создавать решения, которые не только красиво выглядят, но и удобны в использовании вопреки устоявшимся подходам.

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

👉 @seniorFront

Глубинные интервью в UX-исследованиях VS тактика проведения допроса

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

Давайте примерим на себя маску Шерлока Холмса и погрузимся в сравнительный анализ между тактикой проведения допроса и правилами проведения глубинного интервью.

👉 @seniorFront