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

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

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

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

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

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

Animated Click Effect

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

👉 @seniorFront

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

👉 @seniorFront