• Существует ли нативный способ разделения чисел на разряды?

    REZ1DENT3
    @REZ1DENT3
    web-developer
    https://developer.mozilla.org/en-US/docs/Web/JavaS...
    // Demonstrate selected international locales
    var locales = [
      undefined,  // Your own browser
      'en-US',    // United States
      'de-DE',    // Germany
      'ru-RU',    // Russia
      'hi-IN',    // India
      'de-CH',    // Switzerland
    ];
    var n = 100000;
    var opts = { minimumFractionDigits: 2 };
    for (var i = 0; i < locales.length; i++) {
      console.log(locales[i], n.toLocaleString(locales[i], opts));
    }


    результат
    undefined '100 000,00'
    en-US 100,000.00
    de-DE 100.000,00
    ru-RU 100 000,00
    hi-IN 1,00,000.00
    de-CH 100’000.00
    Ответ написан
    Комментировать
  • Существует ли нативный способ разделения чисел на разряды?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Intl.NumberFormat

    const number = 123456.789;
    
    new Intl.NumberFormat('ru-RU').format(number);
    // "123 456,789"
    по умолчанию { style: 'decimal' }

    Но..
    new Intl.NumberFormat('ru-RU', { minimumFractionDigits: 6 })
      .format(123456.789012345);
    // "123 456,789012" - после запятой не разделяет
    Ответ написан
    Комментировать
  • Как сделать так, чтобы время автоматически обновлялось без обновления страницы?

    @dGololobov
    начинающий
    correct_date = `${hour}:${min}`;
    // correct_date = `${hour}:${min}:${sec}`;
    
    const getTimeString = () => {
        const subbed = new Date();
        const hour = subbed.getHours().toString().padStart(2, '0');
        cosnt min = subbed.getMinutes().toString().padStart(2, '0');
        const sec = subbed.getSeconds().toString().padStart(2, '0');
    
        return  `${hour}:${min}:${sec}`;
    }
    
    let clock = document.getElementById('clock')
    setInterval(() => {
        clock.innerHTML = getTimeString();
    }, 1000);
    Ответ написан
    Комментировать
  • Как растянуть блок с картинкой при помощи css grid?

    Ankhena
    @Ankhena Куратор тега CSS
    Нежно люблю верстку
    Прям так и писать, если нечетный и последний, то..
    &:nth-child(2n-1):last-child {
        grid-column: span 2
      }
    Ответ написан
    1 комментарий
  • Как в зависимости от ширины экрана заменить html код страницы?

    mizutsune
    @mizutsune
    Frontend Developer
    Если по каким-то причинам недостаточно медиа запросов из CSS, тогда можно воспользоваться методом matchMedia.

    Простой пример использования:

    const targetElement = document.querySelector(".target");
    const breakpoint = window.matchMedia("(max-width: 700px)");
    
    const breakpointChecker = () => {
         if (breakpoint.matches) {
              targetElement.textContent = "Apple";
         } else {
              targetElement.textContent = "Orange";
         }
    };
    
    breakpoint.addEventListener("change", breakpointChecker);
    breakpointChecker();


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

    Вообще современный CSS уже способен решать многие задачи, связанные например с такими вот случаями, когда требуется модификация блока для отображения на декстопе/мобильнике и если раньше приходилось использовать две разные вёрстки того или иного элемента для разных разрешений экрана или добавлять javascript для решения подобных задач, то уже сейчас в большинстве случаев, такой нужды не осталось.

    И всё как бы понятно и хорошо, но всё же есть такие моменты когда использование JS при работе с медиа запросами - оправданно и matchMedia отлично справляется с поставленными задачами, например когда нужно включить/отключить какой-нибудь плагин или произвести какие-нибудь действия, которые невозможно выполнить используя один только CSS.

    Как альтернативу matchMedia, конечно можно использовать событие resize, но в таком случае придётся оптимизировать функцию используемую в обработчике, так как resize имеет свои подводные камни.
    Ответ написан
    Комментировать
  • Как оптимизировать js код переключения контента?

    @kanifas
    Можно скрипт к такому виду привести

    const platformButtons = document.querySelectorAll(".changer__platform");
    const activeTargetClass = "platform__description_active";
    
    platformButtons.forEach(tab => tab.addEventListener("click", () => {
        const target = document.querySelector(`#${tab.id}_desc`);
        const currentTarget = document.querySelector(`.${activeTargetClass}`);
        currentTarget && currentTarget.classList.remove(activeTargetClass);
        target && target.classList.add(activeTargetClass);
    }));


    Или короче для современных браузеров
    const platformButtons = document.querySelectorAll(".changer__platform");
    const activeTargetClass = "platform__description_active";
    
    platformButtons.forEach(tab => tab.addEventListener("click", () => {
        document.querySelector(`.${activeTargetClass}`)?.classList.remove(activeTargetClass);
        document.querySelector(`#${tab.id}_desc`)?.classList.add(activeTargetClass);
    }));
    Ответ написан
    Комментировать
  • Как реализовать данную часть верстки?

    RAX7
    @RAX7
    Ответ написан
    Комментировать
  • Как наверстать такую сетку?

    RAX7
    @RAX7
    Если количество дочерних элементов сетки всегда известно, то можно построить такую ломаную сетку на гридах, добавив в неё вспомогательные колонки/строки и прописав каждому элементу его расположение в сетке.
    Ответ написан
    1 комментарий
  • Как плавно увеличить скорость анимации?

    RAX7
    @RAX7
    Свойство animation-duration неанимируемое. И да, придется писать костыль на js
    Ответ написан
    2 комментария
  • Как сделать аватарки разных форм через css?

    RAX7
    @RAX7
    Ответ написан
    Комментировать
  • Как сделать скругление уголков по кривой Безье?

    RAX7
    @RAX7
    При сплошном фоновом цвете хорошо работает border-image

    При более сложных случаях - фон можно засунуть в SVG и там уже сделать маску, например как в этом примере.
    Ответ написан
    1 комментарий
  • Какие lazy load-плагины для изображений лучше?

    @SergeiB
    После появления Intersection Observer API надобность в плагинах отпала. Всё решается парой десятков строчек кода.
    Пример.

    const options = {
      root: null,
      rootMargin: '0px',
      threshold: 0.05
    };
    
    const lazyload = function(entries, observer) {
      entries.forEach(function(entry) {
        const target = entry.target;
        const dataset = target.dataset;
    
        if (entry.isIntersecting) {
          try {
            if ('src' in dataset) {
              target.src = dataset.src;
            }
    
            if ('bg' in dataset) {
              target.style.backgroundImage = `url(${dataset.bg})`;
            }
    
            target.classList.add('lazyloaded');
            observer.unobserve(target);
          } catch (error) {
            console.error(error);
          }
        }
      });
    };
    
    const observer = new IntersectionObserver(lazyload, options);
    
    document.querySelectorAll('.js-lazyload').forEach(elem => observer.observe(elem));

    <!-- Изображение без плейсхолдера -->
    <img class="js-lazyload" data-src="path/to/image/elephant.jpg" alt="The pink elephant">
    
    <!-- Изображение с плейсхолдером -->
    <img class="js-lazyload" data-src="path/to/image/elephant.jpg" src="path/to/placeholder.jpg" alt="The pink elephant">
    
    <!-- Ситуация, когда изображение надо задать как фон -->
    <div class="js-lazyload" data-bg="path/to/image/elephant.jpg"></div>

    Ответ написан
    3 комментария
  • Как определиться с зависимостями лендинга?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Смешались в кучу кони, люди, GSAP, React, Three.js... Стоит немного систематизировать инструменты хотя бы по задачам, которые они решают. Не привязываясь к конкретным фреймворкам из большой троицы, у нас есть несколько классов инструментов в теме креативных сайтов:

    • Про готовые CSS-анимации - animate.css, Wow.js, и.т.д. Там много динозавров из времен jQuery. Такие штуки часто бывают не в тему дизайна, но стоит посмотреть и забыть. Хотя для сайтов в духе дизайнерской дичи, вроде той, что успешно делают в студии Артемия Лебедева - может быть и ок.
    • Про интерполяцию всего и вся. Тут обычно выбирают между GSAP и Anime.js. Первый вариант - более замороченный, есть полезные плагины, второй - попроще, но тоже хорош, в некоторых кругах даже более популярен. Для совсем простых задач - можно свой инструмент написать.
    • Про скролл, в основном в контексте CSS-анимаций. Тут Locomotive Scroll рулит.
    • Про переходы между экранами. Грубо говоря прокаченный роутер. Самый популярный - Barba.js. Раньше еще был Highway.js, но в последне время что-то про него мало говорят.
    • Про экспорт готовых анимаций из софта для анимаций. Тут нужно отталкиваться от софта. Обычно вопрос возникает в контексте AE и простых мультиков - тут Lottie, говорят, неплох. Но нужно дизайнера заранее консультировать по теме, чтобы лишнего не намалевал.
    • Про визуализацию данных. Тут полезно знать про d3.js, в основном ради готовых примеров.
    • Про трехмерный WebGL, чтобы не писать все руками. Самый популярный вариант - Three.js, в основном за счет экосистемы и горы готовых решений, но есть и альтернативы на любой кус и цвет. Для 2D -эффектов вообще ничего не нужно в большинстве случаев.
    • Плюс не стоит забывать про всякие вспомогательные штуки вроде WebFontLoader, Hammer.js, LeaderLine, и.т.д. К анимациям они не относятся, но в работе могут быть полезны, чтобы не писать все самому.


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

    А вообще угадать весь стек на много проектов вперед с первого раза, не имея ни малейшего представления о том, что там будет нужно, а что нет, скорее всего все равно не получится, так что может быть стоит попробовать разное в разных проектах (тем более речь идет про некоммерческие проекты, можно себе позволить), и посмотреть на то, какие вообще варианты бывают в разных классах задач, и что они помогают делать, а что - нет.
    Ответ написан
    1 комментарий
  • Как задать блоку который находится в контейнере ширину на весь экран?

    Вот так - codepen.io/AXP/pen/WpqrjG

    .full {
        width: 100vw;
        position: relative;
        margin-left: -50vw;
        left: 50%;
        margin-bottom: 30px;
    }

    При этом адаптивность сохранится

    Актуально для всего кроме IE > 9 тут смотреть
    Ответ написан
    2 комментария
  • Как убрать повторяющиеся слэши в .htaccess?

    @ShamblerR
    Дааю сразу все поскольку в свое время задолбало для каждого проекта делать все заново, по этому сейчас просто вставляю кусок и все.
    ############################################################################
    #### Cтандартный .htaccess для проектов студии Клондайк, версия 2.3     ####
    ############################################################################
    RewriteEngine On
       #  Директива включает редиректы.
    RewriteBase / 
       # Без директивы (.*) = /$1 будет /var/wwww/site/web/$1  с директивой  = /$1
    Options +FollowSymLinks
       # Разрешает переход по символическим ссылкам.
    
    ############################################################################
    #### Перенаправляем протокол https на http                              ####
    ############################################################################
    RewriteCond %{HTTPS} on
       # Проверяем наличие https в URL.
    RewriteRule ^.*$ http://%{SERVER_NAME}%{REQUEST_URI}
       # Перенаправляем протокол на http.
    
    ############################################################################
    #### Выбор основного зеркала (или с www или без www)                    ####
    ############################################################################
       # 1. Редирект с www на без www. (раскоментировать директивы пункта 1)
    #RewriteCond %{HTTP_HOST} ^www\.(.*) [NC]
       # Проверяем, содержит ли домен www (в начале URL).
    #RewriteRule ^(.*)$ http://%1/$1 [R=301,L]
       # Перенаправляем URL на домен без www.
    ####
       # 2. Редирект без www на www. (раскоментировать директивы пункта 2)
    #RewriteCond %{HTTP_HOST} !^www\.(.*) [NC]
       # Проверяем, не содержит ли домен www (в начале URL).
    #RewriteRule ^(.*)$ http://www.%{HTTP_HOST}/$1 [R=301,L]
       # Перенаправляем URL на домен c www.
    
    ############################################################################
    #### Убираем повторяющиеся слеши (/) в URL                              ####
    ############################################################################
    RewriteCond %{REQUEST_URI} ^(.*)/{2,}(.*)$
       # Проверяем, повторяется ли слеш (//) более двух раз.
    RewriteRule . %1/%2 [R=301,L]
       # Исключаем все лишние слеши.
    
    ############################################################################
    #### Убираем слеши в конце URL для статических файлов (содержит точку)  ####
    ############################################################################
    RewriteCond %{REQUEST_URI} \..+$  
       # Если файл содержит точку.
    RewriteCond %{REQUEST_FILENAME} !-d   
       # И это не директория.
    RewriteCond %{REQUEST_FILENAME} -f
       # Является файлом.
    RewriteCond %{REQUEST_URI} ^(.+)/$      
       # И в конце URL есть слеш.
    RewriteRule ^(.+)/$ /$1 [R=301,L]     
       # Исключить слеш.
    
    ############################################################################
    #### Добавляем слеш(/), если его нет, и это не файл.                    ####
    ############################################################################
    RewriteCond %{REQUEST_URI} !(.*)/$
       # Если слеша в конце нет.
    RewriteCond %{REQUEST_FILENAME} !-f
       # Не является файлом.
    RewriteCond %{REQUEST_URI} !\..+$
       # В URL нет точки (файл).
    RewriteRule ^(.*)$ $1/ [L,R=301]
       # Добавляем слеш в конце.
    
    ############################################################################
    #### Убираем index.php, если он есть в конце URL                        ####
    ############################################################################
    RewriteCond %{REQUEST_METHOD} =GET
       # Выявляем GET запрос в URL (не POST).
    RewriteCond %{REQUEST_URI} ^(.*)/index\.php$
       # URL cодержит index.php в конце.
    RewriteRule ^(.*)$ %1/ [R=301,L]
       # Удалить index.php из URL.
    
    ############################################################################
    #### Конец общей части, далее следует собственные директивы .htaccess   ####
    ############################################################################
    Ответ написан
    5 комментариев
  • Как сверстать такие элементы (текст, через буквы которого видна картинка; кнопка, внутри неё стрелка, которая выходит за границу кнопки)?

    kosolapus
    @kosolapus
    Если помогло - отмечайте решением
    svg + css + html
    1. ::first-letter
    2. https://codepen.io/phpcodertech/pen/ZEQYBgQ
    3. ::afer
    4. https://css-tricks.com/snippets/svg/curved-text-al...
    5. ::after, ::before и иже с ними

    Вообще, вариантов реализации каждого вопроса более 1. Рекомендую как всегда курить спецификации - mdn хотя бы. Ответы взял не из головы, а из гугла - если там не забанили, можно посмотреть)
    Ответ написан
    Комментировать
  • Где в Chrome, нужно смотреть JS-события, применённые к элементу во время какого-либо действия с этим элементом?

    @alexalexes
    F12. Раздел "Элементы", выбираете элемент, на котором нужно посмотреть обработчик события. В области интерфейса для просмотра свойств элемента выбираете вкладку "Прослушиватели событий". Выбираете вид события, и выбираете точку входа в JS коде на это событие. Далее, при просмотре кода JS на вкладке "Источники" выбираете, где вам поставить точки останова, чтобы словить остановку выполнения обработки события.
    PS: Такой метод исследования работает только на ванильном или слабо прототипированном коде, написанный без применения библиотек и фреймворков. При использовании библиотек и фреймворков точки привязки событий будут указывать, как правило, на одну единственную функцию в этой библиотеке, отвечающей за высокоуровневый байндинг событий. В этом случае нужно изучать, какие инструменты для отладки есть в самой библиотеке или фреймворке.
    Ответ написан
    Комментировать