Descending Order

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

Пример:

Ввод: 42145     —>  вывод: 54421
Ввод: 145263   —>  вывод: 654321
Ввод: 123456789  —> вывод: 987654321

👉 @seniorFront

Гайд: как попасть с докладом на крупную конференцию и на что обратить внимание при подготовке

Меня зовут Лиза, я ex-программный координатор конференции HighLoad++ и в этой статье расскажу базовые шаги, которые помогут спикерам дойти до программы крупной (а то и крупнейшей) профильной конференции страны.

👉 @seniorFront

​BigInt в JavaScript

Тип большого целого BigInt — примитивный тип, который представляет целые числа больше 253-1. Эти числа уже не помещаются в стандартный примитив «число».

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

Создать BigInt можно двумя способами:

1. Добавить суффикс n в конец записи числа

const biggy = 9997000254740991n

2. Вызвать конструктор BigInt

const alsoBig = BigInt(9997000254999999)

BigInt поддерживает, например, операции сложения +, вычитания -, умножения *, взятия остатка от деления %, возведения в степень **.
Операция деления / также работает, но дробная часть отбросится:

const seven = 7n
const five = 5n

console.log(seven / five)
// 1

BigInt не сериализуется в JSON, то есть не переводится в последовательность битов. Это усложняет использование данного типа данных в задачах взаимодействия с сервером.

Преобразование типов
В операциях BigInt невозможно использовать напрямую с обычными числами типа number: это приведёт к ошибке.

const biggy = 10n
const number = 5

console.log(biggy + number)
// Uncaught TypeError: Cannot mix BigInt and other types,
// use explicit conversions

Чтобы провести операции между BigInt и обычными числами, их нужно явно преобразовать. Например:

const biggy = 10n
const number = 5

console.log(biggy + BigInt(number))
// 15n

console.log(Number(biggy) + number)
// 15

Ограничения
Нет поддержки дробных чисел. BigInt работает только с целыми числами. Дробные числа нельзя использовать с этим типом данных.

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

В BigInt не поддерживаются операции унарного плюса и сдвига битов вправо.

👉 @seniorFront

Temperature line chart

Реализовано на canvas с использованием библиотеки Chart.js

👉 @seniorFront

​Мои Red-Flags при устройстве в IT-компании: Как не стать гребцом

Залетая на очередной собес, я снова и снова встречаю их... Намеки на то, что скоро придется грести веслами: работать до ночи, делать задачи без нормального описания, срывать дедлайны, о которых стало известно буквально за день до окончания, и опять обновлять резюме.

Опоздание или переносы собеседования
Если компания начинает переносить собеседование в последний момент или опаздывает — это первый красный флаг. Конечно, форс-мажоры случаются, но если это регулярность, задумайся. Это может быть признаком плохой организованности и неуважения к твоему времени. Если на собеседовании к тебе не относятся серьезно, что будет потом?

Как реагировать: Один раз — ну ок. Два раза — в мусорку. Цените свое время.

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

Как реагировать: Иногда во всем виноват слабый HR-отдел. Стоит пробиться до реальных членов команды и узнать у них. Я часто встречал нормальную разработку и никудышный HR-отдел.

Пальцем в небо
Если тебе на собеседовании начинают говорить о «больших возможностях» и «супер крутых проектах», но без конкретики — насторожись. Вряд ли проект такой крутой, если команда даже не может рассказать, что конкретно нужно будет делать. А может, тебе вообще предложат работать на проекте, который "только что начался", а по факту он лежит в архиве.

Как реагировать: Требуем конкретики и четких показателей. Не стоит пытаться узнать все устроившись и поработав. Лучше рассмотреть вариант получше.

У нас все честно!
Если на собеседовании тебе говорят "У нас все честно!" или "У нас все прозрачно" — насторожись. Это чаще всего сигнал, что тебя собираются обмануть. Настоящая честность не требует громких заявлений. Если компании приходится так настойчиво уверять, что они "честные", скорее всего, скрывается что-то неприятное. Не доверяй пустым обещаниям, лучше ищи реальные факты и конкретику — это поможет избежать неприятных сюрпризов в будущем.

Как реагировать: Большой красный флаг. Любой обман начинается с риторики а-ля "Я бы мог тебя обмануть как остальные, но я не такой, я честный"... Ага, "не бита, не крашена, в гараже стояла". Избегайте таких собесов.

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

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

👉 @seniorFront

Словарь программисткого жаргона без англицизмов

Часто можно встретить словари «программистского жаргона», однако они как правило на 90% состоят из англицизмов. Это не так интересно, поскольку англицизмов можно создать бесконечное количество и они появляются новые каждый день пачками.

Мне интересно было составить «чисто русский словарь», состоящий в основном из омонимов, то есть слов, использующихся в ином значении.

Дополнения и правки приветствуются )

👉 @seniorFront

Nav Buttons

Оригинальные кнопки меню, реализованные на HTML и SCSS.

👉 @seniorFront

Amazing Button Hover Effect

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

👉 @seniorFront

Когда разработчик видит своё приложение у кого-то на телефоне:

👉 @seniorFront

Music App Interaction

Свёрстано на HTML и CSS. Анимировано библиотекой gsap.

👉 @seniorFront

CSS Illustration - Bicycle

Анимированная иллюстрация на HTML и SCSS.

👉 @seniorFront

Cursor Move Effects

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

👉 @seniorFront

Navigation Button Interaction

Анимация переключения между кнопками реализовано при помощи библиотекой gsap.

👉 @seniorFront

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