envelope with animation

Свёрстано на чистых HTML и CSS. При наведении запускаются CSS трансформации.

👉 @seniorFront

Our Services Box

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

👉 @seniorFront

Anxious dots

Реализовано на canvas и чистом JS.

👉 @seniorFront

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