luminous rain

Генерация и анимация капли реализована в JS. Волна анимирована в CSS.

👉 @seniorFront

Steps

В этом видео создаётся анимация CSS свойства transform: rotate из четырех шагов.

👉 @seniorFront

За ту же зарплату...

👉 @seniorFront

Panels

Свёрстано на HTML и Less. Логика переключения сцен реализована на чистом JS.

👉 @seniorFront

Toggle

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

👉 @seniorFront

How to Create Card

В этом видео создается карточка с эффектами при наведении на Html и CSS.

👉 @seniorFront

Illustration brought to life

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

👉 @seniorFront

Shortest Word

Дана строка слов, верните длину самого короткого слова.
Строка никогда не будет пустой, и вам не нужно учитывать различные типы данных.

Пример:

findShort("Let's travel abroad shall we") => 2

👉 @seniorFront

Ограничения в использовании иконок в Figma

Знаком ли вам случай, когда дизайнеры используют не совсем те иконки, которые вам хотелось бы? В одной части интерфейса, к примеру, могут использоваться только иконки типа stroke, в другой части — типа fill. В компоненте chip могут использоваться иконки размером 16px, а в кнопках — 24px и т. п. Но написать в мануале об этом будет недостаточно: кто-то не прочитает, кто-то забудет. Но что, если бы можно было ограничить их использование свойствами компонента? Такой способ есть. Давайте расскажу, как это сделать.

👉 @seniorFront

​Что такое контекст в функции ?

Контекст в функции определяет, как ссылка this будет доступна внутри этой функции. Он относится к объекту, в контексте которого выполняется текущий код, и может изменяться в зависимости от того, как и где вызывается функция.

Как работает this в разных ситуациях:
1. В глобальном контексте: Вне любой функции он ссылается на глобальный объект. В браузере это будет window, а в Node.js — global.

2. Внутри функции:
- При обычном вызове функции он также ссылается на глобальный объект (в строгом режиме this будет undefined, что предотвращает случайное изменение глобального объекта).
- В методе объекта он ссылается на объект, для которого вызывается метод.

3. При использовании конструктора (с new): Будет ссылаться на вновь созданный объект.

4. При использовании call(), apply(), bind(): Эти методы позволяют явно задать контекст для этой в функции.

Примеры:

Глобальный контекст

console.log(this === window); // true в браузере

Функция внутри объекта

const person = {
  name: 'Иван',
  sayName: function() {
    console.log(this.name);
  }
};

person.sayName(); // Вывод: Иван

В этом примере this внутри sayName ссылается на объект person.

Изменение контекста с bind()

const person = {
  name: 'Иван',
};

function sayName() {
  console.log(this.name);
}

const sayNameForPerson = sayName.bind(person);
sayNameForPerson(); // Вывод: Иван

Здесь мы явно задаем контекст для this с помощью bind(), чтобы функция sayName могла ссылаться на person.

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

👉 @seniorFront

Recording Toggle

Реализовано на React и TypeScript. Стилизовано в SCSS.

👉 @seniorFront

Как айтишнику понять, на что он способен за пределами найма, вопреки безумным страхам и сомнениям

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

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

👉 @seniorFront

​Где взять энергию? Эпидемия выгорания айтишников

Многие ИТ‑компании в скрытой или активной форме пропагандируют переработки. Связано это и с высокой стоимость айтишников, и с низкой квалификацией проектных менеджеров, и с ошибками на стадии пресейла, и с авралами при выполнении госконтрактов — когда деньги в бюджете нужно потратить до конца календарного года. Всё это приводит к работе за экраном по 10–14 часов и полному отсутствию физической активности.

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

Что делать?
Самый доступный спорт — это бег. Доступный не значит простой. Как в любом деле, в нем есть свои нюансы, и какие‑то знания приходят только с опытом. За четыре года любительских пробежек приобрел знания и опыт, новую фигуру. Сбросил лишний вес и улучшил социальный имидж. Цель этой статьи подсветить проблему и дать мотивацию к изменениям.

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

Как выйти на первую пробежку?
Правда жизни состоит в том, что для первой пробежки вам не нужны особые кроссовки или одежда. Нужно желание выйти и не спеша пробежать минут 10, перейти на шаг, восстановить дыхание и попробовать пробежать еще минут 5–10. Общее правило — бегите медленно. Чем меньше пульс и легче дыхание, тем лучше.

Как просто сформировать привычку бегать?
Всего два условия:
- регулярность — выходите на пробежку раз в два дня, этого вполне достаточно
- легкость — после пробежки у вас должно быть достаточно сил пробежать ещё минут 15.
Если каждую пробежку бежать на максимум — увеличивать темп, дистанцию, время тренировки, то организм точно придумает, как вас заставить недельку отдохнуть.

👉 @seniorFront

Interactive Polaroid Gallery

Генерация карточек и логика перемещения реализованы на чистом JS. Стилизовано в SCSS.

👉 @seniorFront

Triangle Shape Checkbox Button

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

👉 @seniorFront

Держимся коллеги

👉 @seniorFront

⚡️ Прими участие в хакатоне MORE.Tech от ВТБ!

Когда: 11-26 октября 2024
Формат: гибридный (онлайн и офлайн) 
Призовой фонд: 1,5 млн рублей 

🔥 Хакатон подойдёт для тебя, если ты:

– Студент или выпускник технического вуза; 
– Backend / Frontend-разработчик;
– Аналитик;
– Проектный менеджер;
– UX/UI-дизайнер;
– Блокчейн-разработчик (Solidity);
– Специалист в области ИБ.

❗️Выбери свой трек:

1. Озеро данных: большие данные, обработка, хранение и анализ с использованием современных технологий.
2. NFT: система верифицированных достижений и сертификатов на основе блокчейн-токенов.
3. Vault: разработка безопасной системы хранения данных, аналог известного решения Vault от Hashicorp.

🔹 На MORE.Tech ты сможешь решить реальные финтех-кейсы и прокачать свои навыки! 

▶️ Регистрация уже открыта! Подай заявку до 19 октября, 23:59 МСК по ссылке.

#реклама
О рекламодателе

Emotion

Создано и анимировано на HTML и CSS. Взаимодействие с курсором пользователя реализовано при помощи библиотеки kicss.js

👉 @seniorFront

Pill Loader

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

👉 @seniorFront