Black Hole

Реализовано с использованием технологии WebGL.

👉 @seniorFront

Creative CSS Icons

В этом видео стилизуются иконки, а также им добавляется эффект при наведении.

👉 @seniorFront

Section Navigator

Создано на React, анимировано библиотекой gsap.

👉 @seniorFront

Alphabetized

Создайте функцию, которая отсортирует символы строки в алфавитном порядке.

Пример:
alphabetized("The Holy Bible") // "BbeehHilloTy"

👉 @seniorFront

Neu Toggle

Оригинальный переключатель, созданный на HTML и CSS.

👉 @seniorFront

​Что такое предохранители типов в TypeScript?

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

Определение предохранителей типов
Чтобы определить предохранитель типа, создайте функцию, которая принимает переменную или параметр и возвращает предикат типа. Предикат типа — это булево выражение, которое сужает тип параметра в пределах области видимости функции.

 function isString(value: any): value is string {
   return typeof value === "string";
 }

В этом примере определяем функцию предохранителя типа isString, которая проверяет, является ли заданное значение типом string. Функция возвращает предикат типа value is string, который сужает тип параметра value в пределах области видимости функции.

Использование предохранителей типов
Чтобы использовать предохранитель типа, просто вызовите функцию предохранителя типа в условном операторе, например в if и switch.

function processValue(value: string | number) {
  if (isString(value)) {
    console.log(`The length of the string is: ${value.length}`);
  } else {
    console.log(`The square of the number is: ${value * value}`);
  }
}

В этом примере определяем функцию processValue , которая принимает значение типа string | number. Используем функцию предохранителя типа isString, чтобы проверить, является ли значение строкой. Если это так, обращаемся к свойству length, характерному для string типа. В противном случае принимаем значение за number и вычисляем его квадрат.

Теперь продемонстрируем, как работает предохранитель типа на практике.

 processValue("hello"); // Вывод: Длина строки -  5
 processValue(42); // Вывод: Квадрат числа равен 1764

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

👉 @seniorFront

Gooey Toggle Switch

Создано и анимировано в HTML и CSS.

👉 @seniorFront

​Правильный подход к оценке проекта

Определите цели
Зачем нужна оценка? Что вы оцениваете? Только операции конструирования или весь процесс разработки? Только затраты на проект или на проект плюс отпуска, праздники, обучение и другие мероприятия, не относящиеся к проекту? Насколько точной должна быть оценка, чтобы соответствовать вашим целям? Какую она должна иметь степень достоверности?

Выделите время для оценки
Скоропалительные оценки неточны. Если вы оцениваете большой проект, рассматривайте процесс оценки как минипроект и выделите время для минипланирования оценки, чтобы хорошо ее выполнить.

Выясните требования к программе
Точно так же, как архитектор не может сказать, сколько будет стоить «достаточно большой» дом, так и вы не сможете надежно оценить «достаточно большой» программный проект. Бессмысленно ожидать от вас оценки объема работ, требуемых для реализации чего-то, если это «что#то» еще не определено. Определите требования или запланируйте подготовительный этап для исследований, прежде чем что-то оценивать.

Делайте оценки на низком уровне детализации
В зависимости от обозначенных целей основывайте оценки на подробном изучении свойств проекта. В целом чем подробней будет ваша экспертиза, тем точнее будет оценка.

Используйте несколько способов оценки и сравнивайте полученные результаты
Не все методики оценки приведут к одинаковым результатам, так что попробуйте несколько. Изучите результаты, полученные разными способами.

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

👉 @seniorFront

Parallax Seasons

Анимировано библиотекой gsap.

👉 @seniorFront

Jake's Instagram

Карусель создана на чистом CSS. В JS реализована смена цвета при клике.

👉 @seniorFront

Все кто выбрал вариант 1 - молодцы 👍

Остальным рекомендую с этим разобраться в первую очередь!

Это простые и очень мощные инструменты для адаптивных макетов

Например, чтобы расположить элементы как на картинке достаточно добавить 2 свойства для родительского блока:

display: flex;
align-items: (один из вариантов)

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

Ребята разложили все по полочкам, а задания можно выполнять прямо в браузере

😼 P.S. выравнивать нужно будет в основном котов

How To Create Dropdown Menu

В этом видео создаётся выпадающее меню на HTML, CSS и JS.

👉 @seniorFront

👉 @seniorFront

Sliding Image Track

В JS созданы обработчики событий, в которых анимируется CSS свойство transform.

👉 @seniorFront

Focus

В JS создан обработчик события движения курсора, в котором задаётся значение CSS переменной. Эта CSS переменная устанавливает положение элемента-маски.

👉 @seniorFront

👉 @seniorFront

Sci-Fi Card

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

👉 @seniorFront

Responsive Image Carousel

Свёрстано на HTML и CSS. Логика переключения слайдов реализована в JS.

👉 @seniorFront