Animated Text Background

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

👉 @seniorFront

Фаундер стартапа с 7-ю подписчиками готовит свой сайт к одному миллиону посещений:

👉 @seniorFront

moon toggle

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

👉 @seniorFront

Virtual Card

Банковские карты, свёрстанные на HTML и SCSS.

👉 @seniorFront

Stacked Cards

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

👉 @seniorFront

Simple switch with led indicator

Переключатель - это input type="checkbox", стилизованный в CSS.

👉 @seniorFront

count '9's from 1 to n

Я хочу сосчитать от 1 до n. Сколько раз встретится цифра "9"?

9, 19, 91... будут использовать по одной "9",
99, 199, 919... будут использовать по две "9"... и т.д.

Примечание: n всегда будет целым положительным числом.

Пример:

8  -> 0
9  -> 1
10 -> 1
98 -> 18
100 -> 20

👉 @seniorFront

Type VS Interface: разница есть, но не всегда

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

👉 @seniorFront

​В чём разница между классической функцией и стрелочной?

Классические функции (объявленные через ключевое слово function) и стрелочные функции (введённые в ES6 через => синтаксис) являются двумя способами объявления функций, но между ними есть несколько важных различий:

Синтаксис

Классическая функция:

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

Стрелочная функция:

const add = (a, b) => a + b;

Предлагают более краткий синтаксис для написания функций, особенно если функция состоит из одного выражения.

Контекст this
В классических функциях контекст определяется тем, как функция была вызвана. В стрелочных функциях контекст наследуется из окружающего контекста (лексический контекст this), где функция была объявлена.

Пример с классической функцией:

const obj = {
  id: 42,
  counter: function() {
    setTimeout(function() {
      console.log(this.id); // this ссылается на глобальный объект или undefined в строгом режиме, а не на obj
    }, 1000);
  }
};

Пример со стрелочной функцией:

const obj = {
  id: 42,
  counter: function() {
    setTimeout(() => {
      console.log(this.id); // this корректно ссылается на obj, так как стрелочная функция наследует this из окружения
    }, 1000);
  }
};

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

Пример с классической функцией:

function Person(name) 
{
  this.name = name;
}
const person = new Person("Alice");

Попытка использовать стрелочную функцию как конструктор:

const Person = (name) => {
  this.name = name;
};
// const person = new Person("Alice"); // Ошибка: Person не является конструктором

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

👉 @seniorFront

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