• Как перевести числовую дату в другой вид?

    0xD34F
    @0xD34F Куратор тега JavaScript
    new Date(str.split(' ')[0].split('.').reverse().join('-')).toLocaleString('ru-RU', {
      month: 'long',
      day: 'numeric',
    })
    Ответ написан
  • Как решить проблему с focus()?

    monochromer
    @monochromer
    <a href="#subscribe">enter your email</a>
    <input id="subscribe" type="text">

    html {
      scroll-behavior: smooth;
    }

    Ответ написан
  • Как добавить класс в зависимости от количества блоков?

    0xD34F
    @0xD34F Куратор тега JavaScript
    document.querySelectorAll('.row').forEach(n => n.classList.add(`row-${n.children.length}`))

    Это если добавляемый класс всегда содержит количество дочерних элементов, как вы показали. Если же добавлять класс надо не всегда и имя может быть произвольным, тогда можно сделать объект, где ключами будут количества дочерних элементов, а значениями - соответствующие классы:

    const classes = {
      3: 'row-3',
      5: 'row-5',
      7: 'row-xxx',
    };
    
    document.querySelectorAll('.row').forEach(n => {
      const className = classes[n.children.length];
      if (className) {
        n.classList.add(className);
      }
    });
    Ответ написан
  • Как реализовать меню из 5 кнопок и 1 из которых всегда активна (её размер чуть больше и изменён цвет)?

    sniggering_deus
    @sniggering_deus Куратор тега CSS
    Dance Gavin Dance - Prisoner
    HTML:

    <div class="cont">
    <button class="button"></button>
    <button class="button"></button>
    <button class="button"></button>
    <button class="button"></button>
    <button class="button"></button>
    </div>


    CSS:

    .active {
    // стили для активного класса
     }


    JavaScript:

    const mainlist = document.querySelector(".cont");
    const activeClass = "active";
    mainlist.addEventListener("click", function (event) {
      const element = event.target.closest(".button");
      if (!element) return;
      const activeElement = element.parentElement.querySelector(".active");
      activeElement && activeElement.classList.remove(activeClass);
      element === activeElement || element.classList.add(activeClass);
    });
    Ответ написан
  • Как запускать событие только во время открытия меню?

    FinGanapre
    @FinGanapre
    https://developer.mozilla.org/en-US/docs/Web/API/M...

    Небольшой пример:

    <div class="class1 class2">some elem</div>
    <button class="btn">toggle</button>


    window.onload = e => {
      // получаем элементы
      const $div = document.querySelector('.class1')
      const $btn = document.querySelector('.btn')
      
      // функция, переключающая класс ( нужна для демонстрации )
      const toggle = e => $div.classList.toggle('class2')
      
      // функция, которая будет выполняться при изменении атрибутов у $div
      const obsCallback = ( ml, ob ) => {
        // за место вывода в консоль после проверки на существование класса подставляем нужные функции
        ml[0].target.classList.contains('class2') ? console.log(true) : console.log(false)
      }
      
      // создание обсервера и передача нашей функции
      const observer = new MutationObserver(obsCallback)
      
      // опции (за чем будем следить)
      const observerOptions = {
        childList: false,
        attributes: true,
        subtree: false
      }
      
      // начинаем наблюдать
      observer.observe($div, observerOptions)
      
      // просто повесил событие на кнопку чтобы менять класс у $div
      $btn.addEventListener('click', toggle)
    }
    Ответ написан
  • Что обозначают эти символы?

    ReaverJS
    @ReaverJS
    Это синтаксис SASS - расширения CSS.

    $var - переменная.
    .class1 {
    &.class2 {}
    }
    то же самое что
    .class.class2
    Ответ написан
  • Как сделать по БЭМ?

    Underdoggit
    @Underdoggit
    <section class="portfolio-section">
      <div class="container">
        <h2 class="portfolio-title">Портфолио</h2>
        <div class="portfolio-items">
          <div class="portfolio-items__item">
            <a href="/" class="portfolio-items__link">
              <img class="portfolio-items__image" src="/" alt="">
            </a>
          </div>
        </div>
      </div>
    </section>

    Секцию в БЭМ блок вы не включаете, называете её как угодно по смыслу. БЭМ Блоком у вас будет portfolio__items, который включает в себя сколько угодно item.
    Ответ написан
  • Как сделать по БЭМ?

    potapchino
    @potapchino
    на самом деле тут нет однозначно верного решения. их множество и все они могут быть правильными. для начала нужно посмотреть на этот кусок интрфейса и определиться, что тут может быть блоками. все зависит от степени переиспользуемости которая вам нужна. можно все одним блоком сделать или например выделить 4 блока:

    контейнер
    <div class="container"></div>

    тайтл
    <div class="title"></div>

    превью работы
    <div class="project-preview">
        <div class="project-preview__image"></div>
      </div>


    сама секция портфолио
    <div class="portfolio-section">
        <div class="portfolio-section__inner">
          <div class="portfolio-section__title"></div>
          <div class="portfolio-section__grid">
            <div class="portfolio-section__preview"></div>
            <div class="portfolio-section__preview"></div>
            <div class="portfolio-section__preview"></div>
            ...
          </div>
        </div>
      </div>


    далее все это соединям вместе миксуя блоки на одной dom-ноде
    <div class="portfolio-section">
        <div class="portfolio-section__inner container">
          <div class="portfolio-section__title title">Портфолио</div>
          <div class="portfolio-section__grid">
            <div class="portfolio-section__preview project-preview">
              <div class="project-preview__image"></div>
            </div>
            <div class="portfolio-section__preview project-preview">
              <div class="project-preview__image"></div>
            </div>
            <div class="portfolio-section__preview project-preview">
              <div class="project-preview__image"></div>
            </div>
            <div class="portfolio-section__preview project-preview">
              <div class="project-preview__image"></div>
            </div>
          </div>
        </div>
      </div>
    Ответ написан
  • Как сделать по БЭМ?

    Get-Web
    @Get-Web Куратор тега HTML
    Front-End Developer
    Если отличия стилистические, то есть, можно предположить что в любом месте можно использовать один из двух вариантов, то лучше делать через модификатор с ключем и его значением. Например:
    socials_theme_ligth
    socials_theme_dark

    где theme это ключ, а ligth и dark его значения, которые не могут быть использованы одновременно на одном блоке.
    Для остальных изменений, которые необходимо внести только в footer мы применяем микс. К примеру нам нужна светлая тема, но в футере необходимо добавить отступ сверху или еще какие-то изменения в данном контексте. Выглядеть это может вот так:

    <ul class="footer__socials  socials socials_theme_ligth">
    ...
    </ul>

    .socials {
      color: #000;
    }
    .socials_theme_ligth {
      color: #fff;
    }
    .footer__socials  {
      margin-top: 100px
    }
    Ответ написан
  • Как создать html сниппеты в vs code (готовый bootstrap шаблон)?

    ivirolet
    @ivirolet
    Учусь делать сайты. Только учусь.
    Кавычки в начале строки совсем ставятся, перед структурными табами (пробелами) и получается, что они на одной линии.

    "header": {
    		"prefix": "p1",
    		"body": [
    			"<header class=\"page-header\">",
    			"    <div class=\"page-header__logo page-logo\">",
    			"        <img src=\"/img/$1\" alt=\"$2\" width=\"$3\" height=\"$4\">",
    			"    </div> <!--page-header__logo-->",
    			"    <nav class=\"page-nav page-header__nav\">",
    			"        <button class=\"page-nav__toggle\" type=\"button\">",
    			"			<span class=\"visually-hidden\">${5: Открыть меню}</span>",
    			"        </button>",
    			"    <ul class=\"page-nav__list\">",
    			"        <li class=\"page-nav__item\"><a class=\"page-nav__link ${6: page-nav__link--active}\" href=\"${7: index.html}\">${8: Главная}</a></li>",
    			"        <li class=\"page-nav__item\"><a class=\"page-nav__link\" href=\"${9: catalog.html}\">${10: Каталог}</a></li>",
    			"        <li class=\"page-nav__item\"><a class=\"page-nav__link\" href=\"${11: galery.html}\">${12: Галерея}</a></li>",
    			"        <li class=\"page-nav__item\"><a class=\"page-nav__link\" href=\"${13: about.html}\">${14: О нас}</a></li>",
    			"    </ul> <!--page-nav-->",
    			"    </nav> <!--page-nav__list-->",
    			"    <div class=\"page-header__cover\">",
    			"         <h1 class=\"page-title page-header__title\">$15</h1>",
    			"         <a class=\"page-header__action\" href=\"$17\">${16: Скачать}</a>",
    			"    </div> <!--page-header__cover-->$18",
    			"</header>$0"
    		],
    		"description": "header+nav+cover"
    	 }
    Ответ написан
  • Почему не работает WOW.js в Webpack?

    В package.json меняем wowjs на wow.js — это разные пакеты! Первый не собран как UMD-модуль. Затем в исходном коде прописываем импорт
    import WOW from 'wow.js';
    Ответ написан
  • Почему так сильно подорожали аккаунты pro на российских биржах фриланса? С чем это связано?

    tin-iven
    @tin-iven
    Фрилансер до костей
    d4b3d05717394f538a0470236a5d53f8.png

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

    А теперь конкретно по FL. Как это работает - есть акционеры (Мажирин и аптекари) и руководство (Росошанский и Тараханов). Раз в полгода акционеры собираются и говорят руководству - уровень прибыльности должен быть такой. Аптекари покупали долю в у.е. и получать хотят у.е. Мажирину тоже у.е. нужны - хотя бы на танцы свои. Итак, в начале 2013 прибыль была 200 000 у.е. в месяц, а в начале 2015 стала 75 000 у.е. Акционеры говорят руководству - нужно вернуть хотя бы до 150 000 у.е.

    Как это сделать - проблема не акционеров, а руководства. И руководство начинает действовать - вводит Profi, поднимает цену Pro, добавляет закрепления и прочие мелкие платности, увольняет кучу людей штата - почти 90%! www.the-village.ru/village/blogs/business/221897-c...
    Прибыль пошла в гору. "Ф-у-у-х! Акционеры не уволят, даже премию дадут" - так думает руководство. На первом этапе это так и работает.

    Но. Что имеем с итоге: сервис теряет в качестве - не хватает людей для нормального обслуживания пользователей, кода, серверов - отсюда постоянные падения, взломы и недовольство (https://vc.ru/n/fl-off, https://vc.ru/p/fl-hacked и т.д.). Сервис становится дороже (замечу - в рублях, в у.е. остается на том же уровне или дешевле) - отсюда снова недовольство пользователей.

    Блин, так почему же эта биржа не умирает? Почему все снова идут и платят (судя по анализу количество PRO за последний год не уменьшилось, а только выросло)? А я скажу - потому что есть заказы. Не просто заказы, а много заказов. Смотрим сколько - primelance.com/analytics/. Блин, да столько же, сколько на всех остальных биржах вместе взятых.

    Итог повествования: в обозримой перспективе ничего не изменится. На FL будет много заказов - к ней привыкли, она выделяет денег на рекламу больше остальных, только она обслуживает юриков. Поэтому туда будут идти фрилансеры, будут платить дорогой Pro. Этот самый Pro будет дальше дорожать - думаю, к середине 2016 на уровне 2000-2500 рублей. Если рубль продолжит плохо себя вести - еще больше, или переведут ценник в доллар.

    Скажете, на англоязычных лучше и светлее? Нет и еще раз нет. Посмотрите ценник на том же Upwork и радуйтесь, что FL до такого еще не додумалась. Одна радость - там ценник в проектах другой, отсюда и рентабельность работы на буржуев.

    Поэтому - если вы знаете или учите английский - валите по быстрому с отечественного фриланса. Если не знаете и учить не собираетесь - радуйтесь, что FL просят 1600 в месяц с неограниченным числом ответов, а не 600 за 10 ответов в месяц, и дальше по 120 рублей за каждый ответ + 10% с каждого заказа (каждого!), как это есть на Upwork.
    Ответ написан
  • Как удалить слайд через 1 секунду после нажатия на слайд в Flickity?

    fwlone
    @fwlone
    ^^
    var $carousel = $('.order_number_blocks').flickity({});
    
            $carousel.on('staticClick.flickity', function (event, pointer, cellElement, cellIndex) {
                if (cellElement) {
                    setTimeout( function() {
                      $carousel.flickity('remove', cellElement)
                    }, 1000);
                }
            });
    Ответ написан
  • Какие название используете для классов в HTML/CSS?

    GoodProject
    @GoodProject
    Верстальщик
    Лови

    Основные
    .wrapper - /*обвертка сайта*/
    .hedader - /*верхняя часть сайта*/
    .sidebar - /*сайдбар (левая или правая часть сайта)*/
    .content - /*тело сайта (центральная часть)*/
    .footer  - /*нижнаяя часть сайта*/


    Название блока (обвертка)
    .bl 
    .block 
    .box
    .wrap
    .inner
    .container
    .main


    Секции блока
    .head, .header - /*верхняя часть блока например заголовок*/
    .cnt, .content, .body - /*тело блока например текс с картинкой*/
    .footer - /*нижняя часть блока к примеру дата добавления, категория и т.д.*/


    Колонки
    .column, .col - /*колонка*/

    Списки
    .list
    .item


    Позиционные классы
    .top /* элемент сверху */
    .left /* элемент слева float:left */
    .right /* элемент справа float:right */
    .bottom /* элемент внизу */
    .center /* элемент отцвентрирован  margin:0 auto; */
    .fixed - /*фиксированный элемент postion:fixed */


    Переходы
    .next  - /*следующий*/
    .prev  - /*предыдущий*/
    .last  - /*последний*/
    .first - /*первый*/
    .back  - /*назад*/
    .ahead - /*вперед*/


    Чисельные
    .one
    .thwo
    .three
    .four
    .five


    Размеры
    .xs, .tiny   - /*очень маленький*/
    .s,  .small  - /*маленький*/
    .md, .medium - /*средний */
    .lg, .large, .big - /*большой */
    .xl, .extra-large - /*очень большой*/


    Цвета
    .danger  - /*цвет опасности*/
    .default - /*стандартный цвет*/
    .warning, .error - /*цве ошибки*/
    .success - /*цвет успеха (к примеру верно введн код подтвержления)*/
    .primary - /*основной цвет */


    Кнопки
    .button, .btn - /*кнопка*/
    .loading - /*загрузка*/
    .close - /*закрыть*/
    .open  - /*открыть*/
    .touch - /*клик*/
    .edit  - /*редактировать*/
    .more  - /*больше*/
    .remove  - /*удалить*/
    .logout  - /*выход*/
    .select  - /*выбрать*/
    .divider - /*выпадающийся список меню*/
    .caret, .arrow - /*стрелочка*/
    .up - /* Вверх */
    .down - /* Вниз */
    .delete - /* удалить */
    .reply    - /*ответить*/


    Персона
    .profile - /*профиль*/
    .person - /*человек*/
    .ava, .avatar - /*аватарка, картинка*/
    .name - /*имя*/
    .description - /*описание*/
    .address  - /*адресс*/
    .nickname - /*ник*/
    .birthday - /*дата рождения*/
    .sex - /*пол*/
    .author - /* автор */

    Заголовки
    .title - /*заголовок*/
    .short-title - /*скороченный заголовок*/
    .full-title  - /*полный заголовок*/


    Ссылки
    .link - /*ссылка*/

    Текст
    .text, .txt, .paragraph  - /*текст*/
    .info, .information - /*информация*/


    Картинки
    .image, .img - /*картинка*/
    .icon, .ic   - /*иконка*/
    .bg - /*фоновая картинки или цвет*/


    Формы
    .search, .form-search - /*поиск по сайту*/
    .input - /*текстовый элемент*/
    .form  - /*форма*/
    .form-group - /*группа элементов формы*/
    .help-block - /*текст подсказки*/
    .label - /*название элемента формы*/


    Катагории
    .type - /*тип*/
    .cat, .category - /*катигория*/
    .subcat, .subcategory - /*подкатегория*/
    .section    - /*раздел*/
    .subsection - /*подраздел*/


    Видео
    .video
    .play  - /*пуск*/
    .stop  - /*стоп*/
    .pause - /*пауза*/


    Социальные сети
    .social - /* социальные сети */
    .vk   - /*вконтакте*/
    .fb   - /*фейсбук*/
    .twit - /*твиттер*/
    .inst - /*инстаграм */


    Активные классы
    .none     - /*скрытый элемент*/
    .disabled - /*заблокированный*/
    .active, .current   - /*активный */
    .selected - /*выбраный*/
    .visible  - /*видный элемент*/
    .focus    - /*нажатый*/


    Временные классы
    .time  - /*время*/
    .date  - /*дата*/
    .day   - /*день*/
    .month - /*месяц*/
    .year  - /*год*/


    Очистка
    .clear, .clearfix, .clr - /*очистка*/

    Разделители
    .separator, .divide - /*разделитель вертикальный для слов */
    .br, .line - /*разделитель горизонтальный для блоков*/


    Остоньлые названия
    .logo    - /*лого сайта*/
    .new    - /*новинка*/
    .sale   - /*распродажа*/
    .feedback - /*обратная связь*/
    .support - /*помощь */
    .group  - /*группа*/
    .module - /*модуль*/
    .posters - /*пост*/
    .form   - /*форма*/
    .tabs   - /*вкладки*/
    .slider - /*слайдер*/
    .news   - /*новости*/
    .table  - /*таблица*/
    .full   - /*полный*/
    .breadcrumbs - /*Хлебные крошки*/
    .pagination, .pager - /*Нумерация страниц*/
    .navbar, .nav, .menu, .navigation - /*Навигация (меню)*/
    .dropdown - /*выпадающейся меню */
    .comment  - /*комментарий*/
    .subscription - /* Подписка */
    .special - /* особенный элемент */
    .standard - /* стандартный элемент */
    .screens - /* Скрины */
    .rate - /* рейтинг */
    .online - /* онлайн */
    .panel - /* панель */
    .popup - /* попап */
    .version - /* версия */
    .page - /* страница */
    .banners - /* баннер */
    .map - /* Карта */
    .more - /*еще, подробнее*/
    .tags - /* тег */
    .price - /* цена */


    Взято с этого видео.
    Ответ написан