• Как сделать скошенный блок с бэкграундом?

    -moz-transform: skewY(-2deg);
    -webkit-transform: skewY(-2deg);
    transform: skewY(-2deg);
    Ответ написан
    4 комментария
  • Верстка с нуля: какие основные этапы работы?

    Vlad_IT
    @Vlad_IT Куратор тега Вёрстка
    Front-end разработчик
    Использую vscode+webpack+pug+scss+бэм. Из физических инструментов, основной моник: lg ultrawide 29um69g, рядом прикручен моник от ноутбука повешенный вертикально, подключенный через универсальный скаллер.

    0) Запускаю Spotify :-)

    1) Произвожу установку всех необходимых модулей для сборки. В моем случае у меня набор конфигураций для webpack (отдельные файлы для pug, scss, static и.т.д., выбираю что нужно).

    2) Запускаю avocode, загружаю в него макет. Определяю в нем переменные (в то же время записываю их, чтобы сразу кинуть в scss файл) для цветов, размеров шрифтов и.т.д. чтобы при получении кусочков кода из него, он сразу расставлял переменные.

    3) Запускаю VS Code, открываю нужную папку.

    4) Пишу размету на Pug. Пишу с БЭМ, если встречаю повторяющийся блок, то открываю файл _mixins.pug, в который пишу миксины для повторяющихся блоков, например товаров, пунктов меню, каких-то блоков и.т.д. Pug умеет делать циклы, это ускоряет сильно.

    5) Когда HTML готов, начинаю делать каркас. Если дизайн сделан по сетке, определяю контейнеры, колонки, строки в свои классы (не пишу в html тучи классов аля col-md-6, а пишу в SCSS инклуды в нужные мне блоки, типа @include make-col(2) и.т.д.).

    6) Экспортирую картинки из Avocode. Очень делается просто, указываю папку и просто кликаю экспорт и ввожу название файла и расширения. Преимущественно для иконок использую svg, если нет svg, то ищу эту иконку в интернете (дизайнеры редко рисуют иконки сами, но зато любят вставлять их не в векторе). Если иконка простая, могу сам ее в inkscape обвести, ну и если нет, то экспортирую png в размере (благо авокод это позволяет, если конечно дизайнер не вставил в исходном маленьком размере). Когда есть контакт с дизайнером, трясу его, ибо растр это плохо для иконок.

    7) Пишу стили блоков из страницы. На этом этапе можно на втором монике параллельно смотреть футураму или
    Арчера :-) Но чаще на широком монике слева браузер, справа VS Code, а на втором монике Avocode (может меняться местами с браузером). Мысленно нарезаю страницу на блоки. Для каждого блока (БЭМ) создаю отдельный scss файл (кто-то даже для элемента создает, но мне лень), из него сразу выписываю все селекторы. Иногда могу сначала выписать все селекторы со страницы (но так лучше не делать, т.к. во время работы может потребоваться изменить что-то в разметке), но чаще для одного блока выполняю этот пункт и за ним сразу выполняю пункт 8, потом для нового блока опять 7 и 8 и.т.д.

    8) Пишу css код вместе с Avocode, у него беру нужные мне параметры (а он уже подставил в них переменные), и вставляю в мой код. И параллельно сверяю со скрином макета используя вот это расширение https://chrome.google.com/webstore/detail/perfectp...

    9) Пишу адаптив. Я не могу привыкнуть к методологии mobile-first, поэтому пишу всегда сначала полную версию сайта. Я понимаю, что это чревато всякими проблемами и это типа не модно, но мне норм.

    10) Медиа-запросы пишу прямо в блоках, для каждого блока/элемента/модификатора может быть отдельный медиа-запрос. Но для начала определяю breakpoint'ы для разных экранов (чтобы их не было сотни разных), если использую Bootstrap, то беру его breakpoint'ы.

    11) Добавляю анимашки. Даже если заказчик не просил отдельно (и если не указал отдельно, что нельзя), он все равно будет доволен, а с animate.css+onscreen.js это вообще работа 10 минут. Сложные анимации обговариваю отдельно, чтобы не сделать ненужную работу.

    11) Все снова сверяю, пишу скрипты где надо. Для слайдеров в 99% случаев подходит slick (с доработками конечно, но там хорошее API), для других случаев могу написать свой.

    12) Сдаю заказчику и жду ответа сидя на тостере/пикабу.

    Это чисто мой опыт, опыт фрилансера, не знаю, как делают другие и не могу на 100% утверждать что это 100% правильный способ. Я так и не смог заставить свой конфиг webpack правильно вставлять спрайты svg.
    Надеюсь чем-то поможет мой ответ.
    Ответ написан
    7 комментариев
  • Как на jQuery скрыть div при определённом выборе радио кнопки?

    Alexufo
    @Alexufo
    противоречивый, сложный, весь компьютерный.
    первая ваша мыль дожна быть такой.
    "Блин, хочу чтобы по щелчку что то делалось"
    1) хочу чтобы что-то
    2) по щелчку
    3) что-то делалось

    Ответ:
    1) чтобы что-то
    api.jquery.com/category/selectors
    2)по щелчку
    api.jquery.com/click
    $( "#target" ).click(function() {
    alert( "Handler for .click() called." );
    });

    3) что то делалось бы,
    jsfiddle.net/Gy39P
    Надеюсь понятно, что по ссылке выше,
    $('li').click(function() {
          $(this).addClass('active'); // добавить класс
          $(this).siblings().removeClass('active');  // у всех соседей убрать , а меня не трогать. siblings офигенный селектор.
    });

    нужно применять класс active скрытому полю.
    Ответ написан
    2 комментария
  • Как запустить социальную сеть масштабного уровня?

    riot26
    @riot26
    <:З )~~
    Стоит подождать неделю после просмотра фильма "Социальная сеть", а вдруг глупые мысли исчезнут
    Ответ написан
    2 комментария
  • Как наиболее продуктивно сжимать картинки с помощью Gulp?

    edalis
    @edalis
    HTML, CSS, JS, Node.js
    https://www.npmjs.com/package/gulp-image - использую для png, gif, svg
    https://www.npmjs.com/package/gulp-smushit - для jpg, лучше жмет.

    Из онлайн сервисов не так давно появился еще один: Jpeg.io. Работает на основе Kraken.io.
    Ответ написан
    3 комментария
  • Какие плагины Gulp вы используете для front-end?

    Serj-One
    @Serj-One
    i'm sexy and i know it
    Кусок моего галпфайла. Что-то снабдил комментами.
    var connect      = require('browser-sync'); // livereload
    var sass         = require('gulp-sass'); // Кому что, я использую SCSS
    var csscomb      = require('gulp-csscomb'); // Обязательно!
    var cssmin       = require('gulp-cssmin');
    var imageop      = require('gulp-image-optimization'); // Лучшая альтернатива gulp-imagemin
    var concat       = require('gulp-concat');
    var uglify       = require('gulp-uglify');
    var plumber      = require('gulp-plumber'); // Не позволяет плагину умереть молча
    var autoprefixer = require('gulp-autoprefixer');
    var ngrok        = require('ngrok'); // Пробрасываем локальному серверу путь наружу для для заказчика
    var spritesmith  = require('gulp.spritesmith'); // Спрайты
    var notify       = require('gulp-notify'); // Уведомления
    var merge        = require('merge-stream'); // Деление таска на разные потоки

    Конечно, есть много полезного и кроме этого. Но сам верстаю в WebStorm, в котором огромное количество плюшек реализованы куда удобней, чем в галп-плагинах.
    Ответ написан
    8 комментариев
  • Что должен знать senior frontend developer?

    mannaro
    @mannaro
    Умею профессионально гуглить
    Понимание всего JS целиком и полностью. Всех его багов и фич.
    Знание ES6, ES2015, ES7, etc.
    На данный момент, думаю, необходимо знание всяких view-библиотек и целиковых MVC фреймворков: React, AngularJS (+ 2.0), Vue.
    Понимание взаимодействия браузера с клиентом, отличные познания в HTTP, WS.
    Понимание асинхронности, синхронности, синхронизации.

    Ну и само собой HTML, CSS, понимание и знание препроцессоров, постпроцессоров, css-modules, BEM. Умение настроить gulp/grunt/webpack.

    Умение пользоваться npm/yarn.

    Огромный багаж знаний в области библиотек. Какую можно подключить, а какую не стоит.
    Ответ написан
    Комментировать
  • Как прикрепить файл в ответном письме Contact Form 7?

    llgruff
    @llgruff
    PHP в прошлом, сейчас Scala. Не зовите меня на WP.
    В админке Contact Form 7 есть поле « Прикреплённые файлы », вот инструкция.
    Варианты использования:
    [your-file][your-another-file]
    /home/you/dir/dir/dir/fantasticpicture.jpg
    uploads/2013/08/08/boringguide.pdf
    Ответ написан
    4 комментария
  • Как добавлять класс при скролле?

    Можно еще так указать.
    $(window).scroll(function(){
        $('.main-nav-wrap').toggleClass('header-has-background', $(this).scrollTop() > 0);
    });
    Ответ написан
    2 комментария
  • Как сделать переход по ссылке только после второго клика?

    astralo
    @astralo
    для "спасибо" есть кнопка [Нравится]
    $(function () {
    		var boxes = $(".categoriesPage .categoryBox .textBox");
    		boxes.data("count", 0);
    		boxes.on("click", function (event) {
    			if (!+$(this).data("count")) {
    				$(this).data("count", 1);
    				event.preventDefault();
    				return false;
    			}
    		});
    	});
    Ответ написан
    Комментировать
  • Как сделать переход по ссылке только после второго клика?

    @IoannGrozny
    Front-end разработчик
    А теперь — самый короткий вариант. Просто запрещаем переход при первом клике =)
    $(".categoriesPage .categoryBox .textBox").one("click", false);
    Ответ написан
    2 комментария