Senior Frontend - javascript, html, css

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

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

 nthFibo(4) == 2

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

REKONFA Live 6 ноября приглашаем всех, кто имеет отношение к маркетингу и рекламным технологиям, обсудить рынок, тренды, вызовы и их решения. С докладами на актуальные темы выступят лидеры индустрии и медийные спикеры. Принять участие можно офлайн и онлайн. Мероприятие бесплатное, нужно только зарегистрироваться. Зарегистрироваться #реклама 18+ ya.rekonfa.ru О рекламодателе

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

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

Высшее образование онлайн — не откладывайте карьеру! ✅Идет набор: от 6700 ₽/мес.* Московский технологический институт предлагает: — Высшее образование в московском вузе без приезда на сессии — Полностью дистанционный онлайн-формат — Возможность обучаться дома, на работе, в путешествии — Диплом государственного образца — Более 80 направлений на выбор (IT, инженерные, экономические, педагогические, управленческие и другие) — 5 способов оплаты обучения — Поддержка персонального куратора: от поступления до получения диплома Узнать больше #реклама 16+ mti-education.ru О рекламодателе

Card Swipe Carousel Карусель карточек, реализованная на чистом JS. 👉 @seniorFront

Character choose with preview card animation Реализовано без использования JS при помощи техники CSS sprites. 👉 @seniorFront

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

Memory Game in JavaScript В этом видео создается игра с карточками на запоминание на чистом JS. 👉 @seniorFront

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

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

​Как избавиться от чувства вины, что ты "недостаточно хорош"? Расследование с неожиданным финалом Чувствуете, что могли бы работать больше, лучше, быстрее? Кажется, что другие справляются круче, а ваши достижения — не то? Это знакомо многим, но мало кто знает, откуда берется эта "адская" жажда достижений. Вечный дефицит Сколько бы вы ни добивались, всегда кажется, что этого мало. Трудоголики бегут за новой вершиной, а люди с синдромом самозванца считают свои успехи случайностью. Почему? Корни в детстве Всё начинается с установок: "Ты можешь лучше!" или "Смотри, как твой брат уже всё сделал!". Родители хвалят за пятёрки, сравнивают с другими, и ребёнок учится верить: "Я ценен, только если у меня есть достижения". Зачем нужны достижения? 1. Защита от стыда. Достижения — как щит от критики. В детстве ошибки часто сопровождались стыдом: "Ты не соответствуешь, тебя отвергнут". Стыд — мучительная эмоция, эволюционно связанная с выживанием. Чтобы её избежать, мы стремимся к совершенству. 2. Валюта любви. Достижения становятся способом заслужить внимание и принятие. Но беда в том, что любовь ими не купишь, а успехи быстро обесцениваются — вчерашний рекорд сегодня уже норма. Кольцо трудоголизма Эта ловушка звучит так: "Только исключительные люди достойны любви и уважения, а исключительность доказывается достижениями". И вот вы бежите за вершинами, надеясь, что однажды вас "полюбят" и вы обретёте счастье. Но это колесо бесконечно. Как выбраться? 1. Осознать: чувство "недостаточно хорош" — это эхо детских установок, а не правда о вас. 2. Принять: ошибки — не приговор, а часть пути. Стыд не должен управлять вами. 3. Перестать гнаться за "валютой любви". Вы ценны сами по себе, без достижений. Пора сойти с беличьего колеса. Вы уже достаточно хороши. 👉 @seniorFront

Pixeled Loader Точки генерируются и анимируются в JS. 👉 @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

Мощь Intl API: подробное руководство по встроенной в браузер интернационализации В двух словах: интернационализация — это не только перевод текста. Она включает в себя форматирование дат, правильное образование множественного числа, сортировку имен и многое другое с учетом конкретных локалей. Вместо тяжелых сторонних библиотек современный JavaScript предлагает Intl API — мощный встроенный инструмент для работы с i18n. Еще одно напоминание о том, что веб действительно глобален. 👉 @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

Outlined Mobile Cards Карточки созданы и анимированы на чистом CSS. 👉 @seniorFront

Amazing Rain & Lightning Animation Effects В этом видео создаются анимации дождя и молнии на чистых CSS и JS. 👉 @seniorFront