Single Keyframe Tricks

Для каждой кнопки создана CSS анимация, которая включается и отключается при нажатии.

👉 @seniorFront

CSS Mathematics - infinity loop

Реализовано на HTML и SCSS. В анимации прописано движение по осям X и Y для частиц. Для этого используется CSS transform со значениями calc(cos(var(--angle)) * var(--radius)) и calc(sin(var(--angle)) * var(--radius) * -1);

👉 @seniorFront

9 Dots Menu

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

👉 @seniorFront

CSS scroll-driven scroll-snapping animations

Реализовано без использования JS. При помощи CSS scroll-snap.

👉 @seniorFront

Exes and Ohs

Проверьте, имеет ли строка одинаковое количество "x" и "o". Метод должен возвращать булево значение и быть нечувствительным к регистру. Строка может содержать любой символ.

Примеры:
XO("ooxx") => true
XO("xooxx") => false
XO("ooxXm") => true
XO("zpzpzpp") => true
XO("zzoo") => false

👉 @seniorFront

Bouncy image radio group

Это grid, параметры которого изменяются при нажатии на его элемент. Плавность достигается при помощи CSS transition.

👉 @seniorFront

​Можете ли вы привести пример каррированной функции (curry function) и в чём их преимущество?

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

function curry(fn) {
if (fn.length === 0) {
return fn;
}
function _curried(depth, args) {
return function (newArgument) {
if (depth - 1 === 0) {
return fn(...args, newArgument);
}
return _curried(depth - 1, [...args, newArgument]);
};
}
return _curried(fn.length, []);
}

function add(a, b) {
return a + b;
}

var curriedAdd = curry(add);
var addFive = curriedAdd(5);

var result = [0, 1, 2, 3, 4, 5].map(addFive); // [5, 6, 7, 8, 9, 10]

👉 @seniorFront

Service Slider

Анимировано в CSS. Логика смены текста и запуска анимаций реализована в JS.

👉 @seniorFront

​3 категории менеджеров проектов

Лично я сторонник разбивки, которую давно у кого-то услышал - менеджеров по стилю управления можно грубо разбить на 3 категории:

- Менеджер стартапов и ламповых команд. Друзья и товарищи всех и каждого в команде. Они подробно вникают в каждую ситуацию и задачу на проекте, зачастую разбираются (или стараются разобраться) в технических подробностях проекта, а не только в бизнесовой части.

- Менеджер из среднего бизнеса. Эти менеджеры часто уже меньше вникают в техническую часть задач, работают с задачами чуть более верхнеуровнево, больше времени посвящая планированию и отладке процессов. Часто именно здесь начинается полноценное делегирование задач от менеджера - коллегам.

- Корпоративные акулы. Это боги стратегического и тактического планирования, оперируют задачами уже практически абстрактно и максимально сосредоточены на менеджменте в его эталонном виде. По тому, с кем у меня был опыт общения - такие менеджеры уже намного проще и жестче относятся к косякам команды, особо не вникая в человеческие причины этих косяков.

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

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

👉 @seniorFront

11 марта Newprolab запускает уже 14-й поток программы Data-Engineer

Программа будет полезна junior и middle дата-инженерам, аналитикам данных, бэкенд-разработчикам, техлидам и менеджерам, работающим с дата-командой

- 7 недель (11 марта – 27 апреля)
- 20 занятий с преподавателями в зуме
- 6 лаб с реальными данными
- чат с участниками и поддержка координаторов

📌Что дает программа:
1) научитесь решать типичные задачи DE и реально станете дата-инженером на время программы
2) структурируете ваши знания и познакомитесь с новыми инструментами
3) поработаете с облачным кластером для решения лаб с реальными данными
4) видеозаписи и другие материалы программы останутся у вас навсегда

📌Преподаватели – практики из ведущих компаний, рассказывают о сложном простым языком и ответят на все ваши вопросы

📌Промокод DEFRIENDS дает скидку 20%

[Подробная информация и регистрация]

Blob Switch

Оригинальный переключатель, стилизованный и анимированный в SCSS.

👉 @seniorFront

Bubble Preloader

Необычный loader на HTML и SCSS.

👉 @seniorFront

Responsive Image Slider

В этом видео создается адаптивный слайдер на HTML, CSS и JS.

👉 @seniorFront

👉 @seniorFront

Animated Number Spinner

Логика заполнения шкалы при нажатии на кнопки реализована в JS.

👉 @seniorFront

Day/Night Lighthouse Illustration

Свёрстано на HTML и CSS без использования картинок.

👉 @seniorFront

👉 @seniorFront

Login Form

В этом видео создается анимированная форма входа на HTML и CSS.

👉 @seniorFront

accordion gallery zoom animation

Реализовано на HTML и SCSS, без использования JS.

👉 @seniorFront