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

Illuminate Your Mind

Параметры свечения задаются при помощи CSS переменных, значения которых изменяются в JS при движении курсора.

👉 @seniorFront

​80% разработчиков недовольны своей работой. Причина не в ИИ и не в коде

Результаты последнего опроса Stack Overflow показали, что большинство разработчиков не получают удовольствия от своей работы. Если верить неофициальным данным, то доля довольных среди сантехников и фермеров оказывается выше. В чем же проблема?

Не оправдавшиеся ожидания и технический долг
Технический долг – главный источник раздражения у разработчиков. Работа с несовершенными системами деморализует людей и затрудняет выполнение сложных задач.

Культура суеты и бюрократия
Давление, вызванное необходимостью уложиться в сроки, в ИТ-индустрии часто доходит до крайности. Разработчиков подстегивают выполнять задачи как можно быстрее, чтобы получить как можно больше дохода. Возрастающее давление в компаниях оборачивается завышенными ожиданиями и выгоранием.
Кроме того, существует вечная проблема бюрократии, которой особенно подвержены крупные компании. Бесконечные совещания и оторванные от реальности требования начальства создают и усиливают ощущение бессмысленности.

Сокращения и проблемы со здоровьем
Недавняя волна массовых сокращений породила в разработчиках неуверенность и страх в том, что касается карьерных перспектив. Вдобавок к стрессу, написание кода – сидячая работа, а малоподвижный образ жизни крайне вреден для физического здоровья. Исследования показывают, что мало двигаться – еще более вредно, чем курить. Напротив, физическая активность в значительной степени снимает симптомы депрессии.

Несмотря на то, что работа не доставляет им удовольствия, большинство разработчиков пишет код в нерабочее время в качестве хобби (68%). Также почти 40% пишут код в нерабочее время ради профессионального роста или ускоренного обучения при помощи онлайн-курсов. Что наводит на мысль: проблема кроется вовсе не в коде!

👉 @seniorFront

День рождения онлайн-школы METHED 🥳

Прокачай свои навыки за 3 дня – присоединяйся к интенсиву!  

В рамках интенсива мы сосредоточимся на разработке веб-приложения для отображения расписания автобусов в реальном времени, используя Node.js и JavaScript.

Что вас ждёт на интенсиве?
- Разработка серверной части с использованием Node.js и Express
- Клиентская часть на JavaScript
- Интеграция WebSocket и развертывание на хостинг

Стартуем уже скоро, регистрируйся: https://tglink.io/f92ccf243706

Не JavaScript’ом единым: как фронтенд-разработчику затащить на собесе

В своей статье я расскажу о своем подходе к найму сотрудников. Разумеется, у каждого работодателя свои требования к соискателям, и эта статья не может быть универсальным гайдом по трудоустройству. Кто-то на собеседованиях от вас может ожидать знание 50-го аргумента функции callKek(), но это не мой подход, потому что в реальной жизни глубокого знания JavaScript не всегда бывает достаточно, а отдельные его тонкости и вовсе пригождаются крайне редко.

👉 @seniorFront

Strange Creature

Реализовано на canvas с использованием библиотек p5.js и simplex-noise.js.

👉 @seniorFront

Our Services Section Card

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

👉 @seniorFront

Вот что бывает, когда родители работают на удаленке

👉 @seniorFront