Neumorphic Sound Recorder

Создано на React и TypeScript. Стилизовано в SCSS.

👉 @seniorFront

​Переключение между контекстами убивает эффективность разработчиков на корню

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

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

1. 🎯 Ставьте конкретные цели. Задавайте конкретные цели для каждого периода работы, чтобы удерживать концентрацию внимания и эффективно отслеживать прогресс. А ещё ежедневные цели помогают нам понять, что мы хотим успеть за сегодня.

2. 📝 Заносите задачи в список дел. Используйте любой инструмент, например, Todoist или Microsoft To Do, чтобы выгружать задачи из головы. Это снизит напряжённость. В любой момент можно свериться со списком и решить, над какой задачей работать дальше. Выберите самую важную задачу и начните с неё.

3. 🔢 Расставляйте приоритеты. Этот приём поддерживает вовлечённость в работу и не даёт отвлекаться.

4. 🔒 Выделяйте время для сосредоточенной работы. Установите полуторачасовые интервалы для сосредоточенной работы по методике, описанной в книге Кэла Ньюпорта «В работу с головой». Это оптимальное время для сохранения стабильной концентрации внимания. При этом нужно организовать минимум 4–6 часов сосредоточенной работы. Отметьте эти блоки у себя в календаре и для их выполнения выберите время дня, когда вы на пике энергии. Для большинства людей это — утро.

5. 🅿️ Используйте «парковку идей». Во время работы держите открытым текстовый файл. Если вам в голову приходит мысль или возникает новая задача, не переключайтесь на неё, а просто быстро запишите её в файл. Так вы сможете не отвлекаться.

6. 🚧 Оставляйте себе «хлебные крошки» на случай, если вас отвлекут. Когда вы занимаетесь сложной задачей, оставляйте себе подсказки. Если вас отвлекли, лаконичный комментарий о том, почему в файле с исходным кодом в IDE вы написали именно эту строчку, сэкономит вам несколько часов, которые ушли бы на восстановление вашего хода мысли. Этим же приёмом можно пользоваться в конце дня. Тогда завтра вы точно будете знать, с чего продолжить. А ещё это помогает бороться с эффектом Зейгарник — стремлением заполнять рабочую память незавершёнными задачами.

7. 🔕 Минимизируйте отвлекающие факторы. Как вариант, наденьте шумоподавляющие наушники, отключите неважные уведомления или создайте изолированное рабочее пространство. Отличный вариант — выключать на какое-то время мессенджеры и включать на телефоне режим «Не беспокоить».

8. 🤹 Откажитесь от многозадачности. Наш мозг может корректно и сосредоточенно работать только над одной задачей. Так что берите в работу что-то одно.

9. 💺 Продумайте эргономику. Обзаведитесь эргономичным столом и стулом, настройте монитор, чтобы сократить физический дискомфорт.

10. 📂 Организуйте пространство. Не загромождённое рабочее пространство снижает когнитивную нагрузку и помогает сосредоточиться на задаче.

👉 @seniorFront

Разница в мотивации ТОПов и сотрудников: как выстроить эффективную команду

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

С одной стороны, игнорирование различий между группами может угробить команду: линейные сотрудники не поймут стратегических KPI, а ТОПов не будут мотивировать проблемы «на земле». В результате неизбежно упадет вовлеченность, а система премирования потеряет эффективность.

С другой стороны, если людей в одной команде мотивировать по-разному, то и двигаться они начнут в разные стороны. Это классическая ситуация «Лебедь, рак и щука».

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

Как это сделать? Давайте разберём эти задачи по очереди.

👉 @seniorFront

3D Ocean Simulator

Создано и анимировано библиотекой Three.js. Интерфейс для изменения параметров анимации создан библиотекой Dat GUI

👉 @seniorFront

Друзья, привет!
FrontendConf нужна ваша помощь 😊⠀На основе глубинного интервью разработчиков из ведущих IT-компаний в России мы составили список основных вызовов и проблем во фронтенде в 2025 году. 

Чтобы составить рейтинг наиболее интересных тем, благодаря чему мы сфокусируемся на самом полезном для вас при подготовке программы FrontendConf 2025, просим вас пройти опрос. Это займёт не более 5 минут.⠀

А в конце опроса будет архив из 370 докладов с наших конференций 🙌⠀
П.С. Будем очень благодарны, если поделитесь со своими друзьями и коллегами фронтендерами. Ведь чем больше будет ответов, тем качественнее соберем статистику и тем ценнее будет программа!
Опросник можно заполнить здесь✅
Спасибо! Знайте, вы просто космос! 💛

#реклама
О рекламодателе

Quick CSS Animation Effects Tutorial

В этом видео быстро создается простая анимация загрузки на HTML и CSS.

👉 @seniorFront

Секрет продуктивности

👉 @seniorFront

Segmented Progress Bar With Tip

Реализовано на React и стилизовано в SCSS.

👉 @seniorFront

Outlined Mobile Cards

Карточки, реализованные на чистых HTML и CSS.

👉 @seniorFront

Border Animation

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

👉 @seniorFront

Star Trek

Реализовано на canvas и чистом JS с использованием технологии WebGL.

👉 @seniorFront

Spin Around, Touch the Ground

Вам дан массив, состоящий из строк "left" и "right". Каждая строка делает поворот на 90° в соответствующую сторону. Создайте функция, которая вернет количество разворотов на 360°.

Примеры:

 ["left", "right", "left", "right"] ➞ 0

 ["right", "right", "right", "right", "right", "right", "right", "right"] ➞ 2

 ["left", "left", "left", "left"] ➞ 1

👉 @seniorFront

Первый шаг в мир RxJS: знакомство с Observables

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

👉 @seniorFront

Что такое миксины?

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

Часто используются для добавления методов или свойств к классам. Это позволяет комбинировать функциональность из разных источников.

let sayHiMixin = {
    sayHi() {
        console.log(`Привет, ${this.name}`);
    },
    sayBye() {
        console.log(`Пока, ${this.name}`);
    }
};

class User {
    constructor(name) {
        this.name = name;
    }
}

// Копируем методы sayHiMixin в User.prototype
Object.assign(User.prototype, sayHiMixin);

let user = new User("Вася");
user.sayHi(); // Привет, Вася
user.sayBye(); // Пока, Вася

В этом примере миксин sayHiMixin добавляет методы sayHi и sayBye к классу User.

Миксины в CSS (Sass/SCSS)
Обычно используются в препроцессорах, таких как Sass или Less. Миксины позволяют определять наборы стилей, которые можно повторно использовать в различных местах стилей.

@mixin border-radius($radius) {
    -webkit-border-radius: $radius;
       -moz-border-radius: $radius;
            border-radius: $radius;
}

.box { 
    @include border-radius(10px);
    width: 100px;
    height: 100px;
    background-color: lightblue;
}

В этом примере миксин border-radius определяет стили для создания скругленных углов. Затем он используется в классе .box для применения этих стилей.

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

👉 @seniorFront

Pointer position controls timeline progress

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

👉 @seniorFront

​GraphQL или REST: Какой API выбрать, чтобы не прогадать?

Расскажу о GraphQL, сравню с REST. Разберемся в плюсах и минусах каждого подхода к проектированию API. Выбираем лучший для вашего проекта!

Распространенность и интеграция
В 2015 году Facebook представил GraphQL. С тех пор эта технология набирает популярность, но REST остается лидером. По данным Postman на 2024 год, GraphQL используют 29% разработчиков, REST — 90%.

Если заранее неизвестны потребители API, лучше выбрать REST — он проще и популярнее:
- Разработчикам, знакомым с HTTP, легко освоить REST. Он использует стандартные HTTP-методы и принципы.
- REST API можно реализовать на любом языке, поддерживающем HTTP, без дополнительных слоев.
- REST — проверенная технология с сильным сообществом и множеством готовых инструментов.

Получение данных
GraphQL позволяет клиентам запрашивать только нужные данные, избегая избыточного или недостаточного получения. Это повышает эффективность сетевых запросов: передаются только необходимые данные.

Рассмотрим пример. Есть сущность «Игрушка» (Toy), которую создает «Мастер» (Master), привязанный к «Пользователю» (User). У игрушки также есть «Категория» (Category) и «Теги» (Tags).

GraphQL позволяет получить все данные одним запросом:

query getToy {
  toy(id: 1) {
    id
    name
    category {
      id
      name
    }
    tags {
      id
      name
    }
    master {
      id
      info
    }
  }
}

В случае REST API потребовалась бы серия запросов:

GET http://localhost:8080/toys/1 - Получаем игрушку по ID
GET http://localhost:8080/categories/2 - Получаем категорию игрушки по ID, который взяли из объекта игрушки
GET http://localhost:8080/tags?id=1&id=2&id=3 - Получаем теги игрушки по ID, которые взяли из объекта игрушки
GET http://localhost:8080/masters/3 - Получаем мастера игрушки по ID, который взяли из объекта игрушки
GET http://localhost:8080/users/4 - Получаем пользователя, к которому привязан мастер, по ID, который взяли из объекта мастера

В приложениях со сложными связями между доменами GraphQL упрощает получение данных: один запрос вместо пяти (в примере). Кроме того, можно исключить ненужные поля, например, createdAt и updatedAt. GraphQL возвращает только то, что нужно.

Версионирование
GraphQL использует одну версию endpoint. Изменения вносятся в схему без явного версионирования API, что упрощает развитие.

REST API нужно версионировать для безопасных изменений. Обычно это делается в URL, например: http://localhost:8080/v1/toys.

Ошибки и коды ответа
GraphQL всегда отвечает кодом 200 OK, даже при ошибках. Информацию об ошибке ищите в поле errors JSON-ответа. Клиент не может проверить статус по HTTP-коду и вынужден анализировать тело ответа.

REST использует стандартные HTTP-коды (400, 404, 500) для обозначения результата. Это делает обработку ошибок в REST более наглядной

Заключение
Выбор между GraphQL и REST — это вопрос потребностей проекта. REST лидирует благодаря простоте, популярности и развитым инструментам. GraphQL же гибче в запросах: запрашиваем только нужное, не перегружаем сеть лишним, что важно для сложных приложений.

Тестировать GraphQL сложнее, особенно с файлами: больше настроек в запросах, чем в REST. GraphQL проще версионировать — меняем схему, и всё, а в REST приходится менять URL. Наконец, GraphQL всегда отвечает кодом 200 и сообщает об ошибках в теле ответа, а REST использует стандартные коды ошибок, что делает их более заметными.

👉 @seniorFront

Сопротивляться нельзя сотрудничать. Где поставите запятую?

«Нет, это не будет работать»
«Сейчас вообще нет времени на это»

И еще тысяча и одна фраза от людей, которые сопротивляются.

Когда я начинала работать Scrum Master’ом, мне было страшно столкнуться с сопротивлением и менять процессы. Я боялась, что мои предложения не поддержат. Ретроспективы вызывали тревогу, потому что я ожидала волну негодования, с которой не справлюсь.

Со временем я поняла, что сопротивление – это ежедневная часть моей работы. Оно неизбежно, и мне важно научиться работать с ним. Потому что жить в страхе - это не выход. Поэтому я решила разобраться, что же это такое?

👉 @seniorFront

Shattering Cursor

Внутри кнопки находится SVG картинка, анимируемая библиотекой gsap.

👉 @seniorFront

Awesome Cursor Trails Animation

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

👉 @seniorFront