• Как сделать мигающее уведомление во вкладке браузера?

    ProgrammerForever
    @ProgrammerForever
    Учитель, автоэлектрик, программист, музыкант
    var titleState=0;
    setInterval(()=>{
    document.title=titleFlag?"Мигающий":"заголовок";
    titleState = titleState?0:1;
    },500);
    Ответ написан
    2 комментария
  • Есть ли плагин для группировки css в vscode?

    Alexboom
    @Alexboom
    Плагин не нужен.
    Все что вам нужно, это перед и после блока CSS свойств, которые вы хотите сворачивать или разворачивать написать два комментария -
    /*#region*/ и /*#endregion*/

    Например:

    /*#regoin*/
    .declaration1 { ... }
    .declaration2 { ... }
    /*#endregion*/

    также поддерживается вложенность регионов друг в друга:

    /*#regoin*/
    .declaration1 { ... }
    .declaration2 { ... }
    .declaration3 { ... }

    /*#regoin*/
    .declaration1 { ... }
    .declaration2 { ... }
    .declaration3 { ... }
    /*#endregion*/

    .declaration1 { ... }
    .declaration2 { ... }
    .declaration3 { ... }
    /*#endregion*/

    Вот скрин, как это работает у меня
    6093309eb4e7a013992853.png
    Ответ написан
    Комментировать
  • Что означает "!!~"?

    E1ON
    @E1ON Куратор тега JavaScript
    Programming, Gamedev, VR
    https://developer.mozilla.org/en-US/docs/Web/JavaS...

    ~ Заменяет каждый бит операнда на противоположный.
    !! (Логическое НЕ) Возвращает false, если операнд может быть преобразован в true; в противном случае возвращает true.
    Ответ написан
    2 комментария
  • Что означает "!!~"?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Сокращалка, удобная для indexOf(), который возвращает -1 если не найдено, или индекс от 0 и больше.

    Для логики приложения часто бывает нужно узнать только, найдено или нет: т.е. -1 или иное значение. Можно просто сравнивать if (a.indexOf(b) > -1) { /* найдено! */ } но иногда хочется короче.

    Битовый оператор НЕ ~ хорош тем, что выделяет -1: только -1 с этим оператором даст 0. Прочие числа дадут какое-то ненулевое значение.

    ~(-1) === 0

    Остаётся привести значение из численного в булево. Для этого два воскл. знака — два логических НЕ.
    • для варианта «найдено» из числа от 0 и больше получилось тоже ненулевое число, и !! даст true
    • для варианта «не найдено» из -1 получится уникальный 0, и !!0 вернёт false
    Ответ написан
    4 комментария
  • Как подключить несколько шрифтов в html?

    @besbesArt
    .p-one {
      font-family: 'IBM Plex Sans', sans-serif;
      font-weight: 400;
    }
    .p-two {
      font-family: 'IBM Plex Sans', sans-serif;
      font-weight: 700;
      font-style: italic;
    }
    Ответ написан
    1 комментарий
  • Как подключить несколько шрифтов в html?

    delphinpro
    @delphinpro Куратор тега CSS
    frontend developer
    То есть как, прописать для одного тега шрифт regular 400, а для другого тега bold 700 italic, а один вообще поставить в шрифт Open sea?


    Ну ровно так и делать, как вы написали.

    p.one {
      font-family: 'IBM Plex Sans', sans-serif;
      font-weight: 400;
    }
    p.two {
      font-family: 'IBM Plex Sans', sans-serif;
      font-weight: 700;
      font-style: italic;
    }
    p.three {
      font-family: 'Open Sea', sans-serif;
    }


    Как отметили выше, основное семейство шрифта лучше задать для всей страницы, в нужных местах менять только жирность и начертание.
    Ответ написан
    1 комментарий
  • Как подключить несколько шрифтов в html?

    @moreqa
    Ответ написан
    Комментировать
  • В чем суть такой записи в reset.css?

    Rsa97
    @Rsa97
    Для правильного вопроса надо знать половину ответа
    Это разные по сути объявления.
    content: ""; - задаёт содержимое псевдоэлемента (пустую строку)
    content: none; - говорит, что псевдоэлемент вообще не генерируется
    Ответ написан
    2 комментария
  • В чем суть такой записи в reset.css?

    nowm
    @nowm
    Это специфичное для blockquote определение, которое Eric Meyer (автор reset.css) позаимствовал у Paul Chaplin. Первая строка content: "" делает так, чтобы у blockquote исчезли кавычки — на случай, если вторая строка content: none не поддерживается браузером, потому что первая строка — это CSS 2, а вторая — это CSS 2.1. В одну строку их записать нельзя, потому что по стандарту для свойства «content» нельзя комбинировать ключевые слова «normal» и «none» с другими значениями.

    Вообще, когда встречается перечисление одного и того же свойства с разными значениями, это делается для того, чтобы обеспечить совместимость с разными браузерами. То есть, если, например, браузер не поддерживает «content: none», он применит «content: ""», а другую запись проигнорирует.

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

    .some-class {
        background: #e66465;
        background: linear-gradient(#e66465, #9198e5);
    }


    В этом коде, если браузер поддерживает градиентный фон, он сначала прочитает, что нужно использовать цвет «#e66465», а потом это перезапишется записью «linear-gradient», и итоговое значение будет «linear-gradient(#e66465, #9198e5);». Если же браузер не поддерживает градиент, он сначала прочитает, что нужно использовать «#e66465», а потом увидит неподдерживаемое определение «linear-gradient», проигнорирует его, и итоговое значение будет «#e66465».
    Ответ написан
    Комментировать
  • Как написать свой скриптовый язык?

    @Dmtm
    Android
    скелет пишется за день, используем синтаксис xml или json чтобы не писать свой парсер, собираем объекты команд, пишем интерпретатор который умеет на них реагировать - всё, простейший скриптовый язык готов,
    ветвление по принципу метка-goto и сохранение результатов команд в глобальных переменных( тоже самое - пары метка-значение)
    Ответ написан
    Комментировать
  • Как написать свой скриптовый язык?

    dollar
    @dollar
    Делай добро и бросай его в воду.
    Возьмите Lua.
    Пожалуй, это самый простой скриптовой язык, да ещё и встраиваемый, то есть можно просто взять его готовую реализацию и встроить в своё приложение. Программисту для изучения синтаксиса понадобится около 15 минут. В то же время это довольно мощный язык, в котором есть практически всё, что может понадобится в плане синтаксиса. Встроенных функций не так много, но основные есть, ведь упор на простоту изучения (для ваших же пользователей). А если действительно нужен именно свой скриптовой язык, то на примере Lua можно понять, какой необходимый минимум должен быть в языке, можно изучить исходники и т.д.
    Ответ написан
    1 комментарий
  • Как написать свой скриптовый язык?

    Stalker_RED
    @Stalker_RED
    В качестве наглядного примера можно посмотреть на esprima - парсер js. Он отлично задокументирован.
    Ответ написан
    Комментировать
  • Как написать свой скриптовый язык?

    AgentSmith
    @AgentSmith
    Это мой правильный ответ на твой вопрос
    Я писал свой язык прочитав книгу дракона, а потом с помощью ANTLR
    Ответ написан
    Комментировать
  • Как написать свой скриптовый язык?

    sergey-gornostaev
    @sergey-gornostaev
    Седой и строгий
    Статей для этой задачи будет мало. Тут нужен как минимум SICP, а ещё лучше книга дракона.
    Ответ написан
    9 комментариев
  • Как можно нормально смотреть стили элемента в браузере, если в них примеси переменных?

    profesor08
    @profesor08 Куратор тега CSS
    В девтулзах, в стилях отображается конкретно то, что прописано в .css файле или в теге <style>. Это, в первую очередь, важно для разработчиков сайта, чтоб понимать что будет на выходе. Во вторых, так как разработчики используют некую тему, то они не заморачиваются над кодами цветов, они просто используют --btn-color, не заморачиваясь над тем, какой там цвет кода. И браузер всеми силами, в меру своих возможностей, помогает им, предоставляя доступ к отладочной информации.

    Ты же, будучи посторонним и непричастным к разработке сайта, не имеешь доступа к исходникам и всей отладочной информации. Более того, тебе этого и не надо. И разработчикам это тоже не надо. А это значит, что придется пользовать тем, что есть:
    • наводишь на переменную и смотришь ее значение
    • кликаешь на переменную и переходишь к ее объявлению


    Если же такой расклад не устраивает, то есть еще варианты:
    • Связаться с разработчиками сайта и попросить их убрать css переменные и заменить их на коды цветов. Скорее всего будешь послан xD в том или ином виде, если вообще ответят.
    • Написать свое расширение для девтулзов, которое поставить финальные значения на место переменных.
    • Если написать не в силах, то заплати кому-то за разработку.
    • Если денег на себя жалко, то попроси кого-то написать такое расширение, авось повезет.
    • Еще можно попытаться упросить разработчиков браузера, но это не просто. Но если получится, то через пару лет xD добавится галочка.
    Ответ написан
    Комментировать
  • Как можно нормально смотреть стили элемента в браузере, если в них примеси переменных?

    @Flying
    Вам нужно определиться для чего именно вы хотите просматривать стили элемента.

    Если вы хотите видеть какие стили определены (т.е. из каких стилевых таблиц какой стиль приходит, как задан и т.п.) - то это вкладка Styles, она отображает данные из исходных стилевых таблиц.

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

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

    За Chrome не скажу, а в Firefox значение переменной показывается при hover'е, в целом удобно.

    Если вы считаете что такая функциональность необходима - вам стоит оформить запрос в виде bug report'а, благо bug tracker'ы для движков основных браузеров открыты (Chromium, Firefox, WebKit). Однако при описании подобного запроса вам стоит постараться лучше продумать предлагаемый вами сценарий реализации.
    Ответ написан
    2 комментария
  • Шаблонизатор/препроцессор для верстки в 2021?

    EaGames
    @EaGames
    Front-end developer
    nunjucks + gulp
    для чего вам webpack в верстке? - ну если вы делаете SPA или тому подобное на React/Vue итд, то да, но тогда зачем вам шаблонизаторы? ведь там свои тараканы аля jsx.
    Ответ написан
    2 комментария
  • Шаблонизатор/препроцессор для верстки в 2021?

    @Froggyweb
    из адекватных для верстки - pug и nunjucks
    ejs и handlebarsjs - слишком низкоуровневые, хотя наверняка быстрее.
    React Vue Angular - это про другое.
    nunjucks должен нормально работать с Webpack. Даже для Vite есть плагин, что и попробую сейчас.

    Ну либо использовать posthtml-include, но это так себе костыль.
    Под вебпаком PUG и pug-bem-plain-loader работают отлично, но вебпак как-то не торопливый. Галп + Вебпак для js - лучше, Vite пока фантастика, но плагинов не густо.
    Ответ написан
    Комментировать
  • Шаблонизатор/препроцессор для верстки в 2021?

    @SergeiB
    Использую Nunjucks, доволен, как слон. Подключаю, как в приведённом тут примере:
    import Nunjucks from './nunjucks'; // Импортируем Nunjucks из нашего файла конфигурации (см. ниже)
    
    {
      test: /\.njk$/,
      use: {
        loader: 'html-loader',
        options: {
          preprocessor: (content, loaderContext) => {
            let result;
    
            try {
                loaderContext.addContextDependency(loaderContext.context);
                loaderContext.addDependency(PATHS.njkConfig); // PATHS.njkConfig - путь к файлу конфигурации
    
                result = Nunjucks.renderString(content); // или `Nunjucks.render(loaderContext.resourcePath)`
              
            } catch (error) {
              loaderContext.emitError(error);
    
              return content;
            }
    
            return result;
          },
          minimize: false
        }
      }
    }


    Файл конфигурации nunjucks.js.

    import Nunjucks from 'nunjucks';
    
    // PATHS.pages - путь к папке с файлами Nunjucks
    const env = Nunjucks.configure(PATHS.pages, {
      noCache: true
    });
    
    // Тут можно задавать всякие фильтры и глобальные переменные, например:
    // const isArray = value => Array.isArray(value);
    // env.addFilter('isArray', isArray);
    // env.addGlobal('projectName', 'mySuperProject');
    
    export default Nunjucks;

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