Smooth scrolling carousel

Логика работы карусели, а также анимация реализованы в JS.

👉 @seniorFront

How to Animate Image on Scroll

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

👉 @seniorFront

Поручил джунам задачу

👉 @seniorFront

Min Max Range Slider

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

👉 @seniorFront

Devices Loading

Свёрстано и анимировано на HTML и SCSS.

👉 @seniorFront

Golden Dust Text Reveal Animation

В этом видео создается анимация появления текста на CSS.

👉 @seniorFront

Silky smooth

Это SVG картинки, анимируемые библиотекой GSAP.

👉 @seniorFront

Find numbers with 3 divisors

Ваша задача — написать функцию, которая принимает два целых числа n, m и возвращает отсортированный массив всех целых чисел от n до m включительно, имеющих всего 3 делителя (без учета 1 и самого числа).

Пример:

solution(2, 20) -> [16] // У 16 три делителя - 2, 4, 8

👉 @seniorFront

Как вернуть энергию и интерес

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

👉 @seniorFront

​Как создать объект, не имеющий прототипа?

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

Использование Object.create(null): Метод Object.create(null) создает новый объект с указанным прототипом null, что означает, что объект не будет наследовать свойства и методы от какого-либо прототипа.

const obj = Object.create(null);
console.log(obj.toString); // Вывод: undefined

Использование литерала объекта и null в качестве прототипа: Можно создать объект, используя литерал объекта и установив его прототип в null.

const obj = Object.setPrototypeOf({}, null);
console.log(obj.toString); // Вывод: undefined

Использование функции-конструктора без прототипа: Можно создать функцию-конструктор, которая не имеет прототипа, и создать объект с помощью этой функции.

function NoPrototype() {
  // Пустая функция-конструктор без прототипа
}
const obj = new NoPrototype();
console.log(obj.toString); // Вывод: undefined

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

👉 @seniorFront

Gravity Points

Реализовано на canvas и чистом JS. Также есть возможность настройки количества частиц.

👉 @seniorFront

​Архитектура фронтенда и какой она должна быть

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

И поэтому я уже долгое время пытаюсь понять по каким правилам должно строиться фронтенд приложение чтобы оно удовлетворяло следующим критериям:
- легкое расширение функционала приложения;
- безболезненное внесение изменений в существующий функционал;
- унифицированная структура приложения;
- быстрый onboarding новых разработчиков на проект;
- понятный и прозрачный код;
- всегда понятно где в структуре файлов расположить ту или иную функциональность.

Domain Driven Design
Много умных дядек, таких как Мартин Фаулер и дядюшка Боб, написали много статей про него. На бэкенде в больших и сложных проектах он неплохо себя зарекомендовал. Но есть и много изъянов: туча абстракций, для простых действий нужно писать много кода, ну и разобраться, как готовить DDD та еще задача.
Есть примеры как готовить это на фронте, но, как видно, проблемы никуда не уходят и кол-во абстракций удручают.

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

Джимми Богарт в своей статье пишет что DDD подход не совершенен и избыточен, и, как следствие, он предлагает переработанный подход vertical slices. И это отличный подход, о котором стоит почитать отдельно. Эта идея довольно простая и мы можем адаптировать ее к фронтенд приложениям.

Clear architecture
Также есть попытки следовать всем постулатам чистой архитектуры и абстрагироваться от представления совсем. В этом случае мы сможем подменять view на любой фреймворк или вообще отказаться от его использования. Интересный подход и в некоторых случаях вполне обоснован и может оказаться отличным решением. Самый частый кейс, это использование одной и той же логики в браузере и на мобильном приложении.
Подробнее об этом можно почитать тут.

FSD - Feature Sliced Design
И недавно для меня стало открытием методология FSD - Feature Sliced Design. На мой взгляд лучшем решением будет обратить внимание именно на эту методологию.
Методология не привязана к конкретному стеку технологий и применима к большинству frontend-приложений. Документация содержит примеры реализации на JavaScript + React, но FSD успешно адаптируется и к другим комбинациям инструментов.

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

👉 @seniorFront

Как приручить эмоции, чтобы прийти к успеху

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

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

👉 @seniorFront

Card explode

Свёрстано при помощи препроцессоров Pug и Stylus. Уничтожение карточки реализовано при помощи библиотеки Disintegrate.js

👉 @seniorFront

New Design | CSS Curve Outside Card UI Design with Hover Effect

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

👉 @seniorFront

— Почему бы тебе не сходить к психотерапевту? Он поможет разобраться с «головой»
— Да я сам разберусь!

Как я разбираюсь сам:

👉 @seniorFront

Lightning

Красивая анимация молнии, реализованная на canvas и чистом JS.

👉 @seniorFront

Buttons with animations

Подборка анимированных кнопок, созданных на HTML и CSS.

👉 @seniorFront

Ink Cursor

В этом видео создается анимация следования за курсором при помощи библиотеки gsap.

👉 @seniorFront