• Теги Div или Ul?

    firedragon
    @firedragon
    Не джун-мидл-сеньор, а трус-балбес-бывалый.
    Подумайте сами
    В вашем примере список карточек, так почему его нужно оформлять в какой то див?

    див это просто контейнер без логической нагрузки, список наоборот дает указание что это коллекция определенного типа, возможно с определенной структурой, и вы на это не тратитесь все у вас из коробки
    Ответ написан
    3 комментария
  • HTML блочные элементы внутри строчных?

    agmegadeth
    @agmegadeth
    Веб-разработчик в дизайн студии
    Блочные, строчные, блочно-строчные. Фигачь как хочешь во что хочешь пока это работает. И даже плюй на валидаторы.
    Мне ничего не мешает сделать тег a блочным, а div строчным в css. И какой валидатор это отследит?
    Ответ написан
    Комментировать
  • HTML блочные элементы внутри строчных?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Вопрос, все таки такой метод имеет право на жизнь ?

    Есть такая штука - Vue.js, имеет over40000 звездочек на GitHub. Так вот: там при создании transition-group целая гора вашей верстки по умолчанию оборачивается в span. Так что... как сказал Андрей Гончаров - фигачь как хочешь во что хочешь пока это работает.
    Ответ написан
    Комментировать
  • JS узкое направление?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Mozilla рекомендуют такой план.
    Сначала
    Затем продвинутые темы

    Ну и вообще научитесь комфортно и быстро находить ответы на вопросы по JS в документации на MDN.
    Ответ написан
  • Ошибки при установке ( npm install )?

    Aetae
    @Aetae
    Тлен
    Установи пуфон, очевидно же. На большинстве линухов он из коробки, что у тя за дистриб?
    Ну и не-lts ноду юзать не рекомендуется, многие пакеты не успевают подтягиваться.
    Ответ написан
    5 комментариев
  • Ошибки при установке ( npm install )?

    При помощи choco можно установить все зависимости:
    choco install python2 visualcpp-build-tools -y
    Почему так вышло можно почитать тут.
    Ответ написан
    3 комментария
  • Где живёт паттерн visually-hidden?

    Degenerated
    @Degenerated
    Как я понял, живёт он тут: https://allyjs.io/tutorials/hiding-elements.html
    Про развитие судить сложно, последнее обновление в 2017 году
    Ответ написан
    Комментировать
  • Вопрос по медиазапросам?

    SkiperX
    @SkiperX Куратор тега CSS
    Если на ноуте с высотой экрана 620px что-то не входит в экран, приходится делать адаптив по высоте.

    С плагином fullpage приходится
    https://codepen.io/SquishyAndroid/pen/XjRPVV

    И на сайтах с горизонтальным скролом
    https://gogolevsky12.art3d.ru/
    Ответ написан
    1 комментарий
  • Как работать с gulp-file-include?

    @FoxFka
    На сколько я понимаю - этот плагин не предназначен для автоматической сборки файлов. То есть ваш page.html Вам в любом случае придется сделать вручную, забив в него каркас html-файла. А вот включать в него блоки с разными параметрами как раз можно и нужно при помощи плагина. Для того, чтобы файлы шаблонов блоков не попадали в сборку на мой взгляд лучше всего поступить примерно следующим образом.
    Можно добавлять некий единый префикс для всех файлов блоков. Во-первых это даст возможность привязаться к этому префиксу при настройке task, а во-вторых Вы, вернувшись к работе над проектом через некоторое время быстро сможете отличить файлы шаблонов от блоков.
    Выглядеть это все может так:
    gulp.task('html:build', function() {
     gulp.src('src/[^_]*.html')
    .pipe(fileinclude({
      prefix: '@@',
      basepath: '@file'
    }))
    .pipe(gulp.dest('build/')); 
    });

    Эта задача будет отрабатывать на всех html файлах директории src, имена которых НЕ начинаются с символа "_"
    Далее, чтобы подключить файл блока в ваш шаблон нужно создать его, не забыв добавить "_" в начало. Например "src/_includes/_module.html". Подключить его в обрабатываемый файл src/index.html можно, добавив в нужное место
    @@include('./_includes/_module.html')
    При запуске таски html:build в вашей папке /build появится файл index.html, включающий в себя содержимое файла module.html
    Это базовая схема, которую можно расширять в зависимости от ваших потребностей. Вся инфа для этого есть в документации и примерах.
    Ответ написан
    Комментировать
  • Почему не работает window.matchMedia?

    yarkov
    @yarkov Куратор тега JavaScript
    Помог ответ? Отметь решением.
    const block = document.querySelector('.block');
    const mql = window.matchMedia("(max-width: 768px)");
    
    window.addEventListener('resize', () => {
      if (mql.matches) {
        block.style.backgroundColor = "blue"
      } else {
        block.style.backgroundColor = "red"
      }
    })
    Ответ написан
    4 комментария
  • Модульность на фронтенде?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    (кратко про себя)
    Все лежит в папках: компонент + стиль. Собирается webpack'ом. Но у меня react-проекты.

    (длинно, но вроде бы по делу)
    Если относительно долго занимаетесь - у вас скорее всего уже выработались части, которые похожи - их выносите. Так же скорее всего у вас есть одинаковая структура (обычно это js/css/images и html, либо как вы пишите компонентами (отдельными папками) внутри котороых html + стили и может js ). Делайте шаблон для будущих проектов, в первую очередь удобным для себя - ведь вам с ним работать, а в нем реализуйте то что умеете по-максимуму (жмите картинки, оптимизируйте js и т.д)

    Плагины, которые используете для Gulp, просто проверьте в блэклисте, а так же можете посмотреть новые версии. Вообще, хорошо если вы знаете все свои плагины, в таком случае - вам и этот пункт можно не выполнять.

    кажется, что не использовал это все на 100%

    Всем так кажется, поэтому когда не хочется заниматься работой, идем в гугл и смотрим опен-сорс проекты других людей: gulp, wepback, затем если нашли что-то любопытное идем в npm/github читаем доку. Пытаемся применить в работе.

    Что имеем в итоге?
    1) если все работает и вас устраивает (скорость сборки, удобство проверки в разных браузерах ...) - "работу работать";
    2) если есть время и желание - гуглите опен-сорс решения, читайте твиттер интересных людей / новостную подписку;
    3) если хочется услышать мнение коллег, но при этом коллег рядом нет - пишите статью на хабр. Просто статья: я использую такие-то плагины в своем "шаблоне" - вряд ли получит лестные отзывы, но возможно кто-то напишет: вот в этом месте у вас плохо, сделайте иначе. Возможно, вы придумаете, как написать статью интересно - тогда честь и хвала. И критика. А обоснованная критика всегда хорошо.

    P.S. если используете Jade и следуете BEM-методологии, то я бы порекомендовал посмотреть на этот проект
    Ответ написан
    Комментировать
  • Error: Cannot find module 'webp-converter/cwebp' при запуске gulp?

    @Volodymyp
    У кого проблемы с плагином WEBPCSS нужно установить converter командой -
    npm install webp-converter@2.2.3 --save-dev
    Мне помогло
    Ответ написан
    10 комментариев
  • Как обработать ошибки от gulp-rigger без остановки watch?

    Tispartaaaa
    @Tispartaaaa
    Начинающий фронтендер :)
    Если я не ошибаюсь, то это должно помочь.

    gearmobile.github.io/gulp/gulp-plumber
    Ответ написан
    6 комментариев
  • Почему не отрабатывает pug mixin с svg?

    hrenly
    @hrenly
    А переменная phone есть? вы или передавайте строку
    +icon("phone")
    или переменную
    var phone = "phone"
    +icon(phone)
    Ответ написан
    1 комментарий
  • Почему у меня не работает :after/:before на img если прописан путь к картинки?

    @soledar10
    html css3 js jquery
    :before и :after добавляет контент к содержимому элемента, а у img же как такового содержимого нет.
    Решение - завернуть img в div и к нему уже применять псевдоэлементы.

    Также псевдоэлементы нельзя применить к input
    Ответ написан
    2 комментария
  • Как лучше сделать такой обьект?

    kocherman
    @kocherman
    Ответ написан
    Комментировать
  • ЯП для WEB разработки?

    sayber
    @sayber
    Да, я программирую на PHP и еще асинхронно!
    PHP изучал, уже надоел.

    Видимо не изучали, а поверхностно прочитали.
    Судя по вопросу и контексту, вы мало себе представляете чем отличаются те или иные языки программирования, какие представления могут иметь и т.д.
    Почему в списке нет Ruby, JS - это ведь тоже языки программирования для веб-разработки.

    Вы видимо "Дуров", раз написали кучу соц. сетей, банковских CRM, и др. крупной продукции на PHP.
    Иначе я не знаю, как может язык надоесть.
    Ответ написан
    Комментировать
  • Как сделать неравномерные блоки?

    Enguipro
    @Enguipro
    PHP developer

    Так?
    Ответ написан
    Комментировать
  • Лучше используя тег или такой длинный класс задать стили?

    IlyaDeveloper
    @IlyaDeveloper
    Top Rated | Expert Web Developer
    Смотри тут нужно подключить логику и правила BEM методологии, по BEM нельзя использовать конструкцию с обращением к span, да и еще учитывая что у вас там есть модефикачия ребенка "feature__color__item_first feature__color__item", сегодня у вас span сегодня а завтра будет div и все приехали))!
    По поводу неймина и длинны не переживай это нормально, но стараться нужно писать более логично и с малым набором имен, лучше больше старайся декомпозировать свои компоненты!
    Как уже было написано выше у вас не правильный BEM!

    component: .feature
    block: .feature__color
    modeficator: .feature__color--first или .feature__color_first

    Вот смотри правильно так:
    <div class="feature">
        <div class="feature__color feature__color--first">
            <mark class="feature__color-item feature__color-item--first"></mark>
            <mark class="feature__color-item"></mark>
        </div>
    
        <div class="feature__color feature__color--first">
            <mark class="feature__color-item feature__color-item--first"></mark>
            <mark class="feature__color-item"></mark>
        </div>
    </div>
    
    или :
    <div class="feature">
        <div class="feature__color feature__color_first">
            <span class="feature__color-item feature__color-item_first"></span>
            <span class="feature__color-item"></span>
        </div>
    </div>
    
    или :
    <div class="feature">
        <div class="feature-color feature__color_first">
            <span class="feature-color__item feature-color__item--first"></span>
            <span class="feature-color__item"></span>
        </div>
    </div>


    Если вы уверены что внутри будет один блок то в виде исключения можно написать так(но я не рекомендую так как это нарушает BEM):
    <div class="feature">
        <div class=feature__color"">
            <div class="feature-color-item ">
                <h2>first text</h2>
                <mark>second text</mark>
                last text
            </div>
    
            <div class="feature-color-item feature-color-item--fietst ">
                last text
            </div>
        </div>
    
        <style>
            .feature-color-item {
                font-size: 20px;
            
                h1 {
                    font-size: 30px;
                }
            
                span {
                    font-size: 10px;
                }
            }
        </style>
    </div>


    Если вы используете современный фреймворк, то тогда за счет инкапсуляции можно сократить нейминг, вот на примере ануглар:
    <feature>
        <atricle class="__color">
            <div class="__item"><span>text</span></div>
    
            <div class="__item"><span>text</span></div>
    
            <div class="__item"><span>text</span></div>
        </atricle>
    </feature>
    
    или :
    
    <feature>
        <atricle class="--first">
            <feature-color-item >
                <h2 class="__title">first text</h2>
                <mark class="__mark">second text</mark>
                last text
            </feature-color-item>
    
            <feature-color-item class="--first">
            <h2 class="__title">first text</h2>
            <mark class="__mark">second text</mark>
            last text
            </feature-color-item>
        </atricle>
    
        <style>
          /* componet feature-color-item */
            :host {
                font-size: 20px;
    
                .__title {
                    font-size: 30px;
                }
    
                .__mark {
                    font-size: 10px;
                }
                
                &.--first{
                     color: #red;
                 }
            }
        </style>
    </feature>
    Ответ написан
    Комментировать
  • Как пофиксить в npm vulnerabilities?

    bingo347
    @bingo347 Куратор тега Node.js
    Crazy on performance...
    npm с некоторых пор проверяет все пакеты на уязвимости в js коде и предупреждает Вас о найденыых
    ищет это все простейший бот на эвристиках, по различным патернам
    работать они никак не мешают, Вас просто предупредили, что в установленных пакетах имеются потенциально небезопасные фрагменты кода
    Ответ написан
    1 комментарий