Frontender's notes [ru]

2023-04-23 15:07:46 JS - document.visibilityState или определяем активна ли сейчас вкладка в браузере

Алоха товарищи фронты! Не большой шортрид о том как определить находится ли сейчас юзер на странице или нет.

Для данной задачи мы будем использовать:

Cвойство window.navigator.visibilityState, которое может быть равно или строке 'hidden' или строке 'visible'. 
А так же стандартный JS event visibilitychange, который в свою очередь будет реагировать на открытие / скрытие вкладки браузера и проверять свойство window.navigator.visibilityState

Пример кода:

const isVisibilityHiddenState = 'hidden';

const handleVisibility = () => {
 if (document.visibilityState === isVisibilityHiddenState) {
 console.log('user is on the page');
 } else {
 console.log('user is not on the page right now');
 }
}

document.addEventListener('visibilitychange', handleVisibility);

Надеюсь это было вам полезно. Удачи в экспериментах! Открыть/Комментировать

2023-04-23 10:08:04 ​​ JS-разработчик?

А насколько хорошо ты знаешь Vue.js? JS-разработчик? А насколько хорошо ты знаешь Vue.js? 

Пройди тест из 20 вопросов и узнай, сможешь ли ты учиться на курсе "Vue.js Developer" от OTUS. Если правильно ответишь хотя бы на 12 вопросов - сможешь поступить на курс по специальной цене! 

 Время прохождения теста ограничено 30 минут

ПРОЙТИ ТЕСТ: https://otus.pw/HR4O/

Курс доступен в рассрочку.

Пройдете успешно тест, получите доступ к открытым урокам курса.

Реклама. Информация о рекламодателе на сайте www.otus.ru Открыть/Комментировать

2023-04-22 20:08:01 ​​ 10 советов по CSS для улучшения переходов и анимаций

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

Читать... Открыть/Комментировать

2023-04-22 15:07:10 ​​ Создаем CSS разметку в стиле masonry

В этой статье вы узнаете, как использовать стиль Masonry, который позволяет создавать эффективные и привлекательные макеты для веб-страниц. Также автор вам расскажет как максимально эффективно использовать пространство на странице.

Читать... Открыть/Комментировать

2023-04-22 10:00:28 ​​Б**дский год… Как пережить весь этот трэш, не задушить себя самокритикой и не сдохнуть в пучине стресса и неопределенности?

Алкоголь, сигареты, таблетки, психотерапия... А может, нейроинтерфейс? 

Да, одно из рабочих решений — нейроинтерфейс от российского стартапа Neiry. Это как фитнес-трекер, только для мозга.

В чем суть?
• Нервные клетки мозга постоянно генерируют электрические импульсы
• Устройства Neiry (на фото) измеряют электрическую активность мозга и расшифровывают ЭЭГ-сигнал в понятные человеку метрики: концентрация, усталость или стресс
• Постоянная обратная связь о психоэмоциональном состоянии помогает человеку вернуть сознание в текущий момент, вместо того чтобы волноваться о неопределенности будущего или ошибках прошлого

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

Но главная фишка технологии совсем в другом… 
Подробнее тут, переходи → neiry.ru/?utm_source=tg&utm_medium=frnotes Открыть/Комментировать

2023-04-21 20:07:26 ​​ Как начать работать с git

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

Гайд... Открыть/Комментировать

2023-04-21 15:07:45 ​​ 5 ошибок начинающих разработчиков при создании React приложений

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

Читать... Открыть/Комментировать

2023-04-21 10:07:55 ​​​​Совет фронтендерам: уважайте свое время

Первый шаг — не изобретать велосипед. В Html Gram собраны готовые codepen решения на каждый день. От эффектов при наведении до 3D анимации.

Быстрее пишешь код — больше отдыхаешь. Подписывайся: @HtmlGram Открыть/Комментировать

2023-04-20 18:07:34 JS - Преобразование речи в текст

Алоха товарищи фронты! Знали ли вы что JS умеет звук в текст преобразовывать?

Преобразование речи в текст на JavaScript возможно с помощью Web Speech API. Это API позволяет распознать речь пользователя и преобразовать ее в текст. Пример:

const recognition = new webkitSpeechRecognition();

recognition.onresult = function(event) {
 const result = event.results[event.resultIndex];
 const transcript = result[0].transcript;
  
 console.log(transcript);
}

recognition.start();

В данном примере мы создаем экземпляр объекта webkitSpeechRecognition и задаем обработчик события onresult, который вызывается каждый раз, когда происходит распознавание речи пользователя. Внутри обработчика мы получаем распознанный текст и выводим его в консоль. Затем мы вызываем метод start() для начала распознавания речи. Открыть/Комментировать

2023-04-20 15:07:34 ​​ Как работать с OpenAi API в NodeJS

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

Читать... Открыть/Комментировать