Amazing Rain & Lightning Animation Effects

В этом видео создаются анимации дождя и молнии на чистых CSS и JS.

👉 @seniorFront

Outlined Mobile Cards

Карточки созданы и анимированы на чистом CSS.

👉 @seniorFront

Lazy Repeater

Создайте функцию makeLooper(). В эту функцию передайте строку. Вызов этой функции вернет другую функцию, каждый вызов которой должен возвращать символы переданной строки по очереди.

Пример:

 var abc = makeLooper('abc');
 abc(); // should return 'a' on this first call
 abc(); // should return 'b' on this second call
 abc(); // should return 'c' on this third call
 abc(); // should return 'a' again on this fourth call

👉 @seniorFront

Мощь Intl API: подробное руководство по встроенной в браузер интернационализации

В двух словах: интернационализация — это не только перевод текста. Она включает в себя форматирование дат, правильное образование множественного числа, сортировку имен и многое другое с учетом конкретных локалей. Вместо тяжелых сторонних библиотек современный JavaScript предлагает Intl API — мощный встроенный инструмент для работы с i18n. Еще одно напоминание о том, что веб действительно глобален.

👉 @seniorFront

​Зачем нужны дженерики?

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

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

Безопасность типов
Использование дженериков позволяет избежать ошибок, связанных с типами, поскольку компилятор TypeScript может проверять типы на этапе компиляции.

Гибкость и абстракция
Дженерики предоставляют возможность создавать более гибкие и абстрактные компоненты, которые могут работать с любыми типами данных, обеспечивая при этом строгую типизацию.

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

function identity<T>(value: T): T {
  return value;
}

const numberIdentity = identity(42); // T is inferred as number
const stringIdentity = identity("Hello"); // T is inferred as string

Классы
Классы могут использовать дженерики для работы с различными типами данных:

class Box<T> {
  contents: T;
  
  constructor(value: T) {
    this.contents = value;
  }
  
  getContents(): T {
    return this.contents;
  }
}

const numberBox = new Box<number>(123);
console.log(numberBox.getContents()); // 123

const stringBox = new Box<string>("Hello");
console.log(stringBox.getContents()); // Hello

Интерфейсы
Интерфейсы могут использовать дженерики для описания структур данных, которые могут содержать различные типы:

interface Pair<T, U> {
  first: T;
  second: U;
}

const numberStringPair: Pair<number, string> = {
  first: 42,
  second: "Answer"
};

const booleanArrayPair: Pair<boolean, boolean[]> = {
  first: true,
  second: [true, false, true]
};

Ограничения дженериков
Иногда требуется ограничить типы, которые могут быть переданы дженерикам. Для этого используются ограничения (extends). В этом примере функция logLength принимает только те типы, у которых есть свойство length.

function logLength<T extends { length: number }>(value: T): void {
  console.log(value.length);
}

logLength("Hello"); // 5
logLength([1, 2, 3]); // 3
logLength({ length: 10, value: "example" }); // 10

👉 @seniorFront

Pixeled Loader

Точки генерируются и анимируются в JS.

👉 @seniorFront

​Как избавиться от чувства вины, что ты "недостаточно хорош"? Расследование с неожиданным финалом

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

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

Корни в детстве
Всё начинается с установок: "Ты можешь лучше!" или "Смотри, как твой брат уже всё сделал!". Родители хвалят за пятёрки, сравнивают с другими, и ребёнок учится верить: "Я ценен, только если у меня есть достижения".

Зачем нужны достижения?
1. Защита от стыда. Достижения — как щит от критики. В детстве ошибки часто сопровождались стыдом: "Ты не соответствуешь, тебя отвергнут". Стыд — мучительная эмоция, эволюционно связанная с выживанием. Чтобы её избежать, мы стремимся к совершенству.

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

Кольцо трудоголизма
Эта ловушка звучит так: "Только исключительные люди достойны любви и уважения, а исключительность доказывается достижениями". И вот вы бежите за вершинами, надеясь, что однажды вас "полюбят" и вы обретёте счастье. Но это колесо бесконечно.

Как выбраться?
1. Осознать: чувство "недостаточно хорош" — это эхо детских установок, а не правда о вас.
2. Принять: ошибки — не приговор, а часть пути. Стыд не должен управлять вами.
3. Перестать гнаться за "валютой любви". Вы ценны сами по себе, без достижений.

Пора сойти с беличьего колеса. Вы уже достаточно хороши.

👉 @seniorFront

Как мы проектируем личный кабинет ресторана: процессы, решения и ошибки

Меня зовут Диана, я дизайн-лид двух направлений в Купере. Сегодня расскажу про одно из них — RTE (ready-to-eat), где мы развиваем личный кабинет ресторана. В статье поделюсь тем, как мы выстроили процессы и что из них реально работает, а также расскажу, как мы проектируем личный кабинет ресторана и для кого он создаётся.

👉 @seniorFront

Draw Random Underline

Подчеркивания - это SVG картинки, анимируемые библиотекой gsap при наведении.

👉 @seniorFront

Memory Game in JavaScript

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

👉 @seniorFront

Надоедливый менеджер

👉 @seniorFront

Character choose with preview card animation

Реализовано без использования JS при помощи техники CSS sprites.

👉 @seniorFront

Card Swipe Carousel

Карусель карточек, реализованная на чистом JS.

👉 @seniorFront

Responsive Cards

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

👉 @seniorFront

Cookie Loader

Оригинальный загрузчик, анимированный в CSS. Логика запуска каждой анимации реализована в JS.

👉 @seniorFront

N-th Fibonacci

Напишите функцию, которая при задании числа (n) возвращает n-е число в последовательности Фибоначчи.

Пример:

 nthFibo(4) == 2


Потому что 2 - это четвертое число в последовательности Фибоначчи.

Для справки, первые два числа в последовательности Фибоначчи - это 0 и 1, а каждое последующее число - это сумма двух предыдущих.

👉 @seniorFront

Математика и веб-разработка: как мы добавили интерактивную кривую Безье в редактор изображений

В статье расскажу про интерактивную стрелку в редакторе изображений. Вы узнаете: как строятся кривые Безье и какие полезные свойства имеют; как вычислить кривую Безье, проходящую через заданные точки; как найти ограничивающую площадь этой кривой. Рассмотрим плюсы и минусы реализаций на Canvas и SVG.

👉 @seniorFront

​Какими способами можно визуально скрыть элемент в CSS?

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

1. display: none;
- Свойство display: none; полностью убирает элемент из потока документа, делая его невидимым и не занимающим место на странице.

2. visibility: hidden;
- Свойство visibility: hidden; скрывает элемент, но все равно оставляет его в потоке документа, так что место на странице будет занято.

3. opacity: 0;
- Установка opacity: 0; делает элемент полностью прозрачным, но он остается в потоке и может влиять на макет страницы.

4. position: absolute; left: -9999px;
- Присвоение элементу position: absolute; left: -9999px; перемещает его за пределы видимой области экрана, сохраняя доступность для скринридеров.

5. clip-path: inset(100%); opacity: 0;
- Этот метод использует clip-path: inset(100%); opacity: 0; для скрытия элемента за пределами видимой области.

6. width: 0; height: 0; overflow: hidden;
- Установка width: 0; height: 0; overflow: hidden; может быть использована для скрытия содержимого элемента.

Каждый из этих методов имеет свои особенности и может применяться в зависимости от требуемого поведения элемента на странице.

👉 @seniorFront

The Great Fall

Создано и анимировано с использованием возможностей библиотеки Three.js

👉 @seniorFront

​Я — идеальный программист

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

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

Я — идеальный программист. Разбираюсь в бизнесе круче CEO: без понимания каждого винтика разработки не ведёшь. Не собираю требования с коллег, не ругаюсь за дубли — готов заменить всех. Моё видение целостное: знаю цели, стратегию компании. Злюсь, если кто-то не вписывается.

Я — идеальный программист. Весь код покрыт тестами: решаю проблемы, предвижу и предотвращаю. Тестировщики не нужны — сам отлаживаю, анализирую баги. Девопсы? Сам владею софтом. Менеджер? Сам юзаю продукты и знаю нужды пользователей.

Я — идеальный программист. Начинал с Assembler, Cobol, Lisp, Erlang... C, C++, Java, JS, Go, Python — база. Фуллстек, плюс немного дизайна. Могу работать один: legacy, правки старше меня — легко.Я — идеальный программист. Трачу три зарплаты в год на обучение, прохожу все курсы компании. На переднем крае технологий и менеджмента, английский на уровне, все сертификаты во всём.

Я — идеальный программист. Хобби: робот на Arduino, моб-игры, LeetCode. Непрерывно придумываю и реализую. Хобби вдохновляют на работу.

Я — идеальный программист. Если тимлид орёт — продолжаю кодить: у них стресс, они за дело. Почему не тимлид? Живу кодом, не хочу рулить. В команде все неидеальны — не сработаемся. Код совершенен: зависит только от меня.

Я — идеальный программист. Обожаю рефакторить: каждая строка, функция — идеал. Трачу время (не в ущерб дедлайну), переписываю за коллегами для оптимизации.

Я — идеальный программист. Сделал code style компании, напоминаю коллегам. Точка с запятой, скобки — важно. Комментарии? Нет: код самодокументируемый, читабельный.

Я — идеальный программист. Могу удалёнку, но офис — чтобы фокус на коде. Раздражают распределёнщики: на созвонах без камеры жуют пельмени. Удалёнка = прокрастинация, быт. Дорога? Время на самообразование с планшета — тещу новое app для тайм-менеджмента.

Я — идеальный программист. Сам общаюсь с клиентами, опросы. Маркетологи не слышат между строк, не понимают проблем. Каждый маркетолог должен пройти курс по dev — иначе не поговоришь: что такое exception и mutex?!

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

Я — идеальный программист. Предложили менторство джунам — тяжело. Объясняю простое, а они косячат. За две недели можно освоить мои принципы. Они никогда не станут идеальными!

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

Я — идеальный программист. Работаю за идею, не за бабки. Деньги круто, но важно соответствие вклада и оплаты. Обидно: нас недооценивают, не понимают — только идеальный программист создаст идеальный софт. Жаль, что пользователи никогда не бывают идеальными.

Я — идеальный программист. Проблема лишь в том, что я не существую.

👉 @seniorFront