pavki/hr_qa_sbs_best_bad huggingface dataset:
Вопрос: 6 фото в два ряда по 3 фото на ряд в bootstrap?

Лучший ответ: Твою ж дивизию, открывай свой бутстрап и ищи демо-примеры - они там для таких как ты собсно и придуманы.
https://getbootstrap.com/docs/3.3/examples/jumbotron/
Или тут готовые куски, для особо ленивых
https://bootsnipp.com/snippets/featured/portfolio-...
Про отступы 5-10 забудь, бутстрап - это по 15 по краям, т.е. между соседними будет 30

Худший ответ: Если я вас правильно понял, то вам нужно что-то вроде этого:<div class "container">
<div class="row">
<div class="col-md-4">
<img src="урл картинки" alt="картинка">
</div>
<div class="col-md-4">
<img src="урл картинки" alt="картинка">
</div>
<div class="col-md-4">
<img src="урл картинки" alt="картинка">
</div>
</div>
<div class="row">
<div class="col-md-4">
<img src="урл картинки" alt="картинка">
</div>
<div class="col-md-4">
<img src="урл картинки" alt="картинка">
</div>
<div class="col-md-4">
<img src="урл картинки" alt="картинка">
</div>
</div>
</div>
Вопрос: Как создавать индексы MySQL в Laravel?

Лучший ответ: если вам нужно иметь данные отсортированные по c_id указывайте в выборке `order by c_id`
наличие индексов само по себе не определяет порядок сортировки при выборке. вносятся данные с сортировкой по tag_id (он же primary key), а надо по c_id.
данные вносятся и хранятся безо всяких сортировок.  если вы пишете без удалений, то данные будут лежать в естественном порядке записи , если с удалениями - тут уже никто не знает что будет

Худший ответ: Напишу только это:$table->increments('tag_id');
Вопрос: Как сделать такой циркулирующий прогресс для слайдера?

Лучший ответ: www.ruformat.ru/js/intro.jsif (Modernizr.canvas) $slides.each(function(index){
.............
			    circ = Math.PI * 2,
			    quart = Math.PI / 2,
UPD: просто так
UPD2 ( по просьбе semki096 ): www.cssscript.com/demo/animated-pie-progress-bar-w...

Худший ответ: Удалось сделать этим плагином https://github.com/kottenator/jquery-circle-progress
Вопрос: Миграция системы со старого M2 Ssd на новый M2 Ssd?

Лучший ответ: Да, именно так.

Худший ответ: macrium reflect 7 home use и не париться...
Вопрос: Как добавить библиотеку phpquery в Laravel?

Лучший ответ: Написать "composer require electrolinux/phpquery"

Худший ответ: В консоли: composer require imangazaliev/didom
Вопрос: Как полностью отключить адаптивность на сайте?

Лучший ответ: Да ради всего святого, уберите все @media-запросы из всех файлов стилей и уберите везде тэги вроде такого:<meta name="viewport" content="width=device-width, initial-scale=1">
Всего делов.

Худший ответ: В css нужно найти и удалить что-то похожее на это @media-screen and (max-width: 900px)
Вопрос: Объявление «var» больше не нужно? let наше все?

Лучший ответ: Ведь переменная с четко определенной областью видимости - всегда лучше, чем та, которая всегда становится глобальной независимо от того, где она определена?
ошибка детектед
на самом деле всё четко:
область видимости var — функция в которой обьявлена переменная
если в основной функции то она глобально видна
можно полностью отказаться от var перейти на let когда это будет поддерживаться всеми браузерами

Худший ответ: После того, как в стандарте ввели объявление переменных с помощью let, имеет ли смысл пользоваться var?В супер-пупер редких случаях поведение var может понадобиться. А так, конечно, лучше использовать let, его для того и придумали.
Вообще, нужно помнить, что let в браузерах полноценно не заработает ещё какое-то время (пока не вымрут старые версии), поэтому и приходится транспайлить код.
Вопрос: Как решить конфликт Sass/sourcemapce в git?

Лучший ответ: Скажите пожалуйста как решается данная проблема, как добавить эту часть в игнор?Создаёте файл .gitignore и добавляете туда всё лишнее, в т.ч. CSS, SourceMaps и всю прочую автоматически генерирующуяся ерунду. Соотв. после этого, удаляете s.map из истории репозитория (полностью).
На продакшене, или перед сдачей вёрстки на осмотр, деплоем или перед подобными мероприятиями, все нужные файлы (обычно это относится к CSS, а не к s.map) собираются/генерируются либо последним разработчиком (который сдаёт), либо любой системой сборки, которую вы используете.

Худший ответ: Добавить файл в .gitignore?
Вопрос: Как лучше всего организовать таблицы БД и модели в Yii2?

Лучший ответ: Трех таблиц достаточно:analyze
id | name | type

property 
id | type | name

analyze_property_value 
id | property_id | analyze_id | value

Худший ответ: Все хорошо только вот с очтетами как тут?  Если для составных анализов analiz_id  пудет один....как я отчеты буду брать?
Вопрос: Как присоединить Базу данных к своему проекту на GitHub?

Лучший ответ: Если БД не большая, то можно использовать встраиваемую (imbedded)  базу данных, например H2.
База будет подыматься вместе с вашим приложением.
Все что нужно, это подключить в зависимости JDBC драйвер <dependency>
            <groupId>com.h2database</groupId>
            <artifactId>h2</artifactId>
            <version>1.4.192</version>
        </dependency>И указать URL с нужными параметрами
Простой примерimport java.sql.*;

public class H2Main {

    static {
        try {
            Class.forName("org.h2.Driver");
        } catch (ClassNotFoundException e) {
            System.err.println("Error load H2 JDBC driver: " + e.getMessage());
        }
    }


    public static void main(String[] args) {

        try (Connection con = DriverManager.getConnection("jdbc:h2:./h2example", "sa", "")) {

            createSimpleDBSchema(con);

            System.out.printf("Message from H2: %s\n", getMessage(con));


        } catch (Exception e) {
            System.err.printf("%s: %s\n", e.getClass().getSimpleName(), e.getMessage());
        }


    }


    static void createSimpleDBSchema(Connection con) {
        try (Statement stmt = con.createStatement()) {

            stmt.executeUpdate("CREATE TABLE HelloH2 (message varchar(255) NULL);");

            stmt.executeUpdate("INSERT INTO HelloH2 (message) VALUES ('Hello World!')");

        } catch (SQLException e) {
            System.err.printf("%s: %s\n", e.getClass().getSimpleName(), e.getMessage());
        }
    }


    static String getMessage(Connection con) throws SQLException {

        try (Statement stmt = con.createStatement();
             ResultSet rs = stmt.executeQuery("SELECT message FROM HelloH2")) {

            if (rs.next())
                return rs.getString("message");
            else
                return null;

        }
    }

}

Худший ответ: Используйте миграции.
Вопрос: С какого диска выделить место под ubuntu?

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

Худший ответ: Убунту 16 рекомендует выделять минимум гигов 20 под раздел. При этом под пользовательские данные (читай - свободного места в разделе убунту) будет где-то 15. Винда любит жрать свой системный диск под невесть что, какие пути для установки софта ты ей не указывай, так что я оставил бы ей родные 120 гигов на пропитание и поставил на терабайт. У меня так и сделано, никаких проблем это не порождает, убунту быстрая и с хдд отлично бегает. В случае чего удалить её и переустановить в другое место - дело простейшее.
Вопрос: Как сложить цены в корзине товаров?

Лучший ответ: Ну и конечно по-человечески разрабатывать вам религия не позволяет, а поэтому вы решили зафигарить проект на React/Redux/чётотам, а теперь вместо SELECT SUM(`price`) FROM `basket` WHERE `userid`=:userid; приходится вопрошать на форуме, как из этой простыни джаваскрипта, htmlя и компонентов выдрать чёртову сумму.

Худший ответ: Наверное, вместо

this.setState({price});

должно быть что-то вроде

this.setState({ price: this.state.price + price });
И дефолтное значение price - почему пустая строка? Такой суммы не бывает. Бывает 0.
Вопрос: Можно ли в новой версии Unity(2018.2) писать на Java?

Лучший ответ: Просто отвечу. Нет.

Худший ответ: Скорей всего, речь о расширениях для android. Раньше надо было подключать собранные библиотеки, а теперь можно исходники.
Вопрос: Как поднять частоту оперативной памяти HyperX с 2400, до заявленной 2600?

Лучший ответ: в биосе xmp profile скорее всего надо отключить сначало а потом вручную всё выставить

Худший ответ: Нужно "разблокировать" настройки, т.е. включить нестандартные или неавтоматические настройки, делается это по разному.
Вопрос: Что учить frontend разработчику?

Лучший ответ: 1. Сначала учим фундаментальщину (как работают компьютеры, сети и браузер, http, основы программирования).
2. Затем изучаем как работают конкретные веб-технологии (html, js, css, как всё это парсится браузером и рендерится в веб-страницу, учимся верстать и использовать js, книжек и курсов масса).
3. Далее изучаем технологии, которые всё это автоматизируют, упрощают и абстрагируют (фреймворки, бутстрапы, реакты, сборщики,  jquery, новые стандарты, гриды итд итп).
4. Практика, применение изученного, выбор специализации (зависит от того, что хотите далее делать во фронте - это может быть просто вёрстка, создание интерфейсов или визиуализация данных, а может быть и работа с графикой\аудио\видео, тренды (сейчас это react, bootstrap, foundation, babel, es6, d3, RxJS, функциональное программирование)), далее развиваться на протяжении жизни можно до бесконечности. Но без первых пунктов это всё ничто.

Худший ответ: Открываем список вакансий. Смотрим требования.
Вопрос: Где брать многостраничные PSD?

Лучший ответ: стырить у Лебедева

Худший ответ: Free PSD template в Гугле. 
Но, само собой, никаких там объяснений не будет. Да и нигде не будет, кроме как при работе с живым дизайнером (хотя тут тоже далеко не всегда).
Вопрос: А как вы адаптируете сайт, когда нужна помощь js?

Лучший ответ: Вот так по науке: https://www.sitepoint.com/javascript-media-queries/

Худший ответ: А как же флексы?
Вопрос: Парсинг сайта, Python + BeautifulSoup?

Лучший ответ: На первой итерации цикла td возвращает пустой список отсюда и ошибка.import requests
from bs4 import BeautifulSoup

def get_html(site):
    r = requests.get(site)
    return r.text

def get_page_data(html):                         #sources
    soup = BeautifulSoup(html, 'lxml')           #(format_in, parser)

    line = soup.find('table', id='theProxyList').find_all('tr')     #resolve table

    for tr in line:
        td = tr.find_all('td')
        if td == []:
            continue
        ip = td[1].text
        port = td[2].text
        country = td[3].text
        anonym = td[4].text
        types = td[5].text
        time = td[6].text

        data = {'ip': ip,
                'Port': port,
                'Country': country,
                'Anonymize': anonym,
                'Type': types,
                'Time': time}
        print(data)
def main():
    url = 'http://foxtools.ru/Proxy'
    get_page_data(get_html(url))

if __name__ == '__main__':
        main()

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

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

Худший ответ: В общем случае - никак. Если я на Windows Server ставлю две сетевки и начинаю межуд ними передавать трафик - я роутер или нет? Или я все же сервер? :)
Что можно узнать.
- производителя устройства. Узнать можно почти всегда, получив MAC устройства и сравнив с выложенной в тырнет таблицей блоков MAC-адресов
- Запущенные сервисы. Узнать можно почти всегда, если в одной сети с устройством и оно не блокирует трафик. nmap или другие сканеры портов
- Идентификацию устройства. Узнать можно, если на нем подняты сервисы, допускающие ручной ввод команд - ftp, telnet, smtp, imap и пр. При подключении на порт сервиса, демон его обслуживающий, обычно выдает строку индентфикации, часто содержащую инфу о том, что это за устройство
- Количество сетевых интерфейсов и их настройки. Узнать можно почти всегда, если есть админские права или если их нет, но установлен и запущен SNMP с дефолтными настройками.
Ну а дальше начинается чистая эмпирика. Компьютер может иметь десяток сетевух, но не быть роутером, а может иметь две и быть. А еще он может быть хостом, несущим несколько ВМ, которые общаются между собой по внутреннему свитчу - он будет роутером или нет?
Вопрос: После HTML5/CSS3 учить JavaScript или Адаптивную верстку?

Лучший ответ: Ну логично же что верстку нужно доучить до конца, а значит адаптив разобрать!
А потом уже в js лезть.

Худший ответ: п.2. т.к. JS всегда медленнее CSS3.
Всё, что нужно для отображения блоков - должно быть сделано на HTML/CSS3.
Вопрос: Как в sublime text подсветить синтаксис css в php?

Лучший ответ: нет такого плагина для саблайма. юзайте IDE. к примеру phpstorm

Худший ответ: Очень неудобно писать большие файлы и приходится выносить статичный css в другой файл
для этого есть LESS зачем php использовать? Конечно же нет такого плагина, так как то что Вы делаете никто больше не делает.
Вопрос: Что написать в файле robots.txt для Modx?

Лучший ответ: Если переименованы, то в robots.txt их не следует указывать.
Эту строку лучше тоже удалить, ведь часть стилей может читаться из директории с компонентами.Disallow: /assets/components/

Худший ответ: Файл можно создать через генератор capyba.ru/services/tools/robots/
Вопрос: Как выучить английский язык до уровня B2?

Лучший ответ: Приложить усилия. Нельзя выучить английский, просто заплатив куда-то денег.
Поэтому выделять нужно не просот 1.5к в месяца, а много времени и УСИЛИЙ, которые реально тратятся на изучение, а не просто полистать учебник полтора часа, не вникая в смысл.
Советую воспользоваться поиском и найти уже готовые ответы вроде
* онлайн-ресурсов (lingualeo и др игровые варианты для регулярных занятий).
* Посещение курсов (любых, где есть преподаватель и общение)
* Регулярный просмотр видео на английском
Опять же, если у вас сейчас уровень elementary, то 6 месяцев может оказаться недостаточно, если вы не живете в стране с носителями.

Худший ответ: Купить учебник по b2 и пройти его.
Вопрос: Как в микросервисах ограничивать доступ на уровне сущностей?

Лучший ответ: AAA (Authorization, Authentication, Accounting, не имею в виду семейство протоколов, а саму идею) - это всегда отдельная тяжелая служба, потому что высокая связность и зависимость других служб не входят в парадигму микросервисов.
Лучше всего себя показывает такой подход (AWS IAM, фейсбучная проверка доступа, тысячи их): отдельный сервис для работы с ACL, непосредственно контроль доступа - на стороне микросервисов.
Формат ACL можете честно стырить у IAM: на каждый тип объектов - базовые active,owner,read,edit и присущие этому типу, все ID объектов в одном формате и биективны, записи по каждому виду доступа в двух видах: Permission - ID (например для владельца) и Permission - ID List.
Непосредственно контроль доступа - на стороне микросервисов без выноса в отдельные сущности. Доступ проверяется по ID объекта, инициализирующего действие, по надобности ещё проверяются и его группы.
На вашем примере: PatientTHX1138, врач DoctorMengl создает карту о визите Case23523 и анализы Test991235-991237. У каждого анализа есть права на чтение/изменение всех его данных (для пациента/его лечащих врачей) или только даты приёма, кабинета и проводящего врача (для ресепшна). Дело передаётся отдельной функцией путем замены в ACL владельца, предыдущий врач в зависимости от причины передачи либо лишается доступа (увольнение/отстранение), либо получает доступ на чтение в обычном случае передачи, либо получает доступ на запись в случае передачи внутри группы врачей. Аналогичная ситуация с разным уровнем доступа для врачей и ресепшна у самого визита и пациента (ресепшну вряд ли надо знать, какого размера камень в почках).

Худший ответ: 1. Создайте общее "дерево" зависимостей сущностей (work-flow).
2. Создайте роли для разных объектов (пользователей/групп/сервисов и т.д.).
3. Создайте битовые ACL-"маски" для конкретных объектов и привяжите их к нужным узлам "дерева".
4. Если нужно управлять доступами динамически: создайте доп."маски" доступов (service override ACL) и меняйте их конкретным сервисом.
Вопрос: Как правильно настроить iptables для подключения через VNC?

Лучший ответ: https://www.google.com/search?q=iptables+port+forw...
Ну и убедиться, конечно, что у вас белый IP, доступный из интернета.

Худший ответ: Для начала нужно убедиться что у вас есть белый адрес. А уже потом настраивать iptables
Вопрос: Как сделать бэкграунд в виде полос многострочному тексту?

Лучший ответ: https://codepen.io/anon/pen/dqBKYV
для класса lines изменяйте размер шрифта чтобы изменить высоту фона подложки.

Худший ответ: Самый простой способ - обернуть текст в тег span  и дать ему стиль:background: linear-gradient(to bottom, transparent, transparent 50%, #ff0 50%, #ff0);snippet
Вопрос: Может ли один хороший веб-разработчик заменить команду?

Лучший ответ: Во первых один человек не может быть действительно хорош во всем. 
Да, знания из смежных областей полезны, но "чистый" специалист как правило будет эффективней.
Во вторых, по порядку, но не по значимости - ни один даже самый великолепный специалист не может уделять проекту больше 60-70 часов в неделю.
В третьих - вопрос рисков. Один человек может заболеть, уволиться, умереть наконец. 
Команда и распределение обязанностей страхует эти риски.
Если говорить про приведенный пример в виде сайта Аэрофлота - мой опыт работы с enterprise компаниями, говорит что задачка "нам нужно сделать новый баннер на главной странице" оформляется в виде небольшого ТЗ страниц на 70-80, включает в себя предварительную аналитику, 5-6 вариантов дизайна, исследования фокус групп, - и это все не говоря о юридической части работы. Сможет ли это все сделать 1 человек за приемлемое для заказчика время - ...

Худший ответ: если серьезный проэкт , то не реально, там разное направление работы с сайтом
Вопрос: Никто не в курсе почему используют Mailchimp вместо обычных писем с сайта?

Лучший ответ: Обычные письма попадают в спам. Надо использовать библиотеки и слать через сторонние SMTP, но там лимиты. Можно поднять свой почтовый сервер с DKIM и SPF но это сложновато и не каждому по силам. Что бы использовать почтовый офис Яндекса или Гугла DKIM тот же всё равно нужен.

Худший ответ: Никто не в курсе почему используют Mailchimp вместо обычных писем с сайта?Наверное, правильнее было бы сказать "сервисы e-mail рассылок", а не "mailchimp".
Их обычно используют по тому, что:
а) Рассылка должна соотв. некоторым требованиям, что бы не попасть в спам
б) Рассылка на много пользователей - не так то просто настраивается, что бы рассылаться во много потоков сразу, что бы рассылка не длилась сутками
в) По тому, что не все имеют почтовый сервер свой, ещё и грамотно настроенный, что бы что-то рассылать, а бесплатные SMTP типа Яндекса - блокируют и рассылку и сам ящик, примерно после 100-го письма отправленного в течение часа, подряд, с пометкой "спамить - плохо".
Вопрос: Wordpress вывод относительной даты: сегодня, вчера?

Лучший ответ: Вам нужны фильтры get_the_date() — получает дату создания и get_the_modified_date() — получает дату изменения.
Вставьте в конец файла functions.php:// часовой пояс Москва
$main_timezone = get_option( 'timezone_string', 'Europe/Moscow' );
date_default_timezone_set( "$main_timezone" );

// для даты создания
function main_get_the_date($the_date, $d, $post) {
	$d = 'd.m.Y';
	$date_now = date_format(date_create("now"), $d);
	$date_yesterday = date_format(date_create("yesterday"), $d);
	$post = get_post($post);
	if ( !$post ) {
		return $the_date;
	}
	$the_date = mysql2date( $d, $post->post_date);
	if ($date_now == $the_date) {
		$the_date = esc_html__( 'сегодня', 'main' );
	} elseif ($date_yesterday == $the_date) {
		$the_date = esc_html__( 'вчера', 'main' );
	}	
	return $the_date;
}
add_filter( 'get_the_date', 'main_get_the_date', 10, 3 );

// для даты изменения
function main_get_the_modified_date($the_time, $d) {
	$d = 'd.m.Y';
	$date_now = date_format(date_create("now"), $d);
	$date_yesterday = date_format(date_create("yesterday"), $d);
	$the_time = get_post_modified_time($d, null, null, true);
	if ($date_now == $the_time) {
		$the_time = esc_html__( 'сегодня', 'main' );
	} elseif ($date_yesterday == $the_time) {
		$the_time = esc_html__( 'вчера', 'main' );
	}
	return $the_time;
}
add_filter( 'get_the_modified_date', 'main_get_the_modified_date', 10, 2 );

Худший ответ: Ого сколько у вас кода. Не могу сказать конкретно по WP, но я использую на всех сайтах momentjs.com
Вопрос: Как защитить код?

Лучший ответ: Но как защитить сам код? - как вариант, переписать бота на C/C++.
Упаковываем ботов правильно: файлы .ini и .pyz

Я даже боюсь представить, что там за секретный код, судя по вашим предыдущим вопросам)):
Как в telebot отправлять сообщение определенному пользователю?
Как спарсить json ответ?
Как добавить объект в список json?
Как сделать кнопку с ссылкой в telebot python?

Худший ответ: Просто выложите для всех - заказов больше соберёте!
Вопрос: Где взять новые идеи в seo?

Лучший ответ: там где и старые
у конкурентов в выдаче

Худший ответ: Ну надо понимать что фишечуи они идут после того как сделано основное, а основное приносит 80 процентов результата
Вопрос: Как можно сделать на joomla расчет как на сайте?

Лучший ответ: Там расчёт выполнен на JavaScript в одной форме со скрытыми полями.

Худший ответ: Обычный скрипт мультистепа.
Не имеющий никакого отношения к джумле.
Вопрос: Как правильно сравнивать на равенство в Python?

Лучший ответ: Операция == - это сравнение значений, а is - это сравнение ссылок внутри памяти. Если значения равны через ==, но не равны через is - они просто хранятся в разных ячейках памяти.
То есть, ==  отвечает на вопрос, равны ли объекты? А is отвечает на вопрос - это один и тот же объект?
Посему, c is можете сравнивать типы, None, False, True, а с переменными используйте ==

Худший ответ: a is b эквивалентно id(a) == id(b)
Вопрос: Можно ли пользоватся полноценно ubuntu, не устанавливая ее?

Лучший ответ: Добрый день.
Установите на флешку систему, а лучше на внешний hdd/ssd

Худший ответ: Парадокс в том, что всё равно будете её устанавливать на флешку.
Вопрос: Чем генерировать SVG-анимацию?

Лучший ответ: https://svg-edit.github.io/svgedit/releases/svg-ed... 
А вообще в любом svg редакторе а потом переводите в html

Худший ответ: Вот редактор простенький появился на днях на бета тестировании: ссылочка, попробуй)
Вопрос: Как задать меню по центру?

Лучший ответ: Для menu_group menu_group_header убери Float: left, и вставь     width: max-content;
    margin: 0 auto;
Ну и margin у li убирай

Худший ответ: Для родителя:
width: 100%;( или сколько нужно)
margin: 0 auto;
display: flex;
justify-conten: center;
align-items: center
для li:
display: inline-block
Вопрос: Как изменить стиль карты для применения в навигации?

Лучший ответ: А вы уже получили письменное разрешение от Google? Заказчик этой работы вряд ли будет рад вашему решению использовать карты Гугл.

Худший ответ: тебе нужны "векторные тайлы" для них можно самостоятельно сделать стиль и рендерить в картинку в "браузере" клиента от тог же mapbox. минус в большей нагрузке на браузер клиента и как следствие торможения.
для приложения можно взять библиотеку типа mapsforge (java).
саспланета работает только с растровыми тайлами, т.е с уже готовой картинкой.
мож прикрутить собственный генератор растровых тайлов со своим стилем ??
Вопрос: Как в телеграм из публичного канала сделать приватный?

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

Худший ответ: В правом верхнем углу нажать на 3 точки -> Manage Channel -> Channel Info -> дальше выбираешь тип канала Public или Private
Вопрос: Как переделать класс из ES5 в ES6?

Лучший ответ: Удали var self = this;
Замени selfна this

Худший ответ: В методох open  и close замени self на this