• Как изменить пути компиляции файлов?

    Mike_Ro
    @Mike_Ro Куратор тега JavaScript
    Python, JS, WordPress, SEO, Bots, Adversting
    vite.config.js:
    export default {
      build: {
        outDir: 'dist', // имя общей выходной директории
        assetsDir: 'js' // имя директории со статикой
        //assetsDir: './' // размещение статики внутри "dist"
      }
    }

    Если через WebPack (webpack.config.js):
    module.exports = {
      entry: './src/index.js',
      output: {
        path: path.resolve(__dirname, 'dist/js'),
        //path: path.resolve(__dirname, 'dist'), // размещение статики внутри "dist"
        filename: 'bundle.js'
      }
    };
    Ответ написан
    1 комментарий
  • Какой шаблонизатор посоветуете?

    Mike_Ro
    @Mike_Ro
    Python, JS, WordPress, SEO, Bots, Adversting
    В порядке убывания по фактору популярность:
    - Handlebars (мой выбор на 2023).
    - EJS.
    - nunjucks.
    Ответ написан
    Комментировать
  • Как стилизовать тег в css?

    Mike_Ro
    @Mike_Ro
    Python, JS, WordPress, SEO, Bots, Adversting
    Вы задаёте цвет текста тегу br, где нет текста...

    Необходимо обращаться к элементам, внутри которых находится контент, который собственно и хотите стилизовать, например так:
    <div class="text">
      123
      <br/>
      456
    </div>

    .text { color: red }
    Ответ написан
    4 комментария
  • Как организуется процесс написания разметки React?

    Mike_Ro
    @Mike_Ro
    Python, JS, WordPress, SEO, Bots, Adversting
    Сразу пишите в jsx

    Да.
    Как подключаете less/sass?

    Как css/sass modules.

    Структура:
    - Страница < компонент
    - Страница < компонент < компонент

    До "Страницы" желательно некий Middleware с управлением состояния и запросами на сервер.
    Ответ написан
    2 комментария
  • Почему сайт медленно грузится?

    Mike_Ro
    @Mike_Ro
    Python, JS, WordPress, SEO, Bots, Adversting
    - Сервер не молниеносно отвечает (сейчас ~500мс).
    - Вынести js скрипты из шапки в подвал.
    - Сократить количество запросов на сервер (сейчас их 53).
    - Оптимизировать и перегнать изображения в webp.

    Больше инфы: https://pagespeed.web.dev/analysis/https-icunnt-co...

    В целом, не могу сказать, что сайт долго грузиться, что на компе, что на мобиле.
    Ответ написан
    5 комментариев
  • Как сделать звёздный рейтинг в сниппете?

    Mike_Ro
    @Mike_Ro
    Python, JS, WordPress, SEO, Bots, Adversting
    Яндекс, страница товара или услуги:
    <div itemscope itemtype="http://schema.org/Product">
      <span itemprop="name">Название продукта</span>
      <span itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
        Рейтинг:
        <span itemprop="ratingValue">4.5</span> из 
        <span itemprop="bestRating">5</span>
        на основе 
        <span itemprop="ratingCount">10</span> оценок
      </span>
    </div>

    Яндекс, информационная страница:
    <article itemscope itemtype="http://schema.org/Article">
      <header>
        <h1 itemprop="headline">Заголовок статьи</h1>
        <div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
          Рейтинг:
          <span itemprop="ratingValue">4.5</span> из 
          <span itemprop="bestRating">5</span>
          на основе 
          <span itemprop="ratingCount">10</span> оценок
        </div>
      </header>
      <div itemprop="articleBody">
        <!-- Текст статьи -->
      </div>
    </article>

    Гугл, страница товара или услуги:
    <html>
      <head>
        <title>Название страницы</title>
        <script type="application/ld+json">
        {
          "@context": "http://schema.org/",
          "@type": "Product",
          "name": "Название продукта",
          "image": "https://example.com/product-image.jpg",
          "description": "Описание продукта",
          "aggregateRating": {
            "@type": "AggregateRating",
            "ratingValue": "4.5",
            "bestRating": "5",
            "ratingCount": "10"
          },
          "offers": {
            "@type": "Offer",
            "priceCurrency": "USD",
            "price": "19.99",
            "availability": "http://schema.org/InStock"
          }
        }
        </script>
      </head>
      <body>
        <!-- Содержимое страницы -->
      </body>
    </html>

    Гугл, информационная страница:
    <html>
      <head>
        <title>Название страницы</title>
        <script type="application/ld+json">
        {
          "@context": "http://schema.org",
          "@type": "CreativeWork",
          "name": "Название статьи",
          "aggregateRating": {
            "@type": "AggregateRating",
            "ratingValue": "4.5",
            "bestRating": "5",
            "ratingCount": "10"
          }
        }
        </script>
      </head>
      <body>
        <!-- Содержимое страницы -->
      </body>
    </html>
    Ответ написан
    7 комментариев
  • Как управлять загрузкой страницы?

    Mike_Ro
    @Mike_Ro Куратор тега JavaScript
    Python, JS, WordPress, SEO, Bots, Adversting
    <button id="myButton">Перейти в чат</button>

    const myButton = document.getElementById('myButton');
    myButton.addEventListener('click', function() {
      history.pushState(null, null, '?act=show&id=123');
    });

    Как выключить эту перегрузку?

    Давайте лучше перезагрузку, перегрузку мы всегда успеем организовать ;)
    Ответ написан
    1 комментарий
  • Как сделать генерацию страницы на сервере?

    Mike_Ro
    @Mike_Ro Куратор тега JavaScript
    Python, JS, WordPress, SEO, Bots, Adversting
    Если Вам нужна генерация HTML на сервере, то соответственно один из вариантов:
    - Если есть знания: SSR или SSG фреймворк, если речь идет о NodeJS, то NextJS самый популярный.
    - Если знаний совсем нет: поднимать js сервер (например: express.js) и по условию - генерировать HTML (например: использовать сборщик WebPack).
    Ответ написан
    Комментировать
  • Как заменить одну картинку на другую с помощью css?

    Mike_Ro
    @Mike_Ro
    Python, JS, WordPress, SEO, Bots, Adversting
    У картинки есть класс, но он привязан сразу к нескольким разным картинкам, а мне хотелось бы заменить только одну.

    Но сайт после перезахода меняет значения после "rev= " и получается новая ссылка и css уже не работает

    3 картинка по счету у одного родителя, у которой атрибут src начинается с https:/\/primer.ru/theme/image.php?theme=fordson&component=url:
    [src^="https:/\/primer.ru/theme/image.php?theme=fordson&component=url"]:nth-child(3) {
      content: url(http://ioioioio.png);
    }

    НО. При каждом входе сайт генерирует новую ссылку для изображения. Зачем так делать вообще?

    Загрузка изображения с сервера происходит с дополнительными параметрами, для чего ему эти параметры - спросите у разраба этого сервера.
    Ответ написан
    3 комментария
  • Можно ли как-то указать для элемента дробную ширину колонки?

    Mike_Ro
    @Mike_Ro
    Python, JS, WordPress, SEO, Bots, Adversting
    7 колонок, где первую колонку занимает высокая колонка, а остальные 6 колонок легко делятся и на 2 и на 3
    Ответ написан
    Комментировать
  • Какие необходимы документы для полноценного функционирования сайта?

    Mike_Ro
    @Mike_Ro
    Python, JS, WordPress, SEO, Bots, Adversting
    Реквизиты (лучше карточку компании).
    Согласие на обработку персональных данных (втч. уведомление об использовании cookies).
    Ответ написан
    1 комментарий
  • Где лучше хранить токен для запроса на сторонний ресурс?

    Mike_Ro
    @Mike_Ro
    Python, JS, WordPress, SEO, Bots, Adversting
    как безопаснее его хранить на фронте

    Слова безопаснее и фронте противоречат друг-другу. В любом случае, если это конфиденциальная инфа, то ее должен обрабатывать сервер, а на фронт отдавать результат своей работы.
    Ответ написан
    7 комментариев
  • Стоит ли идти в Embedded разработку?

    Mike_Ro
    @Mike_Ro
    Python, JS, WordPress, SEO, Bots, Adversting
    будто бы с меня сняли розовые очки и окунули в реальность будущей работы в этой сфере

    Привыкайте, впереди интереснее!

    Действительно ли всё так плохо с Embedded в России?

    Чекаем основной сайт по поиску работы (17.05.2023):
    - Микроконтроллеры: 161 вакансия.
    - C++: 996 вакансий.
    - Rust: 16 вакансий.
    - Python: 1078 вакансий.
    - Java: 1554 вакансии.

    Вывод: C++ очень востребован, микроконтроллеры относительно востребованы, Rust не востребован.
    Ответ написан
    3 комментария
  • Какую библиотеку посоветуете для горизонтального скролла мышью?

    Mike_Ro
    @Mike_Ro Куратор тега JavaScript
    Python, JS, WordPress, SEO, Bots, Adversting
    https://github.com/asvd/dragscroll
    Dragscroll is a micro JavaScript library (910 bytes minified)


    Если нужно будет больше опций, то рекомендую: Swiper https://github.com/nolimits4web/swiper
    Ответ написан
    1 комментарий
  • Нужно ли хорошо разбираться в алгоритмах джуну?

    Mike_Ro
    @Mike_Ro
    Python, JS, WordPress, SEO, Bots, Adversting
    Вопрос в том, сильно ли важны алгоритмы для начинающего разработчика(джуна) и стоит ли уделять им более пристальное внимание на ранней стадии обучения или не стоит на них зацикливаться и хардтраить

    возможно стоит изучать сам язык и рабочие инструменты к нему, а алгоритмами заниматься уже для повышения квалификации

    Совместить. Изучать инструмент + популярные алгоритмы, которые Вы будите применять в ходе разработки в рамках данного инструмента. Больше инструментов > больше алгоритмов.
    Ответ написан
    3 комментария
  • Вопрос по асинхронному js?

    Mike_Ro
    @Mike_Ro Куратор тега JavaScript
    Python, JS, WordPress, SEO, Bots, Adversting
    async sendNewData() {
        await this.requestToServer(url);
        console.log(this.failMessage);
    }

    Весь исправленный код, втч. синтаксические ошибки:
    class Lists {
        constructor(items, failMessage) {
            this.items = items;
            this.failMessage = failMessage;
        }
    
        async requestToServer(url) {
            let response = await fetch(url, {
                method: 'GET',
                headers: {
                    'Content-Type': 'application/json;charset=utf-8',
                }
            });
    
            if (response.ok) {
                this.items = await response.json();
            } else if (response.status == 422) {
                this.failMessage = await response.json();
            }
        }
    
        async sendNewData(url) {
            await this.requestToServer(url);
            console.log(this.failMessage);
        }
    }
    Ответ написан
    Комментировать
  • Что такое Docker простыми словами?

    Mike_Ro
    @Mike_Ro
    Python, JS, WordPress, SEO, Bots, Adversting
    Что такое Docker простыми словами

    простыми словами

    Если совсем прям простыми, то - это некая легковесная оболочка, которая способна изолировать приложение внутри себя от внешнего мира. Очень похож (по логике) на системы виртуализации VMware, VirtualBox, Parallels итп, но сам не является им.

    Возможности:

    - Контейнеризация: Docker позволяет паковать приложения вместе со всеми их зависимостями в контейнеры, обеспечивая тем самым их независимость от конкретной инфраструктуры.
    - Переносимость: Контейнеры Docker могут быть запущены на любом компьютере, который поддерживает Docker, независимо от операционной системы. Это делает распространение и развертывание приложений намного проще.
    - Изоляция ресурсов: Каждый контейнер Docker работает в изолированной среде и не влияет на другие контейнеры или хостовую систему.
    - Слоистая файловая система: Docker использует слоистую файловую систему для хранения данных, что позволяет существенно экономить дисковое пространство и упрощает обновление и распространение контейнеров.
    - Сетевые возможности: Docker позволяет настраивать сетевые параметры каждого контейнера, что позволяет создавать сложные многокомпонентные приложения.
    - Docker Hub: Docker Hub – это репозиторий, где можно хранить и делиться контейнерами. Это облегчает развертывание и распространение приложений.
    - Docker Compose: Это инструмент для определения и запуска многоконтейнерных - Docker-приложений. С помощью Compose вы можете использовать файл YAML для конфигурации служб вашего приложения, а затем с помощью одной команды создать и запустить все службы.
    - Docker Swarm: Docker Swarm предоставляет нативные возможности Docker для оркестрации и масштабирования кластера Docker.
    Ответ написан
    Комментировать
  • Что лучше учить в связке с React для бекенда?

    Mike_Ro
    @Mike_Ro
    Python, JS, WordPress, SEO, Bots, Adversting
    что лучше мне выучить для бекенда Node js или Next js

    NestJS
    Ответ написан
    Комментировать
  • Как различить клик по `td` и клик по `a` в `td`?

    Mike_Ro
    @Mike_Ro Куратор тега JavaScript
    Python, JS, WordPress, SEO, Bots, Adversting
    $('td a').click(function(event){
        event.stopPropagation();
        // code from a
    });
    
    $('td').click(function(){
        // code from td
    });
    Ответ написан
    1 комментарий
  • Какой подход к CSS использовать в 2023 году?

    Mike_Ro
    @Mike_Ro
    Python, JS, WordPress, SEO, Bots, Adversting
    CSS-IN-JS, CSS-modules

    Но я бы выбрал CSS-modules, т.к:
    1. Производительность клиента, а SSR не всегда возможен.
    2. Отсутствие смешивания CSS и JS.
    3. Отсутствие дополнительного обучения для использования CSS-IN-JS.
    Ответ написан
    2 комментария