Vikhrmodels/habr_qa_sbs huggingface dataset:
Вопрос: Как управлять скоростью вентилятора в зависимости от нагрузки (не температуры)?

Лучший ответ:
поставить шунт и снимать значение потребляемого тока с него, использовать данный сигнал для управления вентилятором.
только смысла в этом нет.
температура "блока питания" пропорциональна потребляемой мощности (с небольшими задержками на нагрев/охлаждения радиатора)

Худший ответ:
1. Идея обдува по мощности на мой взгляд ошибочна, если цель стоит снизить температуру, то и опираться надо на температуру. Плата по ссылке именно то что надо, будет включать вентилятор если это реально надо.
2. Если блок питания требует дополнительного обдува - неправильно выбран блок питания, разумней будет поставить блок правильной мощности.
Вопрос: Визуальный редактор bitrix удаляет теги?

Лучший ответ:
Сталкивался. Бороться с редактором Битрикс бессмысленно. 
Тут 2 варианта: 
1. Запретить модераторам сайта, не имеющим опыта работы с html/php-кодом, трогать содержимое сайта. И самому редактировать и сохранять с выключенным редактором, только в режимах html/php-кода. Если клиент согласится на поддержку сайта на аутсорсе (в вашем лице) - то вам это даже хорошо, будет постоянная работа :).
2. Организовать структуру редактируемых участков кода таким образом, чтобы <svg> и другие "нежелательные" для редактора битрикс теги не "встречались" с редактором. Это, конечно, повлечёт раздувание количества инклудов, что несущественно снизит скорость загрузки страниц. Но тем не менее, можно с чистой совестью отдавать проект клиенту, не боясь, что при первой правке что-то слетит к чертям :)

Худший ответ:
Вдруг кому пригодится, у кого редактор режет span)
В настройках редактора по шестеренке в правом верхнем углу, снимаем галочку "Очищать теги < span > без атрибутов"
Вопрос: Как пофиксить прозрачность этого блока?

Лучший ответ:
Поменять стили для черного блока

{
  /* opacity: 0.5 */ /* убрать */
  background: rgba(0,0,0, 0.5); /* добавить */
}

Худший ответ:
В стилях задать opacity: 1
Вопрос: Как сократить оператор if в JS?

Лучший ответ:
if (a == 1 && a == 2)
(почти) всегда будет false, т.к. не может быть одновременно равно и 1 и 2 (может последовательно), так что смело удаляйте весь блок.

Если интересует «если а равно одному из списка», можно так:
if ([1, 2, 100500].includes(a))

Худший ответ:
Используй оператор switch.

switch (a){
   case 1: alert('a = 1'); break;
   case 2: alert('a = 2'); break;
   case 'hello': alert('a = 'hello');break;
}
Вопрос: Не могу взять первый заказ на Upwork?

Лучший ответ:
I am Andrey from Ukraine.
I'm one of the top 10% PHP, WordPress(tests) freelancers on Upwork.
Вот это сразу нафиг.
Не надо писать какой ты невъ... хороший специалист, пиши по проблеме клиента: как, когда и сколько. Меньше воды, больше сути.Andrey's profile is set to private
и нужно изменить видимость профиля

Худший ответ:
Привет, я обычно пишу 1-2 предложения, не больше пары строк, особо уделяю внимание описанной проблеме. Зарегистрируйтесь на любой бирже, создайте тестовый заказ и посмотрите как с вами будут вести диалог. То что написано у вас 90% фрилансеров пишут, чтобы понять всю полноту эмоций, которую испытывает заказчик, нужно самому залезть в его шкуру.
Вопрос: Не подключаются стили к cайту https?

Лучший ответ:
адрес у них идет как http а не https
причина именно в этом.

Худший ответ:
При подключении стилей в теге link укажите тоже https
Вопрос: Как по всему документу скрыть значения которые имеют undefined?

Лучший ответ:
То есть, вместо того, чтобы изначально не пытаться показывать то, чего нет, вы хотите заметать мусор под ковёр.

Умно, ничего не скажешь.

А главное - это будет ни разу не костыль./*
 * надеюсь, хотя бы вместо "по всему документу" вы сумеете подобрать
 * какой-нибудь вменяемый селектор, чтобы не проверять реально всё,
 * а только те элементы, где ваш "undefined" действительно может случиться
 */
document.querySelectorAll('*').forEach(n => {
  const text = n.innerText?.trim();
  if (text === 'undefined') {
    n.hidden = true;
  }
});

Худший ответ:
Грустно, что так вышло, но это уже другая история:)

Какая структура у JSON который приходит на клиент для вывода?
Можно отфильтровать данные перед выводом на стороне клиента и работать с уже "чистыми".

Например так:
const serverData = [
  {
    answ1: 'text 1',
    answ2: 'text 2',
    answ3: undefined
  },
  {
    answ1: undefined,
    answ2: 'text 2',
    answ3: undefined
  }
]

const clearData = serverData
  .map( item => Object.values( item ) )
  .filter( item => item !== undefined )

console.log(clearData)
Вопрос: Как в js-файле (а не в html) сделать, чтобы функция запускалась при клике по ссылке?

Лучший ответ:
link.addEventListener('click', (e) => {
   e.preventDefault();
   let bool = confirm('вы желаете перейти?');
    bool ? window.location.href = "http://www.example.ru" : alert('вы отменили переход');
});

С телефона, но вроде все так))

Худший ответ:
document.addEventListener('click', (e) => {
   if(e.target.tagName === 'A') {
     e.preventDefault()
     example() 
  }
})
Но так лучше не делать, так как все ссылки перестанут правильно функционировать, проверку делать на класс или что-то типо того. Еще можно к нужным ссылкам добавить слушателя события.
Вопрос: Можно ли использовать html-код в файле php?

Лучший ответ:
можно. но не рекомендуется.
познакомьтесь с шаблонизаторами.
например, twig.

Худший ответ:
да можно, php изначально является шаблонизатором:
<html>
<body>
<php if(@_GET['test']) { ?>
<h1>Yo ho ho!</h1>
<php }  else { ?>
<h2>Yay!</h2>
<php } ?>
</body>
</html>

p.s. пожалуйста, по возможности переносите логику интерфейса на клиента и его javascript, а сервер пусть отвечает за бизнеслогику и данные, так как генерация интерфейса на стороне сервера очень устаревший подход
Вопрос: Как увеличить картинку для ретины ,без потери качества?

Лучший ответ:
Это делается наоборот: большую картинку нужно уменьшать. Увеличивать маленькие можно с разной степени дерьмовости результата, не более.

Худший ответ:
Божечьки, больше двух лет назад, а так никто и не ответил. Держи:
https://zyro.com/de/tools/image-upscaler
https://letsenhance.io/
Вопрос: Насколько огромна сфера программирования?

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

Это чтож получается, можно сделать все, что угодно благодаря программированию?Всё, что может исполнить ЦПУ.

А чего нельзя сделать с помощью программирования?Любой материальный объект. Здание, животное, планету.

Худший ответ:
Сфера программирования так огромна, что, говорят, позволяет даже избрать нужного президента.
Но только из реальных кандидатов, так что это мало где можно использовать.
Вопрос: Как получить денежный курс онлайн?

Лучший ответ:
https://www.cbr-xml-daily.ru/daily_json.js
https://www.cbr.ru/development/DWS/
Тока это не обменный курс, это курс Центробанка. 
Обменный узнается у того, где собрался обменивать. Могу обменять ваши доллары на мои рубли по стабильному курсу 1 к 1.
А ваще неплохо бы сначала искать Где взять актуальные курсы валют?

Худший ответ:
https://fixer.io посмотрите
Вопрос: Перебор массива на совпадения!?

Лучший ответ:
Если я правильно понял вопрос, то через словарь это делается вот так:using System;
using System.Collections.Generic;

namespace GetRepetitions
{
    class Program
    {
        static void Main(string[] args)
        {
            var scoreCombo = new int[] { 1, 2, 1, 1, 1 };
            var repetitions = GetRepetitionsCount(scoreCombo);   
            
            foreach (var kv in repetitions)           
                Console.WriteLine($"Num: {kv.Key}, Rep. Count: {kv.Value}");            
        }

        static Dictionary<int, int> GetRepetitionsCount(int[] arr)
        {
            var repetitions = new Dictionary<int, int>();
            foreach (var num in arr)
                if (repetitions.ContainsKey(num))
                    repetitions[num]++;
                else
                    repetitions.Add(num, 0);
            return repetitions;
        }
    }
}

Худший ответ:
С помощью LINQ можно сгруппировать элементы массива по их значению и отобрать те, количество которых больше 1.using System;
using System.Linq;

public class Test
{
	public static void Main()
	{
        int[] ScoreCombo = new int[5] { 1, 2, 1, 1, 1 };
        foreach(var repeat in ScoreCombo.GroupBy(i => i).Where(g => g.Count() > 1))
            Console.WriteLine("Repeat: " + repeat.Key + " (" + repeat.Count() + ")");
	}
}
Вопрос: Как обработать нажатие на элемент через javascript?

Лучший ответ:
getElementsByClassName возвращает массив элементов. Тебе нужно пройтись по массиву и повесить обработчик на каждый элемент.

Худший ответ:
var items = document.getElementsByClassName('buy');

for (let i = 0; i < items.length; i++) {
	items[i].addEventListener('click', function() {
  	alert('Спасибо!');
  })
}
Вопрос: Каким плохим вещам учит PHP?

Лучший ответ:
Жить хорошо и кушать вкусно, но это не у всех))
Ничему плохому он не учит, учат идиоты не умеющие писать код, а им хоть что подсунь получится дерьмо. Вот например оратор выше утверждает что он старый и все дела, но он просто видимо не в курсе текущего положения дел. Им видите-ли нужно чтобы он все умел и все мог)) Да есть узкие места где его лучше не использовать. Но со своими задачами для которых он придуман, он справляется на ура. Просто все эти хейтеры на самом деле не гуру прогеры, а лохи которые в свое время выбрали не тот язык под свои задачи.
В настоящее время и синтаксис подтянулся на уровень, и строгая типизация появилась и много много всего. Учите основы и паттерны, а язык вам ничего плохого не даст.

Худший ответ:
1) Писать код, чтобы радовалась душа.
2) Писать код, чтобы выполнить требование бизнеса в требуемые сроки.
3) Писать код, чтобы получилось правильно и "алгебраично".
4) Героически преодолевать трудности и писать то, что в общем-то не нужно.
ПХП чаще всего про 2, иногда про 1, и еще реже про 3 (не потому, что язык плохой, а потому что 2 чаше всего не предполагает 3)
Вопрос: Как разделить модели в Laravel?

Лучший ответ:
Разделять модели имеет смысл, только если вы, по каким-то причинам, хотите иметь ActiveRecord отдельно от классического понятия модели в MVC. Обычно все кидают все в кучу, и разделять ничего не нужно. Те части, которые отвечают за представление данных в ответах, нужно вынести в ресурсы. Скоупы, особенно если они у вас повторяются, можно вынести в трейты, а тяжелый, массивный функционал, возможно, потянет на отдельный класс или даже сервис.
Меня несколько коробит тот факт, что в некоторых фреймворках AR является моделью. Однако разделять их геморрой и неоправданно в 98% случаев.

Худший ответ:
верно мыслишь.
Сервисный слой называется.
В сервисах содержится бизнес логика, а в моделях релейшены, скоупы и т.п.
Вопрос: Яндекс Практикум.Как научить Анфису правильно называть количество новых сообщений, когда их меньше 100?

Лучший ответ:
 или у нас от 11 до 19 сообщений
А у вас в условии что написано?

Худший ответ:
Я сделал так. Криво, но работает. 
# Нужно рассмотреть больше случаев в if-elif-else
for messages_count in range(0, 100):
    remainder = messages_count % 10
    if messages_count == 0:
        print('У вас нет новых сообщений')
    elif remainder == 1 and messages_count !=11:
        print('У вас ' + str(messages_count) + ' новое сообщение')
    elif remainder == 2 and messages_count !=12:
        print('У вас ' + str(messages_count) + ' новых сообщения')
    elif remainder == 3 and messages_count !=13:
        print('У вас ' + str(messages_count) + ' новых сообщения')
    elif remainder == 4 and messages_count !=14:
        print('У вас ' + str(messages_count) + ' новых сообщения')
    elif messages_count >= 11 or messages_count <= 19:
        print('У вас ' + str(messages_count) + ' новых сообщений')
    elif remainder == 0 or remainder >= 5:
        print('У вас ' + str(messages_count) + ' новых сообщений')
Вопрос: Как вы пользуетесь докером на mac?

Лучший ответ:
Docker на маке в Parallels Desktop с docker-machine не тормозит, и занимает только используемую boot2docker оперативную память.
В отличии от Docker for Mac, где запускается qemu виртуальная машина, и qemu резервирует всю память.

Худший ответ:
Ну насчет vds - арендуете сервер, ставите туда ОС, докер и пользуетесь)

Насчет тормозов мака не подскажу
Вопрос: Изучил java, куда дальше пойти?

Лучший ответ:
Для начала узнайте куда тянет вас...
Сферы связанные с java:
- Enterprise - фреймворки Spring, Akka, Play и др. Изучить Java EE (Jakarta EE), Hibernate, JPA и т.д.
- Android разработка
Ну есть еще сферы J2ME & Desktop. Но они менее распространены.

Худший ответ:
Ну напишите сколько занимает указатель в яве.
Вопрос: Может ли новый абонент, купивший мой старый номер телефона, войти в мои мессенджеры?

Лучший ответ:
Суть вопроса в том, что заново проданный номер уже не Ваш. Претензий к оператору быть не может.
Получается остаются правоотношения Вас и информационных сервисов. Если Вы не уведомили сервис о смене способа контакта с Вами (телефонного номера), то это Ваша проблема.

Худший ответ:
У меня так некоторое количество денег с карты сняли. Банк ничего не сделал.
Вопрос: Что использовать для верстки?

Лучший ответ:
- Bootstrap - очень классный фреймворк. Часто встречается, но со временем (лично я) ушёл от него и сейчас верстаю на чистом HTML/CSS. Рекомендую только для работы над чужими проектами, которые уже написаны на Bootstrap.
 - Gulp - вы должны знать, это сборщик проекта, который подсасывает файлы, процессорит CSS, сжимает JS и т.д.
 - Sass/Less - программируемый CSS.
Всё остальное специфично и ситуативно.

Худший ответ:
- Bootstrap - очень классный фреймворк. Часто встречается, но со временем (лично я) ушёл от него и сейчас верстаю на чистом HTML/CSS. Рекомендую только для работы над чужими проектами, которые уже написаны на Bootstrap.
 - Gulp - вы должны знать, это сборщик проекта, который подсасывает файлы, процессорит CSS, сжимает JS и т.д.
 - Sass/Less - программируемый CSS.
Всё остальное специфично и ситуативно.
Вопрос: Как дорабатывать/изменять купленную премиум тему WordPress и не выстрелить себе в ногу?

Лучший ответ:
И тем не менее, рекомендую создать дочернюю тему и вносить правки уже в ней

Худший ответ:
Готовые темы это полный отстой, для нищебродных клиентов или жадных посредников... поэтому и правки для них соответствуют цене... Да, просто допиливыется часть кода, обновление можно вовсе отключить.
Вопрос: Какие вопросы задают на собеседовании по C#?

Лучший ответ:
Такие, которые помогут в принятии решения о найме соискателя с точки зрения hr, технического интервьюера, менеджера и других людей, которые будут проводить интервью.

Худший ответ:
Типы данных
Память
Интерфейсы
В общем все что тут есть
https://docs.microsoft.com/ru-ru/dotnet/csharp/pro...
примерно 20 - 40 вопросов.

Потом спросят о предыдущих проектах. 
В общем на джуниора не слишком много спрашивают. 

В принципе HR просто смотрит на вашу адекватность как человека и соответствие позиции вашему резюме. 
Дальше техническое собеседование именно там вас и будут спрашивать, по списку который я привел.
3 этап это условно говоря встреча с директором (у некоторых формальность у некоторых самый главный этап)
Вопрос: Как из inputField получить int?

Лучший ответ:
Запретите вводить все кроме чисел? В итоге там будет число,

Худший ответ:
InputField input = ...;
int number = int.Parse(input.text); // если в input.text будет лежать не число, то будет FormatException
либо

InputField input = ...;
if(int.TryParse(input.text, out var number) {
  // используем number. В этом случае FormatException не выпадет, но тогда будет возникать ощущение, будто ничего не работает.
}
Вопрос: Как предоставить товар покупателю по API ключу?

Лучший ответ:
Оплата проходит через Free-kassa
После оплаты на Ваш скрипт-обработчик приходит информация о платеже. Вы её проверяете, и если всё ок (хэш совпадает, сумма нужная и т.д.) -- генерируете ключ и сохраняете в БД, отправив его на почту клиенту.

Как мне сгенерировать сам ключ ? Какие плагины для этого существуют? Стандартные функции PHP, гуглите "generate pass php"

Как клиент может авторизоваться по ключу ?
Пишите скрипт, который проверяет переданный через GET key в БД (наличие данного ключа в базе, время его жизни), и если всё ОК - выдаёт результат в виде товара.

Худший ответ:
Software License Manager плагин кое что умеет.

Но я подобное писал самостоятельно используя headless wordpress и rest api - так проще контролировать. И процесс полностью автоматический - без моего участия.

Там хитростей нет: в момент оплаты генерите пароль, отсылаете клиенту. Он его вводит у себя в форме активации вашего плагина-темы - запрос идет на ваш сайт. Вы проверяете активацию, ставите флаг активировано и записываете домен что пришел. Отправляете ему грубо говоря "ок". на стороне клиента увидел скрипт этот Ок и разблокировал функционал, записав в опции что лицензия прошла.
Временная активация - пишете дату активации и срок лицензии в отдельные таблицы бд. Часовым кроном сверяете например. Если лицензия закончилась - отсылаете на сервер клиента запрос - и там пишете в БД что срок лицензии кончился. Это выводит: или сообщение или блокировку функционала. Но блокировать работу функционала сразу - плохая практика. Вы можете кому-то без предупреждений поломать бизнес. Это отразится на вашей репутации как магазина так и разработчика. В итоге вас обходить стороной будут. Мне бы это не понравилось.

Другой вопрос что php защищать и типа активировать ключами - школьник это сможет обойти. А вот студиям, что захотят взломать активацию и массово ставить нуленые плагины/темы своим клиентам - будет грозить юр ответственность. Так что это защита в основном от совсем неопытных и от веб студий. Но не все студии понимают что взламывать часть приложения нельзя, хоть это и идет по GPL лицензии.
Вопрос: Transition не работает, как решить?

Лучший ответ:
Для transition можно указывать свойства которые вы хотите анимировать:
div#register>a>div.btn {
  float: right;
  color: #ffffff;
  font-size: 1.4em;
  background-color: #acc6e6;
  border-radius: 5px;
  padding: 5px 9px;
  font-family: "Bahnschrift";
  font-weight: 600;
  margin-right: 2%;
  margin-top: 10px;
  transform: translateX(0);
  transition: color 0.5s ease, background-color 0.5s ease;
  -o-transition: color 0.5s ease, background-color 0.5s ease;
  -ms-transition: color 0.5s ease, background-color 0.5s ease;
  -webkit-transition: color 0.5s ease, background-color 0.5s ease;
  -moz-transition: color 0.5s ease, background-color 0.5s ease;
  border: 1px solid #f2f2f2;
}

div#register>a>div.btn:hover {
  color: #acc6e6;
  background-color: #ffffff;
}

div#register>a>div.btn:active {
  transform: translateX(2px);
}
+ Дополнительно:
плохая идея анимировать margin, так как он изменяет layout (+ анимация не будет 60fps),
для плавных переходов, которые не требуют изменения layout лучше использовать transform ( https://medium.com/outsystems-experts/how-to-achie... )

Худший ответ:
Была такая проблема. Задай transition и для :hover элемента и для обычного. Мне помогло. Костыльно, но по-другому хз как решать
Вопрос: Потенциал верстальщика?

Лучший ответ:
Востребован ли верстальщик в 2019, или это я дурак и он действительно сейчас никому не нужен?
Абсолютно верно, верстальщик в 2019 никому не нужен.
Мир стремительно меняется, исчезают старые профессии, появляются новые - столько всего интересного и сложного появилось. Я думаю, если ваш Отец перестанет обзывать себя верстальщиком, а станет величать Дизайнером, то никто подвоха не заметит (особенно учитывая стаж и портфолио) и потенциал не уйдет в прошлое вместе со старомодным "верстальщик"

Худший ответ:
Да ващет хороший верстальщик в любом проекте нужен
Другое дело что в небольших проектах это как правило делает какой-то программист совмещенно - надо просто искать большую контору
Или речь идет не о веб-верстке?))
Вопрос: Методы и функции в C#?

Лучший ответ:
Есть термины функция, процедура, метод в рамках парадигм программирования, но терминология в C# иная.

В C# нет функций и процедур, есть только методы и делегаты.
Лямбда-выражения, в зависимости от контекста, "под капотом" приводятся к анонимным делегатам с телом или к Func, Predicate, Action.
Все утыкается в объектную модель, которую поддерживает абстрактная машина языка C#. 
Единицей трансляции является класс, и свободных функций в namespace быть не может, так же как и указателей на функцию в принципе - вместо указателей на функцию в C# используются делегаты. Делегат реализован как абстрактный класс, это позволило реализовать типобезопасные ссылки на методы, которые можно складывать и вычитать, позволило удобно реализовать асинхронность.

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

В C# нет понятия функции как объекта, функцию нельзя просто так создать. Вообще можно, но прежде чем её использовать, её нужно будет скомпилировать, но она будет в любом случае в каком-то классе, и она будет методом этого класса; и чтобы методы вызвать, сначала надо получить ссылку на экземпляр класса.

Худший ответ:
Метод - он что-то делает молча и возвращает ничто (void).
Функция же после того как что-то сделала, возвращает свой результат, будь то число, текст или даже целый класс.
В общем различия только философские.
Вопрос: Laravel, миграции. Ошибка errno: 150 «Foreign key constraint is incorrectly formed», как исправить?

Лучший ответ:
Типы $table->bigIncrements('id'); и $table->integer('pechnik_id')->unsigned(); не совпадают

Худший ответ:
Типы $table->bigIncrements('id'); и $table->integer('pechnik_id')->unsigned(); не совпадают
Вопрос: Генерация коротких уникальных ключей в mysql как реализовать?

Лучший ответ:
Оставьте в покое базу данных. Она в этой задаче вообще ни при чем.
Вам нужно всего лишь обратимое шифрование по ключу вашего ID - так, чтобы пользователь видел зашифрованную строку, а вы из нее могли получить ID обратно. Вот и все.

P.S. Впрочем, для такой цели и особого шифрования не требуется. Собирать строку {N1}{N2}{N3}, где N1 и N2 - случайные числа заданной длины, а N3 = (N1 * N2 + ID) XOR C - вот и готовый short_key, из которого обратно получаем ID = (N3 XOR C) - (N1 * N2)

Худший ответ:
SQL не умеет генерировать уникальные строки. Генерируйте с помощью php: unique();
Вопрос: Что стоит заносить в css переменные?

Лучший ответ:
Всё зависит от частоты встречающихся значений чего-либо, можно туда же значения медиазапросов положить, размеры шрифтов, но не стоит упарываться слишком сильно)

Худший ответ:
Если дизайнер просто офигенный и положил с макетом style guide, то можно буквально все из него вносить в переменные и миксинить. А так на свое усмотрение.
Вопрос: Будет ли работать 350 метров витой пары?

Лучший ответ:
Оптоволокно?

Худший ответ:
Есть poe-удлинители, на них спокойно можно 500 метров прокинуть при условии, что на конце не PoE нагрузка.
Вопрос: Если из PHP мы будем запускать процесс через exec без задержки исполнения можно ли это считать асинхронным программированием?

Лучший ответ:
Нет

Худший ответ:
нет

если палкой ударить по железяке - столяра из вас это не сделает
Вопрос: Что если поставить для регистрации два пароля?

Лучший ответ:
Профита 0 от хеширования первого вторым.
Проще хешировать один.
Для усиления защиты - нужно не выдумывать, а больше читать инфы в инете.

Худший ответ:
Начинаем с модели нарушителя - какие угрозы Вы хотите предотвратить именно данным решением?
Вопрос: Как можно сделать блик на img?

Лучший ответ:
Ховер и анимация:

snippet

Худший ответ:
Создать новую картину с бликом, прописать mouseover в тэг элемента, .toogle в jquery
Вроде правильно
Вопрос: Как определить нажата кнопка вперёд или назад в браузере?

Лучший ответ:
хотя бы определить какой state был предыдущий.
сохраняйте его и в следующий раз сравнивайте.

Худший ответ:
console.log(event.target); попробуй
Вопрос: В каком углу экрана лучше (традиционно принято) располагать шкалу здоровья?

Лучший ответ:
Определите жанр своей игры
Найдите в стиме топ-10 игр этого жанра
Проанализируйте скриншоты этих игр на предмет того, где у них шкала здоровья

Худший ответ:
В играх, которые приходят в голову "на вскидку", ХП обычно располагается в левом нижнем углу.