Задать вопрос
Web_Mukhammad

Мухаммад Магомедов

frontend-разработчик
Лайки

  • Как преобразовать такой вложенный объект?

    kleinmaximus
    @kleinmaximus
    Senior Full-stack Javascript Developer
    Например, при помощи рекурсии - https://codesandbox.io/s/pensive-kapitsa-lthws?fil...
    Ответ написан
    1 комментарий
    1 комментарий

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

    Kozack
    @Kozack Куратор тега JavaScript
    Thinking about a11y
    new Date('2020-11-10T12:10:16.000000Z')
    А дальше обрабатывайте как хотите. Например
    const date = new Date('2020-11-10T12:10:16.000000Z')

console.log(new Intl.DateTimeFormat('en-US').format(date)); // 11/10/2020
console.log(new Intl.DateTimeFormat('ru-RU').format(date)); // 10.11.2020
console.log(new Intl.DateTimeFormat(navigator.language).format(date)); // Зависимо от языка пользователя

    Intl.DateTimeFormat
    Ответ написан
    1 комментарий
    1 комментарий

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

    0xD34F
    @0xD34F Куратор тега JavaScript
    Как можно получить дату из строки:

    const parseDate = str =>
  (str = str.match(/\d+/), new Date(str[2], ~-str[1], str[0]));

// или

const parseDate = str =>
  new Date(str.replace(/(\d+)\.(\d+)\.(\d+)(.+)/, '$3-$2-$1'));

// или

const parseDate = str =>
  new Date(str.split(' ', 1)[0].split('.').reverse().join('-'));

    Получаем, форматируем:

    const result = parseDate(str).toLocaleString('ru-RU', {
  month: 'long',
  day: 'numeric',
});
    Ответ написан
    1 комментарий
    1 комментарий

  • Как решить проблему с focus()?

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

    html {
  scroll-behavior: smooth;
}

    Ответ написан
    Комментировать
    Комментировать

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

    0xD34F
    @0xD34F Куратор тега JavaScript 
    document.querySelectorAll('.row').forEach(addClass);

// или

for (const n of document.getElementsByClassName('row')) {
  addClass(n);
}

    Как выглядит функция addClass? Зависит от того, что вам нужно. Есть разные варианты:

    • Если добавляемый класс всегда содержит количество дочерних элементов:

      const addClass = el => el.classList.add(`row-${el.children.length}`);

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

      const classes = {
  3: 'row-3',
  5: 'row-5',
  7: 'row-xxx',
};

function addClass(el) {
  const className = classes[el.children.length];
  if (className) {
    el.classList.add(className);
  }
}

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

      const classes = [
  { max:        3, name: 'row-0-3' },
  { max:        5, name:        '' }, // если дочерних элементов 4 или 5, класс не добавляется
  { max:        7, name: 'row-6-7' },
  { max: Infinity, name: 'row-7-x' },
];

function addClass(el) {
  const { name } = classes.find(n => n.max >= el.children.length) ?? {};
  if (name) {
    el.classList.add(name);
  }
}

    • В случае, когда классов может быть несколько, делаем массив, содержащий пары из классов и функций, принимающих количество элементов и определяющих, надо ли данные классы добавлять:

      const classes = [
  [ c => c < 5,          'row-0-4' ],
  [ c => c % 2,          'row-odd' ],
  [ c => 6 < c && c < 9, 'row-7-8' ],
];

const addClass = ({ classList, children: { length } }) =>
  classList.add(...classes.reduce((acc, n) => (
    n[0](length) && acc.push(n[1]),
    acc
  ), []));

    Ответ написан
    Комментировать
    Комментировать

  • Как запускать событие только во время открытия меню?

    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)
}
    Ответ написан
    2 комментария
    2 комментария

  • Как отправить письмо на почту?

    colonel
    @colonel
    Разработчик PHP, Laravel
    PHPMailer
    Ответ написан
    Комментировать
    Комментировать

  • Почему не работает input type="range" у аудио?

    0xD34F
    @0xD34F Куратор тега JavaScript
    $(audio_dr).attr('value',

    это делается иначе
    Ответ написан
    3 комментария
    3 комментария

  • Что обозначают эти символы?

    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.
    Ответ написан
    7 комментариев
    7 комментариев

  • Как сделать по БЭМ?

    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>
    Ответ написан
    1 комментарий
    1 комментарий

  • Как сделать по БЭМ?

    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
}
    Ответ написан
    4 комментария
    4 комментария

  • Как создать 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"
	 }
    Ответ написан
    2 комментария
    2 комментария

  • Почему так сильно подорожали аккаунты 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.
    Ответ написан
    8 комментариев
    8 комментариев

  • Как добавить текст таким образом?

  • Как удалить слайд через 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);
            }
        });
    Ответ написан
    1 комментарий
    1 комментарий

  • Как удалить слайд при нажатии на крестик в Flickity?

    romanko_vn
    @romanko_vn
    Вариант конечно так себе))), но главное что рабочий
    Ответ написан
    1 комментарий
    1 комментарий

  • Как удалить слайд при нажатии на крестик в Flickity?

  • Какие название используете для классов в HTML/CSS?

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

    Основные 
    .wrapper - /*обвертка сайта*/
.header - /*верхняя часть сайта*/
.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 - /* цена */


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