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

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

👉 @seniorFront

Lightning

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

👉 @seniorFront

Buttons with animations

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

👉 @seniorFront

Ink Cursor

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

👉 @seniorFront

Kira Kira Particle Effects

Создано при помощи canvas и JS. Настройки анимации можно менять через интерфейс, реализованный библиотекой dat.gui.

👉 @seniorFront

Regex for Gregorian date validation

Создайте регулярное выражение, которое будет валидировать дату и возвращать true, если дата передана в определенном стиле:

Корректные даты:

 "23.12.2008"
 "01.08.1994"


Некорректные даты:

 "12.23.2008"
 "01-Aug-1994"
 " 01.08.1994"

👉 @seniorFront

Варианты создания интерактивной экскурсии для пользователей

Нужно адаптировать пользователей к продуктам компании, познакомить с функциями и показать основные преимущества. Это напрямую влияет на желание пользоваться этими инструментами в дальнейшем. Подобные задачи решает онбординг (onboarding) — процесс знакомства пользователя с продуктом.

В этой статье автор рассказывает зачем нужен онбординг и как его реализовать в UI-kit.

👉 @seniorFront

​Какие способы изоляции стилей существуют ?

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

Использование уникальных имен классов
Это самый простой способ избежать конфликтов. Может быть достигнуто с помощью методологий именования, таких как BEM (Блок, Элемент, Модификатор), которая предлагает чёткую структуру для именования классов.

CSS-модули
Они представляют собой подход, при котором классы и идентификаторы, определенные в CSS-файле, автоматически преобразуются в уникальные имена. Это позволяет избежать конфликтов имен классов между различными компонентами. Они поддерживаются в сборщиках, таких как Webpack, и во фреймворках, например, в Create React App.

CSS-in-JS
Библиотеки CSS-in-JS, такие как Styled-components и Emotion, позволяют писать CSS прямо в JavaScript-файлах. Это обеспечивает полную изоляцию стилей, поскольку стили применяются непосредственно к компонентам, и конфликты имен классов исключаются.

Shadow DOM
Технология, позволяющая инкапсулировать DOM-дерево и стили компонента так, что они не влияют на основной документ. Это ключевая часть Web Components и позволяет создавать полностью изолированные компоненты.

Scoped CSS
Некоторые современные фреймворки и инструменты, такие как Vue.js, предлагают возможность использования scoped стилей, где CSS применяется исключительно к компоненту, в котором он объявлен, без воздействия на остальную часть приложения.

👉 @seniorFront

Variable Themes

Свёрстано с использованием препроцессоров Pug и SCSS. Логика переключения темы реализована в JS.

👉 @seniorFront

​Как справиться с рабочим стрессом

Давайте посмотрим на динамику профессионального стресса, чтобы понимать, как с ним справляться.
Э. Ф. Зеер выделяет три основные стадии развития стресса у человека.

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

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

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

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

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

Правила самопомощи
Выделяют несколько правил, которые помогают отследить свои стрессовые реакции и снизить уровень профессионального стресса.

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

👉 @seniorFront

Relax, take IT easy: как вернуть спокойствие в работу. Три инструмента специально для айтишников

Как сделать так, чтобы энергии, спокойствия и счастья в работе было больше, даже если сейчас много усталости и хочется бросить все? И что может помочь бизнесу удерживать, развивать и вовлекать ИТ-специалистов?

В своей публикации автор рассказывает, как люди сами создают себе ад на работе и как сами могут себе помочь. Даёт три полезных инструмента, позволяющие управлять замкнутыми кругами, в которые многие из нас время от времени попадают. А в конце – бонус.

👉 @seniorFront

Goo Bubble

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

👉 @seniorFront

Scroll based Slider

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

👉 @seniorFront

Когда полез разбираться с чужим проектом

👉 @seniorFront

Accordion Image Gallery

Создано на HTML и SCSS. Плавность достигается использованием CSS transition.

👉 @seniorFront

Toggle Neon

Это input type="checkbox", стилизованный в CSS.

👉 @seniorFront

Arrow Rotate to Direction Based on Mouse Position

В этом видео создаётся логика поворота стрелки на курсор пользователя в JS.

👉 @seniorFront

Product card

Оригинальная карточка, созданная на HTML и SCSS.

👉 @seniorFront

Sort rectangles and circles by area II

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

Пример:
const array = [ [4.23, 6.43], 1.23, 3.444, [1.342, 3.212] ]; // [ rectangle, circle, circle, rectangle ]
sortByArea(array) => [ [ 1.342, 3.212 ], 1.23, [ 4.23, 6.43 ], 3.444 ]

👉 @seniorFront