Crossy Road

Игра создана и анимирована при помощи библиотеки Three.js.

👉 @seniorFront

Amazing Pixel Button Effects

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

👉 @seniorFront

Microsoft: наши передовые ИИ-компьютеры изменят мир

Microsoft Word:

👉 @seniorFront

LetterMorph

Вся сцена - это SVG картинка, анимированная библиотекой gsap.

👉 @seniorFront

Card Carousel

Создано на HTML и CSS. Логика работы слайдера создана библиотекой Swiper.

👉 @seniorFront

Stunning CSS SVG Animation Effects

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

👉 @seniorFront

CSS 3D Bending Effect

Реализовано и анимировано на чистом CSS.

👉 @seniorFront

Is a number prime?

Создайте функцию, которая принимает целочисленный аргумент и возвращает логическое значение true или false в зависимости от того, является ли это целое число простым.

Согласно Википедии, простое число (или прайм) - это натуральное число больше 1, которое не имеет положительных делителей, кроме 1 и самого себя.

Требования
- Вы можете предположить, что вам будет задано целое число.
- Вы не можете предполагать, что это целое число будет только положительным. Вам могут быть даны и отрицательные числа ( или 0 ).
- Замечание по производительности: Не требуется никаких причудливых оптимизаций, но все же самые тривиальные решения могут выходить из строя. Числа доходят до 2^31 ( или аналогично, в зависимости от языка ). Циклы до n или n/2 будут слишком медленными.

Пример

is_prime(1) /* false */
is_prime(2) /* true */
is_prime(-1) /* false */

👉 @seniorFront

Чистый код — красивая архитектура. А работает ли это?

Вы пишете код не для компилятора — он съест любую абракадабру, если синтаксис верен. Вы пишете для людей, для того парня из соседнего отдела, который будет разбирать ваш код через полгода. Для себя, когда забудете, о чём думали в момент написания. Для тимлида, у которого нет времени расшифровывать ваши «фичи», замаскированные под техдолг.

Грязный код — это про непонятные переменные, запутанные модули и решения «на скорую руку». Вас ждёт после такого потеря во времени и в лучшем случае косые взгляды коллег. К сожалению, непонятный код часто пишут не только из-за спешки, но и из-за неопытности и чрезмерного энтузиазма тех, кто хочет всё переделать.

Давайте разберём, как превратить кошмар в конфетку — детали внутри.

👉 @seniorFront

​Что такое прототипное наследование?

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

Как это работает
Каждый объект имеет специальное скрытое свойство [[Prototype]] (как правило, доступное как proto или через Object.getPrototypeOf()), которое ссылается на другой объект — его прототип. Когда вы пытаетесь получить доступ к свойству или методу объекта, и это свойство/метод не найдено в самом объекте, поиск продолжается по цепочке прототипов, пока свойство/метод не будет найден или не будет достигнут конец цепочки прототипов (прототип null).

Пример:

let animal = {
  eats: true,
  walk() {
    console.log("Animal walk");
  }
};

let rabbit = {
  jumps: true,
  proto: animal
};

rabbit.walk(); // Animal walk
console.log(rabbit.eats); // true

В этом примере объект rabbit наследует свойство eats и метод walk от объекта animal через прототипную цепочку.

Основные принципы
- Прототипная цепочка: Когда вы обращаетесь к свойству объекта, автоматически ищет это свойство в объекте, а затем — в его прототипах, пока не достигнет конца цепочки прототипов.
- Object.prototype: В вершине прототипной цепочки находится Object.prototype. Он не имеет прототипа и содержит методы, доступные всем объектам, такие как toString(), hasOwnProperty() и другие.
- Создание объектов с определённым прототипом: Для создания объектов с указанием прототипа можно использовать Object.create(proto), где proto — объект, который должен стать прототипом для нового объекта.

Отличия от классического наследования
В отличие от него, прототипное наследование не использует классы как таковые (до введения class в ES6, которые являются "синтаксическим сахаром" над прототипным наследованием). Вместо этого объекты напрямую наследуют свойства и методы от других объектов.

👉 @seniorFront

Additive fireflies

Частицы генерируются и анимируются в JS.

👉 @seniorFront

​Почему микро-сервисы редко взлетают?

Потому, что микро-сервисы часто оказываются не «микро», а «нано» сервисами. «Микро» — это не «нано», микро-сервисы устроены иначе. Не скажу, что знаю рецепт хорошего микро-сервиса. Но я постараюсь показать, каким он точно не должен быть.

Давайте дадим определение микро-сервису через аналогию: микро-сервис — как блюдо. Про него можно сказать следующее:

- Блюдо изолировано: каждое находится в свой тарелке. Или, если хотите, в контейнере.
- Блюда имеют ограниченный контекст. Плов — это плов, его не мешают с фруктами. Потребитель получает то, за что платит по меню.
- Блюда слабо связаны между собой. После тарелки любого супа можно взять любой гарнир. А можно и не брать. Бывают, конечно, ограничения: не стоит запивать селедку молоком. Но это — исключение.
- Блюда масштабируются. Мало одной котлеты — можно съесть две.
- Блюда легко тестируются. Их можно дегустировать по-отдельности.
- Блюда индивидуально конфигурируются. Можно взять борщ с пампушкой, можно — без.

По описанию получилось вполне съедобно, не так ли? Так почему же внедрение микро-сервисов так редко заканчивается успехом? Я не буду разглагольствовать про неверное разграничение контекста и другие пороки. Про них и так много сказано. Сфокусируюсь на одном.

Корень проблемы — неверная область использования микро-сервисов.

Микро-сервисы применяются не там и не так.
Микро-сервисы задумывались как альтернатива монолиту, который пилят десятки разработчиков. А сейчас все работают по Agile, команды маленькие. Работают или над своим небольшим продуктом, или над частью общего продукта компании.

Продукт (часть продукта) уже имеет изолированный контекст и слабые зависимости. С другими продуктами (частями) общается по API. Имеет свой технологический стек. Владеет отдельным хранилищем (базой). Независимо разворачивается. И даже имеет свою команду «на две пиццы».

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

Но нет! Каждая команда считает свой салатик монолитом. И поэтому берет, и делит на микро-сервисы. Что же у нее получается в итоге? Правильно: нано-сервисы!

Вместо того чтобы смешать все ингредиенты и приготовить блюдо, команда любовно расфасовывает ингредиенты по контейнерам. Но все-таки салат — это не то же самое, что запчасти для салата.

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

Готовьте микро-сервисы правильно.
Многие компании целиком поражены болезнью чрезмерной декомпозиции. То и дело говорят: «у нас 30 команд и 1500+ микро-сервисов». И ведь искренне еще гордятся этим! Забывая рассказать про свои затраты на инфраструктуру. Рассказать, что новый разработчик до полугода погружается в эти сервисы. Что локализация обычного бага занимает у него неделю.

После всего сказанного позволю себе один совет:
Не дробите ваш маленький продукт на нано-сервисы. Это его убьёт. Он хороший. Дайте ему шанс повзрослеть.

👉 @seniorFront

«Кем Вы видите себя через 5 лет», или HRско-русский разговорник

Вас спрашивали «Кем Вы видите себя через 5 лет»? Меня тоже. За двадцать пять лет в IT я понял, зачем они так делают. Понял – это значит, что я «привык и научился пользоваться» (С). Но «неприятно удивлять» они меня не перестали.

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

👉 @seniorFront

Living Words

Сцена реализована на HTML и CSS. Слова добавляются через JS.

👉 @seniorFront

Responsive Conatct Info Section

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

👉 @seniorFront

Да, да, конечно, все именно так...

👉 @seniorFront

Retro futuristic radio buttons

Кнопки созданы на HTML и CSS. При нажатии запускается анимация, реализованная с использованием библиотеки gsap.

👉 @seniorFront

Flip Cards

Карточки, переворачивающиеся при наведении, реализованные на HTML и SCSS.

👉 @seniorFront

60 Seconds Timer

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

👉 @seniorFront