• Как наглядно увидеть размеры блоков при создании сетки в CSS?

    djQuery
    @djQuery
    "Кодируем помаленьку" ("Сказка о Тройке")))
    Укажите в CSS:
    *{
     border: solid 1px red;
    }


    Вместо звездочки можно указать любые нужные элементы. Элементам задать разный цвет границы, например:

    div {
     border: solid 1px red;
    }
    
    span {
     border: solid 1px green;
    }
    
    p {
     border: solid 1px blue;
    }
    Ответ написан
    8 комментариев
  • Как сделать переключение классов для JS-меню?

    teotlu
    @teotlu
    Навёрстываю упущенное
    Ну, раз у вас отмечен тег jquery, то примерно вот так:

    var $menu = $(".conmenu-ul"), // кэшируем в переменную меню
        $links = $menu.find("a"); // кэшируем в переменную ссылки
    
    $links.on("click", function() {
        $menu.children().removeClass("active"); // убираем класс у всех пунктов
        $(this).parent().addClass("active"); // добавляем к пункту, содержащему нажатую ссылку
    });
    Ответ написан
    1 комментарий
  • Как сделать слайдер, переключающийся по таймеру?

    @ned4ded
    Верстка, Фронтенд
    setTimeout() - функция однократного действия. Используйте setInterval() или рекурсию.

    Можете почитать тут.
    Ответ написан
    Комментировать
  • Где можно почитать хорошие туториалы по принципам работы шаблонизаторов Haml, Slim?

    @CapeRatel
    Слим очень прост. Работает на отступах.
    Есть переменая @orders (Массив с заказами)
    - @orders.each do |order|
      = order.title
      br
      = order.price
      .class#id(style="background: yellow;")
        - if order.price > 200
          p Это тег p и цена больше 200
        - else
          h2 Это тег h2
          span(style="color: red") А тут мы вставим прайс из руби кода внутри строки #{order.price} вот так

    Ставишь "равно" когда надо юзеру показывать хелперы или данные из переменной
    Ставишь "Тире" когда не надо. Используем циклы и проверки if else
    Мы не пишем div если у него есть class или id.
    Синтаксис как в css
    .class -  пишется с точкой перед названием класса
    .header-menu
    #id - id пишется через хэш
    #menu
    #toggle-menu

    можно компоновать
    #toggle-menu.red.col-md-4.some-class(style="display: inline-block") А пробел поставил и уже текст

    хочешь родной синтаксис пишешь в скобках
    #menu(class="red white col-md-10 pull-right" data-menu="toggle")


    Это не все, но надеюсь немного понятно.
    Ответ написан
    2 комментария
  • Выполнил работы по договору подряда, заказчик утверждает что сайт не работает по его словам и требует бесконечных правок, как быть?

    @awesomer
    Заказчик и не должен ориентироваться в веб-технологиях.
    Вас только потому и наняли, что специалист в них именно вы, а не заказчик.

    Ваш косяк № 1: не прояснили детали с клиентом, а взялись уже.
    Фактически вы выполняли не работу для них, а работу под себя, под те технологии, что интересны вам лично. И по непонятно какой причине понадеялись, что это прокатит.

    Но и это можно было бы разрулить, если бы не второй ваш косяк:

    Ваш косяк № 2: когда получили первые завышенные ожидания клиента - должны были сразу начать разруливать, а не уходить с обещаниями им помочь с версткой и пр. Тем самым вы показали им, что они могут на вас давить, что вы чувствуйте себя неправым.
    Ответ написан
    Комментировать
  • Выполнил работы по договору подряда, заказчик утверждает что сайт не работает по его словам и требует бесконечных правок, как быть?

    SelectVim
    @SelectVim
    Юрист. Интересуюсь IT. Для души :-)
    Если это был действительно подряд, то важно отметить несколько вещей.

    1. Отсутствие технического задания означает отсутствие предмета договора, и как следствие -- суд может признать договор незаключенным, а полученные вами деньги неосновательным обогащением.
    2. Но. Если вы вели переписку с официальных адресов и заказчик всё же принял эти работы и написал, что "ок, расходимся на таких условиях", то вполне можно доказать, что и предмет согласован, и условия оплаты изменены (или новация, т. е. изменение предмета или способа исполнения обязательства). Потому что необязательно всё должно быть на одной бумажке подписано и скреплено печатями. Для вас это будет означать и успешную сдачу работ, и невозможность предъявления претензий, потому что скорее всего в сроки для предъявления претензий заказчик после такой сдачи не уложился.
    3. В случае суда все расходы на экспертизы (может быть назначена запросто, если не будет понятно, обладают ли выполненные вами работы потребительской ценностью для заказчика) будут на вас, потому что пока для заказчика это будет лёгкий процесс -- бумажек никаких нет, работы нет, а значит вы не отработали эти деньги. Защищаться уже должны вы. Разумеется, в случае успешного для вас исхода дела все эти расходы вам возместят.

    Итого: только юрист, адекватный, который сможет разобраться в сути вопроса и привлечь к делу переписку сторон.
    Ответ написан
    Комментировать
  • Как сверстать анимацию заполнения шкалы?

    makarenya
    @makarenya
    программист
    Если сложность картинки совсем уж запредельная, то всегда можно взять и использовать svg. Я так и сделал тут: внизу таймлайн с годами. Но тут надо синхронизировать размер, и в вашем случае видится решение проще.

    Если ширина сайта фиксированная, то просто будет использовать 2 div-а: один над другим (то есть у второго position=absolute). Внутри верхрнего лежит ещё один с шириной сайта (А ещё у него должен быть position=absolute и right=0. В нём изображение серого таймлайна. Сам таймлайн можно сделать из обычных div-ов, расположенных слева направо во flexbox-е или с флоатами. div со скруглёнными углами - это точка, с margin сверху и меньшей высотой - линия. А в первом диве (который снизу) вы составляете тот-же таймлайн, но уже цветной. Посчитать цвета градиентов для него - задача не сложная. Ну и вся магия во втором блоке, который с absolute. У него проставлен right=0, и уменьшая его width вы будете понемного скрывать серый таймлайн, а на его месте будет появляться цветной
    Ответ написан
    5 комментариев
  • Модульность на фронтенде?

    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-методологии, то я бы порекомендовал посмотреть на этот проект
    Ответ написан
    Комментировать
  • Где в slick устанавливается размер слайда?

    @Aidarkhan
    variableWidth: true,
    после этого размер не устанавливается автоматом, обычно применяется в слайдере, где ширина у картинок разная
    Ответ написан
    Комментировать
  • Как обращаться к @keyframes в jQuery?

    Petroveg
    @Petroveg
    Миром правят маленькие с#@&ки
    Правильный подход — менять в JS только классы. Менять правила с помощью атрибута style нужно в крайнем случае. А в случае с animation это вообще невозможно — анимация, как и любое @rule, описывается отдельно от элементов.

    Если нужно создать много правил, основываясь на данных, которые появятся только в скрипте, используем insertRule у объекта из коллекции document.styleSheets. В этих правилах вы сформируете имена animation и привяжете их к классам.

    Вот примерно так codepen.io/cleric/pen/FqIaD
    Причём тут я пошёл на поводу простоты и вместо классов оперирую атрибутом style. Но в боевых условиях я бы подумал 10 раз — могут меняться и другие параметры (продолжительность и прочее).
    Ответ написан
    5 комментариев
  • Есть ли какой-нибудь онлайн-генератор изображений для верстальщика?

    AlexanderTsymbal
    @AlexanderTsymbal Автор вопроса
    tsymbal.su
    Наткнулся также и на офлайн-генератор. imsky.github.io/holder - удобно, когда работаешь в дороге, без доступа к сети.
    Ответ написан
    Комментировать
  • Как создают анимацию в html5 canvas?

    twobomb
    @twobomb
    Как делаю я. Обычно у меня есть функция основная функция называю ее handler. Она постоянно вызывается. А в ней уже вызываются другие функции. Ну вот мой пример https://jsfiddle.net/twobomb/b05nmjs5/
    Разработка на канвасе у меня обычно начинается со следующего кода
    var canvas, ctxW = 500, ctxH = 500,ctx;
    
    	window.onload = function(){
    		canvas = document.createElement("canvas");
    		canvas.width = ctxW;
    		canvas.height = ctxH;
    		document.body.appendChild(canvas);
    		ctx = canvas.getContext("2d");
    		handler();
    	}
    
    	function handler () {
    		 ctx.clearRect(0,0,ctxW,ctxH);
       //Тут вызов функций и прочие реализации
    
    		 setTimeout(handler,1000/60);
    	}
    Ответ написан
    Комментировать
  • Как определить расстояние между верхней точкой экрана(не страници) и элементом?

    filgaponenko
    @filgaponenko
    frontend developer
    .offset().top
    Ответ написан
    Комментировать
  • Deployment Gulp Sass Phpstorm?

    MedVedar
    @MedVedar
    e-commerce developer
    https://confluence.jetbrains.com/display/PhpStorm/...

    By default, only files changed by the IDE will be uploaded. If files are changed by some other process such as a VCS branch change, transpilation of Sass or LESS or a File Watcher, they are not automatically uploaded. To change this behavior and autoupload these changes as well, enable the Upload external changes option.
    Ответ написан
    Комментировать
  • Как реализовать такой скролл?

    REZ1DENT3
    @REZ1DENT3
    web-developer
    Ответ написан
    Комментировать
  • Удаление класса после фокуса?

    @ZZiliST
    Изучаю JS, CSS, HTML, PHP
    Я бы мог написать код... но у меня апатия и мне лень... поэтому тебе надо найти самому три темы в гугле.

    Первая: если на нужном элементе фокус

    $( "#target" ).focus(function() {
      alert( "Handler for .focus() called." );
    });


    Вторая: добавить удалить класс у элемента

    $("p").last().addClass("selected");
      $("p").last().removeClass("selected");


    Третья проверить инпут на пустоту.

    if(document.getElementById("name").value === '') {
        alert("!!!");
    }
    Ответ написан
    Комментировать
  • Как импортировать xls или csv в MODX?

    ig0r74
    @ig0r74
    MODX-разработчик
    У miniShop2 есть встроенный инструмент импорта из csv: webcandy.ru/manuals/import-csv-minishop2

    Можно не устанавливать minishop, а просто скачать файл https://github.com/bezumkin/miniShop2/blob/master/...
    Подходит для импорта любых ресурсов, главное указать нужный class_key.
    Ответ написан
    Комментировать
  • Как в dropbox получить прямую ссылку на файл?

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

    danial72
    @danial72
    flutter dart.
    Почему никогда не будет существовать ни одного нормально работающего визуального конструктора верстки
    1. Потому-что мониторы, с*ка разные.
    2. Потому-что технологии меняются и куча всего уже не рендерится на сервере
    3. Потому-что есть дизайнеры, которые не станут работать со строго одним набором компонентов (На тебе 5 кнопок, разных цветов текстур и теней, но только определенной формы и в определенном месте - так говорит конструктор)
    4. Потому-что они не нужны совсем. Если не умеешь верстать и будешь использовать подобный конструктор, получится лажа, просто потому-что нет понимания, как это будет показано пользователю. Если умеешь верстать, то ты в 3 раза быстрее будешь писать код, чем тыкать кнопочки и перетаскивать компоненты. Зачем тратить лишнее время ?
    HTML+CSS это не кодинг. Это описание того, что ты хочешь получить. Хватит знания английского и 2 недель неспешной верстки. Это не rocket science
    Ответ написан
    Комментировать