Задать вопрос
Ответы пользователя по тегу HTML
  • Мой код выглядит плохо или отлично?

    olegbarabanov
    @olegbarabanov
    Программист, фрилансер (ИП)
    1) Что касательно JS - рекомендую обратить внимание на
    Airbnb JavaScript style guide или на Google JavaScript Style Guide.
    Код должен быть в одном стиле. Т.е. либо везде используете ; либо нигде.

    2) Также от себя лично добавлю, старайтесь обозначать переменные по умолчанию как const. Если вам не хватает const потому что вам надо переназначать переменную - только тогда делайте let.

    Немного модифицируем ваш пример
    let a = 0 
    let b = 1 
    const b2 = '/4'
    const slider = document.querySelector('.slider')
    const buttonNext = document.querySelector('.buttonNext')
    const buttonBack = document.querySelector('.buttonBack')
    const counter = document.querySelector('#counter')

    Благодаря const мы сразу видим, что переменные не будут переназначаться (т.е. readonly). Правильное использование const и let - важный элемент самодокументирования кода.

    3) Что касается CSS - присмотритесь к Google HTML/CSS Style Guide
    Например, в вашем случае порядок свойств в CSS классах не придерживается какого-либо порядка, поэтому читать такое неудобно. Сделайте по алфавиту (за исключением вендорных свойств). Этот пункт как-раз описан тут.
    Естественно это не надо ручками делать - поэтому вам придется познакомиться с различными системами автоматического форматирования кода.

    4) Именование в CSS классах должно быть единого стиля. У вас в коде есть и .buttonBack и .container-button - lowerCamelCase и CamelCase стиль в CSS использовать нежелательно.

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

    olegbarabanov
    @olegbarabanov
    Программист, фрилансер (ИП)
    Свойства border-image и linear-gradient. Пример на codepen
    Ответ написан
    Комментировать
  • Как предотвратить выполнение onclick события с помощью JS?

    olegbarabanov
    @olegbarabanov
    Программист, фрилансер (ИП)
    Вариант на VanillaJS
    document.querySelector("#link").addEventListener(
            "click",
            (ev) => {
              alert("click function executed");
              ev.preventDefault();
              ev.stopPropagation();
            },
            true
          );
    Ответ написан
    Комментировать
  • Почему сайт вылетает с safari на iphone?

    olegbarabanov
    @olegbarabanov
    Программист, фрилансер (ИП)
    Во-первых, я заметил, что у вас не только на iphone такая проблема (во всяком случае на ipad грустно). Отрисовка даже на других устройствах явно хромает. И самую сильную проблему тут генерируют тяжелые фильтры с большими значениями. Например:
    ...
        -webkit-filter: blur(420px);
        filter: blur(420px);
    ...

    Во-вторых, заметил что у вас используется:
    @media screen and (max-width:720px) {
    ...
    }

    Хотя даже в bootstrap у вас используется ≥768px , т.е. некоторая часть мобильных девайсов фактически отображает полную версию для десктопа (и со всеми фильтрами).
    Ответ написан
    Комментировать
  • Некорректно работает swiper, последний блок не влезает полностью, в чем проблема?

    olegbarabanov
    @olegbarabanov
    Программист, фрилансер (ИП)
    Раз уж указываете padding, то к .swiper-slide добавьте: box-sizing: border-box;
    https://codepen.io/olegbarabanov/pen/zYzpVNa
    Ответ написан
    1 комментарий
  • Что за элемент такой (на картинке)?

    olegbarabanov
    @olegbarabanov
    Программист, фрилансер (ИП)
    Т.е. в вашем случае "элемент" это текущий выделенный элемент в структуре.
    В этом "элементе" указаны стили, указанные в атрибуте style элемента, который выделен у вас слева.
    Ответ написан
    Комментировать
  • SVG на сайт. Стоит или нет?

    olegbarabanov
    @olegbarabanov
    Программист, фрилансер (ИП)
    Да можно. Но есть и некоторые «подковырки».

    1) Можно если не использовать фильтры. Фильтры дико прожорливы, не везде нормально работают, на Фоксе бывают вызывают своеобразные «артефакты» (на Chrome были проблемы с Гауссовым размытием в версиях ниже то ли 22-ой, то ли 24-ой...).

    2) Если выкладываете, то проверяйте идентичность и сходство работы с GPU ускорением браузера и без него. Особенно это касается Firefox. Был недавно дико удивлен, когда попытался использовать довольно таки сложный SVG (с фильтрами), в одном web-приложении(с использованием определенных CSS трансформаций на соседние объекты, но которые визуально пересекаемые). Прикурил от глюков. Особенно Firefox.

    3) Если вы ориентируетесь еще и на пользователей IE версий меньше 9-ой, тогда Raphael только в помощь. Хотя им можно и png показывать.

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

    olegbarabanov
    @olegbarabanov
    Программист, фрилансер (ИП)
    Дизайнеры разные бывают. Есть дизайнеры интерьеров. Есть дизайнеры концепт-каров. Есть еще куча направлений дизайнов. И все они отличаются технической направленностью.
    Как дизайнер веб-интерьеров должен знать всякие детали и нюансы, так и веб-дизайнер, должен понимать, из каких элементов строится фронтенд. Потому то он и называется «веб-дизайнер».
    Мое мнение таково:
    Дизайнер не обязательно должен знать досконально CSS и HTML, но должен знать их возможности. И спорные вопросы должны решаться вместе с верстальщиком.

    Но если вопрос задан от лица руководителя, то я еще добавлю:
    Если проект еще оценивается, то тем более, дизайнер должен понимать основы. Почему? Возьмем как пример что вы решили делать проект на 100 т.р. сроком разработки 15 дней(5 дизайн + 5 верстка + 5 программирование). Причем заказчик потребовал полную совместимость даже с IE6(в сумму входит). Вы посчитали стоимость рентабельной. Верстальщик молчит, т.к. он еще не знает, с чем именно он столкнется. И 5 дней дизайнер отлично старается сделать простой сайт, со вкусом, и с нестандартными формами, и сложными фигурными элементами управления.

    Когда верстальщик получает это чудо искусства, творения и вдохновения, он падает на пол. Надо не только сверстать, но еще и нацепить кучу плагинов, наделать скруглений на всех подряд элементах(которые в IE<9 не работают нативно), добавить SVG|VML(или через Raphael.js) сложные элементы управления. Насобачить триггеров, чтобы это все еще и правильно работало. И выяснится, что вместо 5 + 5 + 5 = это займет 5 + 10 + ~ времени, т.к. программист получит страшную верстку, и ему еще всякие AJAX надо будет прикручивать.
    При этом дизайнер будет радоваться, т.к. свою работу он выполнил красиво и вовремя, ему все почести и премии. Верстальщик будет нервно курить а прогер будет всех проклинать. И вам, в бюджет меньшая сумма придет, т.к. расход увеличится существенно.
    Ответ написан
    Комментировать
  • Десктопное HTML-приложение без браузера?

    olegbarabanov
    @olegbarabanov
    Программист, фрилансер (ИП)
    как вариант — берем такой набор.
    засовываем в одну папку node.js, chrome portable, и файлы, которые необходимо отобразить.

    Пишем тупейший батник, который запускает ноду и передает js файлик на исполнение.

    нода запускает сервер вебсокета.
    нода запускает дочерний процесс chrome и сразу передает ему страницу.
    в скрипте на странице, должен быть код, позволяющий при инициализации подключиться к себе же по webSocket.

    Тем самым вы получите, полноценное приложение, которое может работать с node.js и не париться. Благо ноду можно скачать в виде единственного исполняемого файла.
    Всё.
    Ответ написан
    1 комментарий
  • Вопрос по поводу организации сайта на статическом HTML

    olegbarabanov
    @olegbarabanov
    Программист, фрилансер (ИП)
    как вариант, поискать свободные CMS-ки, работающие на файлах, а не на БД. Ну и впринципе, все пересобачить на нее. Как вариант, из того что по быстрому нашел, kandidat_cms (не реклама!).
    Так же можно подобных найти орду. Да или заказать у какого-нибудь фрилансера-прогера за символическую плату, набалалаить подобное.
    Ответ написан
    Комментировать
  • Какие существуют способы хранения ресурсов в мобильном HTML5-приложении?

    olegbarabanov
    @olegbarabanov
    Программист, фрилансер (ИП)
    1) Используя manifest. В нем необходимо будет указать эту орду файлов. Загрузки будут по мере необходимости, зато второй раз не будут грузиться. Поддержка манифеста в браузерах
    2) Самостоятельный механизм кеширования с внесением в webSQL. Поддержка webSQL в мобильных
    Ответ написан
    2 комментария
  • Можно ли создать «шумный» фон только с помощью CSS3 (без изображений)?

    olegbarabanov
    @olegbarabanov
    Программист, фрилансер (ИП)
    canvas + небольшой скрипт, который делает шумы или что-то подобие соли тогда уж.
    Если я конечно правильно понял вас.
    Ответ написан