Лучше б я сам

👉 @seniorFront

Slider UI Interaction

Слайдер, реализованный на Vue, стилизованный в SCSS.

👉 @seniorFront

Travel Deal Card Hover Rotation Effect

Оригинальные карточки, реализованные на HTML и SCSS.

👉 @seniorFront

Text Scramble

В этом видео создается эффект "перемешивания" текста при наведении на JS.

👉 @seniorFront

Howl's Moving Castle

Создано и анимировано в JS, при помощи библиотеки TweenMax.

👉 @seniorFront

Create Phone Number

Напишите функцию, которая принимает массив из 10 целых чисел (от 0 до 9) и возвращает строку этих чисел в виде номера телефона

Пример:

createPhoneNumber([1, 2, 3, 4, 5, 6, 7, 8, 9, 0]) // => returns "(123) 456-7890"

👉 @seniorFront

Архитектура фронтенд-приложений на React. (Нам не нужен FSD)

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

👉 @seniorFront

​Что такое ООП?

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

Основные концепции:

Классы и объекты
Это шаблон или "чертеж" для создания объектов. Класс определяет свойства (данные) и методы (функции), которые будут у объектов.
Объект: это экземпляр класса, который содержит реальные значения для свойств и может вызывать методы, определенные в классе.

class Animal {
  constructor(name, species) {
    this.name = name;
    this.species = species;
  }

  speak() {
    console.log(`${this.name} издает звук.`);
  }
}

const dog = new Animal('Рекс', 'Собака');
dog.speak(); // Рекс издает звук.

Инкапсуляция
Это принцип скрытия внутреннего состояния объекта и предоставление доступа к нему только через методы. Это помогает защитить данные от некорректного использования и улучшает модульность кода.

class Person {
  constructor(name, age) {
    this.name = name;
    let _age = age; // Приватное свойство

    this.getAge = function() {
      return _age;
    }

    this.setAge = function(newAge) {
      if (newAge > 0) {
        _age = newAge;
      } else {
        console.log('Возраст должен быть положительным числом.');
      }
    }
  }
}

const person = new Person('Иван', 30);
console.log(person.getAge()); // 30
person.setAge(35);
console.log(person.getAge()); // 35

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

class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(${this.name} издает звук.);
  }
}

class Dog extends Animal {
  speak() {
    console.log(${this.name} лает.);
  }
}

const dog = new Dog('Рекс');
dog.speak(); // Рекс лает.


Полиморфизм
Позволяет методам выполнять разные действия в зависимости от объекта, который вызывает этот метод. Это достигается через переопределение методов в классах-наследниках.


```javascript
class Animal {
  speak() {
    console.log('Животное издает звук.');
  }
}

class Dog extends Animal {
  speak() {
    console.log('Собака лает.');
  }
}

class Cat extends Animal {
  speak() {
    console.log('Кошка мяукает.');
  }
}

const animals = [new Dog(), new Cat()];
animals.forEach(animal => animal.speak());
// Собака лает.
// Кошка мяукает.

Преимущества
- Улучшенная модульность: Классы и объекты позволяют разбивать код на отдельные, независимые части.
- Повторное использование кода: Наследование и полиморфизм способствуют повторному использованию кода.
- Упрощенное управление сложностью: Инкапсуляция помогает скрыть сложность реализации и предоставляет простой интерфейс для взаимодействия с объектами.
- Повышенная гибкость и расширяемость: Легко добавлять новые функции и изменять существующие без значительного переписывания кода.

👉 @seniorFront

Image Slider Effect Website

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

👉 @seniorFront

​Уволился с позиции тимлида и снова стал разработчиком

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

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

+50% к нагрузке, +5% к зарплате
Тимлид постоянно держит в голове множество различных направлений: люди в команде, процессы, ресурсы, цели, бэклог — и это только часть. При этом иногда нужно ещё находить время на написание кода. На практике такая многозадачность полностью тебя поглощает: ты просыпаешься с мыслями о работе, гуляешь в парке — и снова думаешь о работе, ложишься спать — и в голове всё ещё крутятся цели команды и какое повышение попросить для разработчика из твоей команды.

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

Докажи, что молодец
На руководящих позициях оценка результатов работы становится гораздо менее очевидной. Ты можешь выкладываться на все 200%, но всё равно получить плохие оценки. Поэтому тебе нужно постоянно "продавать" себя и результаты работы своей команды.

На исполнительных позициях всё гораздо проще: ты выполняешь задачи, которые тебе ставят. Если ты справляешься с ними, то автоматически получаешь хорошие оценки и перспективы для роста внутри компании. Но на руководящей позиции ты переходишь на уровень выше. Это означает, что тебе самому нужно доказывать важность и ценность выполненной работы — как своей, так и команды. Никто больше не сделает это за тебя.

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

Что в итоге
Если ты работаешь разработчиком, то в твоей жизни всё гораздо проще. Нужно держать фокус только на нескольких задачах. Выполнил их — и сразу же выкинул из головы. Всё. Да, это менее многогранно, но, что самое забавное (или печальное), оплачивается такая работа примерно так же, а иногда даже выше.

👉 @seniorFront

Кэш. Теория кэширования. Устройство и разновидности кэша

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

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

👉 @seniorFront

Nav icons with sliding indicator

При наведении задействуются CSS трансформации. При нажатии на элемент, на него навешивается класс active через JS.

👉 @seniorFront

Smoke Cursor Effects

В этом видео создается эффект дыма, следующего за курсором на CSS и JS.

👉 @seniorFront

IT-технологии в деле

👉 @seniorFront

Crazy Fireworks

Создано и анимировано на canvas и чистом JS.

👉 @seniorFront

Check Spinner

Это SVG картинка, анимируемая в SCSS.

👉 @seniorFront

How To Create Text Typing Effect

В этом видео создается эффект ввода текста на CSS и JS.

👉 @seniorFront

Pokemon Slide Gallery

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

👉 @seniorFront

Find the odd int

В массиве целых чисел найдите то, которое встречается нечетное количество раз. Всегда найдется только одно целое число, которое встречается нечетное количество раз.

Пример:

[7]

Должно вернуть 7, потому что оно встречается 1 раз (что нечетно).

[0]

Должно вернуть 0, потому что оно встречается 1 раз (что нечетно).

[1,1,2]

Должно вернуть 2, потому что оно встречается 1 раз (что нечетно).

[0,1,0,1,0]

Должно вернуть 0, потому что оно встречается 3 раза (что нечетно).

[1,2,2,3,3,3,4,3,3,2,2,1]

Должно вернуть 4, потому что оно встречается 1 раз (что нечетно).

👉 @seniorFront