Falling Confetti

Реализовано на canvas и CoffeeScript.

👉 @seniorFront

​Когда пора менять работу?

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

Этот способ, или, скорее, инструмент носит акроним AIGCC.

Чтобы его запомнить, можно использовать следующую мнемонику:

Am I Growing Complacent Currently? (дословный перевод: «Становлюсь ли Я самодовольным?», смысловой перевод: «Скатился ли я в зону комфорта?»)

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

Accomplishment (достижение): описывает собственные достижения, которыми Вы гордитесь или о которых не стыдно рассказать

Impact (влияние): описывает отношение или, скорее даже, важность той работы, что была совершена; насколько она ценна

Growth / Future alignment (соответствие с собственными целями): описывает насколько полученный опыт соотносится с собственными карьерными целями и планами

Challenge (вызов): описывает наличие или отсутствие сложных задач, которые продвигают Вас вперёд

Community (сообщество): описывает Ваше отношение к коллегам, к руководству, к ценностям и целям организации

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

На скриншоте ниже, моя собственная карьерная рефлексия с использованием именно этого инструмента

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

Значениями метрик могут быть только «Да» и «Нет». Каждая «да» — это 20% к результату квартала.

Так вот, оценив свой карьерный путь за квартал, мы получим итоговый результат за квартал. Именно, с помощью него и можно ответить на главный вопрос этой статьи — «Когда пора менять работу?». Если результат двух последних кварталов равен 40% и ниже, то это явный сигнал о том, что, возможно, стоит поискать что‑то ещё.

👉 @seniorFront

Порты в веб-разработке: от локальной разработки до продакшена

Эта статья предназначена в первую очередь для веб-разработчиков. Я не являюсь экспертом в области сетей, администрирования или DevOps, поэтому представленный материал не углубляется в сетевые аспекты.

Из любопытства, я как то задался вопросом практического использования разных номеров портов: что они означают для разработчиков, почему используются определенные порты, и какие приложения чаще всего запускаются на них. Цель статьи — пролить немного света на эти “магические” циферки с точки зрения их прикладного применения веб-разработчиками.

👉 @seniorFront

Wiggly Squiggly

Реализовано на TypeScript, анимировано при помощи библиотеки TweenMax.

👉 @seniorFront

Button Hover Animation

В этом видео создается кнопка с эффектом при наведении в стиле Netflix

👉 @seniorFront

Лучше б я сам

👉 @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