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

Как модульное тестирование сокращает затраты программиста

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

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

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

👉 @seniorFront

window.navigator

Это свойство возвращает объект описания приложения (user agent), которое выполняет скрипт. В подавляющем большинстве случаев это приложение — браузер. Объект содержит свойства, описывающие браузер, и методы для выполнения действий.

Часто используемые свойства:
userAgent возвращает строку, которая содержит название браузера. Не стоит использовать это свойство, чтобы определить браузер пользователя! Спецификация рекомендует браузерам передавать минимум информации в userAgent, значение может меняться от версии к версии.

language возвращает предпочитаемый язык интерфейса в виде языкового тега. Например, en, ru, en-US и т.д. Обычно это язык, установленный в настройках браузера.

languages возвращает массив предпочитаемых языков в порядке предпочтительности. Первый в списке будет язык, который возвращает navigator.language.

cookieEnabled возвращает true, если браузер пользователя поддерживает куки и они включены, false в противном случае.

onLine возвращает true, если у пользователя есть подключение к сети. Браузеры вкладывают разные смыслы в понятие «онлайн», поэтому это свойство — ненадёжный источник данных.

clipboard — это удоб­ный до­ступ к бу­фе­ру об­мена из Clipboard API. Объект предоставляет несколько методов для сохранения информации в буфер и чтения из него. write — универсальный метод для сохранения данных в буфер. Можно использовать специальный writeText, если вы уверены, что нужно скопировать только текст. Оба метода асинхронные и возвращают Promise. Для чтения из буфера есть аналогичные read и readText.
clipboard доступен только при работе с HTTPS или localhost. Если clipboard не доступен, вы можете использовать старый подход через document.execCommand('copy').

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

Методы объекта navigator служат для взаимодействия с другими WebAPI. Например, метод vibrate, который вызывает вибрацию пользовательского устройства, если она поддерживается: navigator.vibrate(200)

👉 @seniorFront