Vikhrmodels/habr_qa_sbs huggingface dataset:
Вопрос: Можно ли в If вести две или более условии, если да то как?

Лучший ответ:
if(«условие» && «условие») {
...
}

Худший ответ:
Вот вам 3 условия
var item = await _ctx.Telemetry.FirstOrDefaultAsync(x=>x.Login == model.Login &&  // совпадение по логину
                                                                       x.PageName == topic.Title && // совпадение по имени курса
                                                                       x.PageNumber == topic.Path // совпадение по пути
                                                                       );

А вот вам извращенная пачка

if (!ModelState.IsValid) return BadRequest();
            var now = DateTime.UtcNow;
            model.Login = FixLoginNames(model.Login);
            var m = await _ctx.Telemetry.OrderByDescending(x => x.End)
                .FirstOrDefaultAsync(x => x.Login == model.Login &&
                                          x.CourseId == model.CourseId &&
                                          x.PageName == model.PageName &&
                                          x.PageNumber == model.PageNumber);

И продолжение этого кода
try
            {
                var id = 0L;
                model.Start = now;
                var endTime = now.AddSeconds(Interval + 1);
                if (model.Topics != null) await ParseTopics(model, now);
                if (m == null)
                {
                    model.End = endTime;
                    await _ctx.AddAsync(model);
                    await _ctx.SaveChangesAsync();
                    id = model.Id;
                }
                // Проверяем что это одна и та-же сессия
                else if (m?.End != null && m.End > now)
                {
                    m.End = endTime;
                    m.Duration = GetDuration(m);
                    _ctx.Telemetry.Update(m);
                    await _ctx.SaveChangesAsync();
                    id = m.Id;
                }
                else
                {
                    model.End = now;
                    model.Duration = 0;
                    await _ctx.AddAsync(model);
                    await _ctx.SaveChangesAsync();
                    id = model.Id;
                }

                var url = Url.Action("Get", new { id });
                return Created(url, new { id, url });
            }
Вопрос: Что так может искрить в блоке питания?

Лучший ответ:
Сегодня с 99% уверенностью могу сказать - это блок питания. Оказывается, при включении из него снопы искр летят!Нужно ли менять БП, учитывая, что за два года у меня ничего не сгорело? А может и дальше ничего не сгорит?
Вы что - издеваетесь?
Меняйте срочно нафиг... Сгорите и соседей сожжете...
Из-за таких "авось" - пожары и происходят...

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

Лучший ответ:
Не с того начали вопрос, какой выбрать инструмент - второстепенный вопрос, дизайн не закладывается в инструменте, хороший макет можно нарисовать где угодно, даже на пейте - вопрос, как это потом будут верстать.
Сейчас перед вами стоит вопрос - как стать лучше, а для этого, у меня есть короткая формула, которая более менее, поможет подтянуть скиллы:
1. Ютуб-контент - не лучший способ получать знания, с учетом того, что весь нынешний контент предназначен для старта, более сложные вопросы обычно там не обсуждают. Я рекомендую подписаться на нескольких крутых дизайнеров в Medium, Habr и Твитере. Читайте, что они говорят, какие методы они применяют, не ленитесь использовать новые методики в дизайне - тестируйте, пока не придете к тому, который будет вам удобен.
2. Не забывайте, что любой дизайн строиться на анализе конкурентов и близких по тематике сайтов, если вы начинаете работу над каким-то макетом - изучите все что уже есть на рынке, посмотрите на их решения, иногда даже можете некоторые элементы сохранять себе в макет, в виде скриншота, чтобы идея не вышла из головы. И вот когда, вы найдете 5 - 6 похожих решений, вы сможете придумать свое.
3. Как икона - behance, смотрите на работы других каждый день, по 30 минут в день. Просто открывайте, и анализируйте, запоминайте их решения - только так, вы сможете понять культуру веб-дизайна.
4. Книги по UX - обязательный этап любого проектировщика интерфейсов, список полезных книг я публиковал сюда: Какие книги посоветуете начинающему web-дизайнеру?
5. Ну и главное - практика, не забывайте делать свои проекты, создавайте себе техническое задание и выполняйте его. В любое свободное время - просто создавайте.
Что касается ваших вопросов:
1. Любое, я использую Figma два года, у меня не было проблем с клиентами, хотя долгое время я работал на фрилансе.
2. Кидаете ему макет на просмотр и все, Figma сделала удобный интерфейс для верстальщика, он разберется.
3. Если контентная область определена, какая разница, какое разрешение вы поставите? Рекомендую ставить 1920 - так верстальщику легче будет видеть полную картину.

Худший ответ:
Какая разница какая программа? Когда нужно нарисовать, использую XD, все нужные функции для веб-дизайна там есть. Лично мне Фигма не зашла. 
Сейчас существуют программы, которые облегчают работу дизайнерам и верстальщикам - Zeplin/Avocode, в них можно кинуть и .psd и .xd и другие, и там верстальщики смогут сделать всё что нужно.
Почему ты опираешься только на Bootstrap? Хочешь прикол? Есть сайты построенные и без него. И сетки на этих сайтах не всегда есть.
Вопрос: Проблема при добавлении 10 тыс точек на яндекс карты api?

Лучший ответ:
Потому что нужно передавать не в цикле по одному объекту, а собрать json-массив. Посмотрите вот этот мануал https://yandex.ru/dev/maps/jsbox/2.1/object_manager

И вот пример как собрать такой массив на php

$mask = array();
$mask['type'] = 'FeatureCollection';

foreach ( $variable as $key => $value ) {
	$mask['features'][] = array(
		'register-post-types.php' => 'Feature',
		'id' => $key,
		'geometry' => array (
			'type' => 'Point',
			'coordinates' => [(float) $value->lat, (float) $value->long],
		),
		'properties' => array (
			'balloonContentBody' => '<strong class="map-title"><a class="link" href="' . $value->post_link . '">' . $value->post_title . '</a></strong>',
			'balloonContentFooter' => '<a class="hidden" href="#">Я был здесь!</a>',
			'clusterCaption' => '<strong>' . $value->post_title . '</strong>',
			'hintContent' => '<strong>' . $value->post_title . '</strong>'
		)
	);
}

После, с помощью json_encode( $mask ) вы можете передавать массив дальше в обработчик

Худший ответ:
Ответ такой.
Никогда.
Ни при каких условиях.
Клиент не должен получать 10000 точек и вообще каких-либо данных.
Это аксиома.

Ты её нарушил и получил проблемы.
Вопрос: Почему зависает сайт при свободной памяти и процессоре?

Лучший ответ:
Проблему решил.
Дело было в Bitrix CMS, а именно нашел функцию SessionTable::lock, которая шлет запросы GET_LOCK("***", 60) в базу.
Как назло в  документации о ней мало что написано. Не понятно, когда она срабатывает, но у меня подозрение что когда число одновременных запросов к MySQL подбирается к лимиту. 
В результате получаем блокировку сайта на 1 минуту и пустые логи.
Часть запросов к БД которые шли через Битрикс прописал на чистом PHP и зависания прекратились.
Всем спасибо!

Худший ответ:
Покажите вывод командыcat /proc/sys/fs/file-max
Ну и вообще то облазить /var/log на предмет странных записей в этот момент было бы неплохо.
Вопрос: TypeHinting. Будущее. Какой выход?

Лучший ответ:
не передавать данные других типов/не обновлять пых/не пользоваться типизацией/не использовать strict_types.

а что будет в будущем не очень то и понятно.

Худший ответ:
Прописать всюду:
declare(strict_types=1)
Включив тем самым строгую типизацию, и не позволять себе передавать что попало в надежде что "оно само" магически преобразуется.
Вопрос: Формирование зарплаты у веб разработчиков?

Лучший ответ:
Хороший вопрос!
Я интересовался и получил ряд ответов от самих Заказчиков. Так, сказать, их мировозрение в этом плане.

Со стороны Заказчиков: 
1. Раз ты работаешь на фрилансе - ты лох, потому, что не смог никуда устроиться.
2. Если ты фрилансер - ты раб, который зарабатывает, чтобы не умереть с голоду. Поэтому, много тебе и платить не за чем.
3. Нет гарантий для нас, что ты сделаешь всё на совесть. Мы не понимаем как сделать самим и, при этом, хотим хорошо сэкономить. 
4. (Про время) Мы оцениваем не сложность проекта и твоё умение и опыт, а время, которое никак не может быть дороже медианы фриланса по этому направлению.
5. Нам нужно быстрее, т.к. это получается дешевле для нас, т.к. мы оцениваем время, а не сложность нашего проекта.
6. Все фрилансеры низкоквалифицированные рабы.
7. Каждый, кто мнит себя опытным и будет просить больше, будет сидеть без работы, т.к. высокая конкуренция и есть большой выбор исполнителей на рынке за копейки.
8. Фриланс - это рабы IT сферы для нашего бизнеса.
9. Мы всегда ищем тех, кого сможем обмануть в плане оплаты за работу и их почти 100%.
10. Нам ничего не стоит сбросить сумму оплаты в любой момент сославшись на угрозу отрицательного отзыва.
11. Мы не дорожим репутацией, в отличие от фрилансеров.
12. Вы сами ничего не делаете: всё берёте с гитхаба уже готовое. За что вам платить?!

(и ещё можно продолжать и продолжать...)

И сразу  возникает вопрос:
Ждать ли роста дохода фрилансеров IT-сферы и когда?
Ответ прост: когда все IT-шники поймут, что нужно ценить труд друг друга, что они не конкуренты друг другу, а единый целый "организм", который может сам за себя постоять и накормить вне зависимости от места работы и размера дохода.
Итог: Не нужно работать и "ломать" глаза на тех, кто этого не понимает, а значит, и НЕ ЦЕНИТ!

А пока разделяйте качество своих трудозатрат на "хлеб" и на "работу" и сразу озвучивайте 2 суммы заказчикам.

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

Лучший ответ:
Любая ошибка синтаксиса, вызванная передаваемыми в запрос данными говорит о том, что запрос в принципе пишется неверно. А по-старинке, путем запихивания всех переменных прямо в строку запроса.

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

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

$sql = "INSERT INTO t (text, author_id) VALUES(?,?)"; // заменим переменные на специальные маркеры
$stmt = $mysqli->prepare($sql); // подготовим запрос к выполнению.
$stmt->bind_param("ss", $text, $author); // привяжем к нему переменные
$stmt->execute(); // и выполним его
три простых шага, а код становится гораздо чище, безопаснее и короче.
причем это в mysqli три, а в PDO вообще два:
$sql = "INSERT INTO t (text, author_id) VALUES(?,?)"; // заменим переменные на специальные маркеры
$stmt = $pdo->prepare($sql); // подготовим запрос к выполнению.
$stmt->execute([$text, $author]); // сразу и привяжем и выполним

Худший ответ:
Нужно экранизировать специальные символы
$text = mysqli_real_escape_string($conn, $text); //Для $conn
$text = $mysqli->real_escape_string($text); //Для $mysqli

https://www.php.net/manual/ru/mysqli.real-escape-s...
Вопрос: Как создать бота который будет выходить и заходить в беседу бесконечно?

Лучший ответ:
Боты не могут самостоятельно вступать в беседу.

Худший ответ:
мне кажется тут не бот а клиент нужен
с помощью telethon я смог подобное делать
Вопрос: Получаю пользователя через AJAX в Laravel. Как мне отобразить его аватарку?

Лучший ответ:
Формировать полный путь на аватар на бекенде, а затем просто подставлять путь.eloquent serializationnamespace App;

use Illuminate\Database\Eloquent\Model;

class User extends Model
{
    /**
     * The accessors to append to the model's array form.
     *
     * @var array
     */
    protected $appends = ['avatar_url'];
   
    public function getAvatarUrlAttribute()
    {
        return \Storage::url( $this->avatar );
    }
}

Худший ответ:
Да просто пропиши путь, каким он в браузере отображается да и всё, например: '/public/storage/avatars/' +user.avatar
Вопрос: Как устанавливать сертификаты на принтеры и телефоны?

Лучший ответ:
А телефоны умеют брать конфигурацию с pxe сервера? 
У нас, например,  циски, они все засасывают из сети при включении, с yealink не работал, только брать доки и читать-читать.

Худший ответ:
Ну тогда сразу вопрос - а откуда телефон может взять сертификат автоматом? И принтер?
Вопрос: Сервер с каким каналом нужно брать для сайта с пиком 3000 запросами в секунду?

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

Худший ответ:
Тупо умножить не?
Вопрос: Влияет ли доменная зона на индексирование сайта?

Лучший ответ:
Не влияет.
Убедитесь, что домен верифицирован и соответствует тематике зоны.

Худший ответ:
без разницы
Вопрос: Возьмут ли работать на должность data science/ML, если есть знания, но нет диплома?

Лучший ответ:
Если есть знания то берут в любом случае. Другое дело что иметь и думать что имеешь - разные вещи. Надо проверять

Худший ответ:
на ВО обращают внимание исключительно конторы, где это мастхэв (типа государственных) и очень костные. 
остальным на твоё образование насрать (сори): они прост решают будешь ты им полезен или нет.

твоя задача - себя продать. остальное - не твоя забота. 
а требования в вакансиях - так себе требования. обычно на них забивают.
Вопрос: Почему элементы input игнорируют контейнер родителя?

Лучший ответ:
*,
*::before,
*::after {
  box-sizing:border-box;
}
Поставьте и все заработает. Так происходит потому что вы указали ширину в 100% для input, но стандартный border-box у браузеров стоит content-box, который не учитывает padding и border в размер ширины

Худший ответ:
Стандартная разметка в HTML/CSS идет как бы по стандарту(хорошо сказал), вообще кароче если давать padding блокам то он будет идти как-бы в увеличении блока, а если писать box-sizing: border-box; то это значит что эти padding'и будут идти внутрь - если кратко. Почему и как почитайте в гугле.form *{
    box-sizing: border-box;
}
Вопрос: Как экспортировать базу JSON в MYSQL?

Лучший ответ:
По опыту для таких объёмов самый быстрый вариант будет импорт данных из CSV-файла
dev.mysql.com/doc/refman/5.0/en/load-data.html

Примерный синтаксис SQL-запроса. Меняете под себя.
LOAD DATA LOCAL INFILE '{$csv_file}'
INTO TABLE `{$table_tmp}`
FIELDS TERMINATED BY ','
ENCLOSED BY '\"'
LINES TERMINATED BY '\\n'
IGNORE 1 ROWS;

Вам нужно лишь написать скрипт который преобразовывает json документ в csv файл
И затем импортите этот CSV через запрос приведённый выше.
Порядок колонок в csv-файле должен соответствовать порядку колонок в таблице в БД.

Худший ответ:
1. не экспорт, а импорт
2. гуглите (яндексите) import json to mysql (есть море информации)
3. если импортировать записи как в примере в простую таблицу в новую БД, то проще и быстрее как уже говорили выше - загружать напрямую в базу из CSV файла, а json конвертнуть в CSV при помощи sed например (одной строчкой)
Вопрос: Как ускорить сайт на WordPress (Elementor) по версии GPSI?

Лучший ответ:
Для ускорения сайта на элементор лучше всего не использовать элементор.

Худший ответ:
Я поставил плагин WP Rocket - стало лучше, скорость страниц по google улучшилась с 40 до 65
Вопрос: Как перебороть не работающий пуск и функцию поиска в windows 10?

Лучший ответ:
Была такая проблема с пуском, после крупного обновления (1803 или 1903 не помню), тоже ничего не помогало, плюнул и переустановил винду на свежую.
Повторялось на нескольких пк.

Худший ответ:
Были похожие проблемы, решалось или прошивкой БИОСа, или накатываем более свежей версии 10-ки (но не везде помогло)
Вопрос: Как сделать такое с помощью радионопок?

Лучший ответ:
https://codepen.io/angryyum/pen/RwNprJP Как-то так если правильно понял идею

Худший ответ:
Можно радио, текст с рамками в label for, оформление зависит от выделенного radio. Все в css оформляется. Внутри лейблов скрытый див для тултипа, реакция на ховер. Все довольно просто.
Сами радио инпуты сделать прозрачными, позиционировать абсолютно, уменьшить до 1px. Дальше простая верстка. На обертку строки дисплей флекс, на лейблы позишн релатив.
Извиняюсь, с телефона пишу ))
Вопрос: Свои проекты/воображение/проекты по совету старших коллег VS Codewars/Hackerrank/Leetcode?

Лучший ответ:
Github.com

Какой смысл в программировании, если оно не решает прикладных проблем?

Худший ответ:
1. Да
2. Да
и все остальное да
нет никакого или или, все нужно делать
Вопрос: Найти точки окружности?

Лучший ответ:
Школьный курс тригонометрии:
Вся окружность - 2*PI радиан. Один сектор, который вам нужен - k = 2*PI / 27

Дальше в цикле k * i (счётчик цикла) - переводите в координаты с нулём в центре окружности (Да, тут надо будет воспользоваться синусами/косинусами)

Затем эти координаты переводите в экранные. Всё. Думаю дальше сами разберётесь.

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

Лучший ответ:
не нужны тут циклы от слова вообще - достаточно https://www.php.net/manual/ru/function.preg-replac...

если сами не раздуплитесь, пинганите меня завтра.

Худший ответ:
У вас есть проблема. Вы решили использовать регулярные выражения чтобы её решить. Теперь у вас две проблемы.

$data = array_combine(
    array_map(function($key) { return '{' . $key . '}'; }, array_keys($data)), //Дописываем к ключам фигурные скобки
    array_values($data)
);

echo strtr($string, $data);
Вопрос: Что не так с монитором Samsung?

Лучший ответ:
Сели лампы подсветки монитора или дроссель накрылся. Меняется на раз-два в любом сервис-центре.

Худший ответ:
Что интересно , постоял 1-2  часа и стало норм. Разогрелся))
Вопрос: Как называется такой дизайн? Как научиться правильно верстать такие макеты?

Лучший ответ:
Называется инструмент Timeline. Ниже примеры того как можно делать на Bootstrap:

snippet

Развлекайтесь.

Худший ответ:
если задача сверстать 1:1
0. этот скрин кидаете бэкграундом (размер точно в пикселях) на body, выравниваете его как вам надо по краям
1. Вытаскиваете из рисунка все тексты (заголовки и блоки) и верстаете страницу дивами, вкладывая в них H2(numbers), H3(titles) и P(параграфы) == размерами шрифта и отступами регулируйте максимальное совпадение (перекрытие) бакгроунда вашими блоками с текстом(заливка у блоков прозрачная, чтобы видеть нижний скрин). 
2. Отделяете на скрине графику от текстов, тексты удаляете (в фотошопе например), и кладёте получившееся также бэкграундом вместо первоначального скрина
3. передайте текстам цвета
Готово

если стоит задача адаптивности, то бэкграунд нарезайте на части, (целыми кусками, не перерезая линии) и кидайте их бэкграундами в дивы

лучше освоить любую векторную прогу и переводить растровые рисунки в вектор, далее в SVG, с ним вам будет удобнее работать
Вопрос: Какое оборудование Mikrotik выбрать?

Лучший ответ:
1. VLAN - это логическое разделение сетей. Например что бы ПК2 не видел NAS или как вариант, для гостевой сети. Дали пароль гостям от сети, но у них доступа к каким либо ресурсам отсутствует. Для дома, это совершенно не нужно и сложно.
2. Стоимость бухты кабеля с накладными розетками и монтажом будет дешевле, чем куча оборудования
3. Помимо подключаемого оборудования необходимо определиться с задачами, которое это оборудование решает.

Собственно, вот вопросы:
1. Площадь квартиры
2. Если роутер положить... например в шкаф, в прихожей, сколько монолитных стен будет до самой дальней точки, где планируется использование wi-fi
3. Что из себя представляет NAS, и для чего он используется? Просто файлопомойка? Будет ли на нем 4к контент, для воспроизведения на ТВ. Будут ли 4к смотреть одновременно на двух ТВ? Используется ли он в работе, как спрашивали выше? Например для рендера видео. Какие диски в нем стоят.

Худший ответ:
Берете 8 портовый роутер микр с вифи и втыкаетп все в него. Зачем городить огород из свитчей?

Там где надо дублировать вифи - ставите микр 951 серии
Вопрос: Программа Win 10 Tweaker это вирус?

Лучший ответ:
Нет конечно.
Обычная вредоносная программа. 
Откуда у вируса возьмется графический интерфейс?

Вирус это программа которая "размножается" - создает множество своих копий.

Если нет, то стоит ли её использовать?Если вы хотите вывести из строя ОС - вполне стоит.

Худший ответ:
Не вирус, но в кривых руках может вполне стать вредоносной и испортить работоспособность винды. Антивирусы её подозревают вероятнее всего по той причине, что может в рееестре параметры винды менять, что некоторые трояны делают, дабы снизить безопасность ОС.

UPD: Начиная с определённой версии, программа тайно загружает с официального сайта сторонний код и исполняет его под наивысшими привилегиями. Были случаи распространения вредоносного кода через этот инструмент, исходя из этого можно сделать вывод, что программа больше вредоносная, чем полезная, использовать её крайне опасно.  Ничем от классического Trojan.Downloader особо не отличается, ну и в довесок имеет "полезную" функцию - возможность убить ОС, притом предлагает пользователю на выбор множество способов убийства.
Вопрос: Выйдет ли такой сайт в поисковую выдачу или уйдет в бан как дубликат основного?

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

Общие нюансы:

определитесь с количеством подоменов (например, города-миллионники);
условия подмены контента (мета-теги, заголовки, ALT, текст), чтобы не плодить дубли;
поименование поддоменов на основе анализа конкурентов в выдаче, например, чтобы не использовать в имени поддоменов полное название городов без необходимости.


Далее:

Создаем поддомены и делаем их алиасами основного домена. На данном этапе информация на всех доменах ничем не отличается, сайты являются полными копиями.
Выполнить склейку каждого поддомена с его www-версией с помощью 301 редиректа. Настоятельно рекомендуется использовать для поддоменов версию без www, чтобы избежать проблемы с SSL-сертификатом
Чтобы избежать склейки поддоменов, максимально быстро после выполнения предыдущего пункта необходимо закрыть их от индексации, прописав в robots.txt: User-agent: * Disallow: /
На всех поддоменах в title,  meta-description,  meta-keywords, Н1 необходимо заменить упоминание города на переменную, которая в зависимости от поддомена будет заменяться на название города. Подмену делаем на всех страницах и разделах/подразделах (мета-теги и Н1 карточек товаров не трогать). При необходимости нужно создать несколько переменных с городами в разных падежах. На страницах, где в title и meta-description топоним не используется, рекомендуется сформировать дописку с указанием текущего города в зависимости от поддомена.


Не упустите технические нюансы:

приобрести SSL-сертификат типа Wildcard для домена и поддоменов.


Справка Яндекса

«Региональность»: https://yandex.ru/support/webmaster/site-geography...
«Оформление поддоменов»: https://yandex.ru/support/webmaster/site-geography...
«Индексирование поддоменов»: https://yandex.ru/support/webmaster/yandex-indexin...


Худший ответ:
Структуру и верстку сайта поисковики не учитывают
Вопрос: Как сложить несколько чисел из переменных в php и вывести результат в виде переменной?

Лучший ответ:
Минимум, это сделать однотипные переменные массивом.

Худший ответ:
Можно занести все эти переменные в массив. И вычислить сумму и занести в переменную
Вопрос: Как сделать элементы меню как на макете?

Лучший ответ:
Добрый день! 
Вот такой  вариант подойдет?

Худший ответ:
Добрый день! 
Вот такой  вариант подойдет?