• Какой workflow front-end разработки у вас?

    nonlux
    @nonlux
    Расклад такой:

    1. Возьми docker контейнер с настроенным окружением для разработки.
    Это удобно если вдруг разработчик станет не один, слетит система, поменяешь рабочее место. Один раз настроил и забыл )
    docker запускает:
    - веб-сервер (можно nginx, можно внутри gulp, все зависит о задачи)
    - livereload сервер, через gulp ( f5 нажимать каждые 3 секунды - это больно
    - gulp watchers ( в ручную компилить всякую хню, запускать тесты скучно )

    2. Запусти vim ( или любой твой любимый редактор)
    3. пиши, бл@#ь, код:
    - less, sass и прочее по мне гораздо удобнее чистого css, меньше пишешь больше кода получаешь.
    - не пиши голый html, используй шаблонизатор любой какой удобнее, я пользуюсь twig, но и простой {{mustache }} подойдет
    4. пользуйся git. И пользуйся им часто.
    - для приветных проектов поставь gitlab
    - используй gitworkflow, ну или сделай хотя бы 2 ветки: например master и prodaction (об этом позже)
    5. CI
    - работая ты все равно допустить кучу ошибок. Проверка синтаксиса, валидация по стандартам, тесты - это все поможет тебе не облажаться.
    - если ты будешь это делать сам потеряешь кучу времени просто на то что бы запускать и проверять всю свою работу. ci сервер поможет тебе убрать эту рутину из свое жизни.
    6. Кроссбраузенрость
    - используй browserstack ( или аналоги) для просмотра результатов своей работы
    - ну уж если нашел ошибку бери реальный браузер ( или в виртуалке) занимайся отладкой
    - получение скриншотов легко подключается к ci
    - а так же из коробки работает и с локальными серверами
    7. Обратная связь с заказчиком
    - для ветки master (да и вообще для любой другой ветки) в git ты легко с помощью ci сервера + docker можешь поднимать сайт c последними обновлениями кода
    - делай это у себя и можешь не боятся, что заказчик сможет забрать твою работы и забыть заплатить
    8. Деплой
    - я просто использую на нужном сервере gitlab-ci-worker и получаю все аналично п.7
    - но для этого использую только ветку prodaction, в которую выкладываю стабильные изменения по готовности
    - просто хостинг - все, что угодно ( shell, ansilbe + ssh ) через ci server
    - И да не забудь что для prodaction надо бы все ассеты по сжимать ( да, да я про ci)
    9 Be happy
    Выкинь рутину, и делай то что тебе нравится. Пиши код))

    P.S.
    Это не наставление как надо работать, не реклама инструментов. Это описание моего workflow.
    Ответ написан
    8 комментариев
  • Есть ли такой сайт, где уже свёрстаны psd шаблоны и выложены исходники?

    evgeniy8705
    @evgeniy8705
    Повелитель вселенной
    Ответ написан
    Комментировать
  • Где хранить HTML и CSS для JS?

    IonDen
    @IonDen
    JavaScript developer. IonDen.com
    Ну если вы уж так сильно хотите обойтись без шаблонизатора, то можно сделать так: jsfiddle.net/ph2xnbfv/1
    var html =
        '<div class="entry">' +
        '<h1>{{title}}</h1>' +
        '<div class="body">' +
        '{{body}}' +
        '</div>' +
        '</div>';
    
    var title = "Vasya";
    var body = "Pupkin";
    
    var result = html.replace("{{title}}", title);
    result = result.replace("{{body}}", body);
    
    console.log(result);
    Ответ написан
    3 комментария
  • Где посмотреть примеры качественного кода вёрстки сайтов, лендингов, веб-приложений?

    paulradzkov
    @paulradzkov
    Дизайнер, верстальщик, начальник отдела UI
    Первый путь.
    На Гитхабе поискать по ключевым словам (BEM, SMACSS, OOPCSS) — найдутся бойлерплейты и стартеркиты, которые по определению должны быть хорошего качества.

    Можно искать глубже, по упоминанию в исходном коде этих ключевых слов — найдутся тысячи проектов, но тут сложнее определить, что качественнее.

    Второй путь.
    Искать в Гугле людей, которые пишут про BEM, SMACSS, OOPCSS и прочих крутых фронтендеров. Искать их профили на гитхабе, изучать их проекты. Если они пишут про методологии, то они явно их используют в работе.
    Ответ написан
    Комментировать
  • Какие актуальные технологии фронтенда?

    teotlu
    @teotlu
    Навёрстываю упущенное
    Препроцессоры (LESS, SCSS, SASS, Stylus), всякие фреймворки типа Angular и React.js, сборщики типа Grunt или Gulp. Node.js, чтобы это всё замутить в автоматическую сборку. Bower ещё какой-нибудь.
    Нативный JavaScript — это основное и неотъемлемое требование.

    Разумеется, нужно хорошо уметь верстать. Для современных браузеров уже не настолько актуально, но всё-таки стоит использовать спрайты или иконочные шрифты. Я предпочитаю второе.
    Ответ написан
    Комментировать
  • Как убрать .html в URL?

    swipeshot
    @swipeshot
    Учусь на ошибках.
    RewriteEngine on
    
    RewriteBase /
    
    RewriteCond %{THE_REQUEST} ^[A-Z]{3,9}\ /([^.]+)\.html\ HTTP
    
    RewriteRule ^([^.]+)\.html$ http://www.gral.ru/$1 [R=301,L]
    
    RewriteCond %{REQUEST_URI} !(\.[^./]+)$
    
    RewriteCond %{REQUEST_fileNAME} !-d
    
    RewriteCond %{REQUEST_fileNAME} !-f
    
    RewriteRule (.*) /$1.html [L]


    Копипасьте сразу в htaccess
    Ответ написан
    7 комментариев
  • Gulp нужно постоянно устанавливать заново в новый проект или нет?

    LeonidKuznecov
    @LeonidKuznecov Автор вопроса
    Front-end разработчик.
    "use strict";
    var gulp = require('gulp'),
       concatCSS = require('gulp-concat-css'),
       rename = require('gulp-rename'),
       watch = require('gulp-watch'),
       notify = require('gulp-notify'),
       autoprefixer = require('gulp-autoprefixer'),
        livereload = require('gulp-livereload'),
        connect = require('gulp-connect'),
        minifyCSS = require('gulp-minify-css');
    
    // gulp connect и livereload
    gulp.task('connect', function() {
      connect.server({
        root: 'app',
        livereload: true
      });
    });
    // gulp connect и livereload
    
    // Общий таск для css вызываеться командой gulp
    gulp.task('css', function () {
      gulp.src('css/*.css')
        .pipe(concatCSS('bundle.css'))
        .pipe(autoprefixer('last 15 version'))
        .pipe(minifyCSS())
        .pipe(rename('bundle.min.css'))
        .pipe(livereload({ auto: false }))
        .pipe(notify("Done!"))
        .pipe(gulp.dest('app/css/'))
        .pipe(connect.reload());
    });
    // Общий таск для css вызываеться командой gulp
    
    //Общий таск для html вызываеться командой gulp
    gulp.task('html', function () {
      gulp.src('app/index.html')
        .pipe(connect.reload());
    });
    //Общий таск для html вызываеться командой gulp
    
    // Таск служки css файлов, любые изменения будут произведены вызываеться командой gulp watch
    gulp.task('watch',function () {
     gulp.watch('css/*.css',['css'])
     gulp.watch('app/index.html',['html'])
    });
    // Таск служки css файлов, любые изменения будут произведены вызываеться командой gulp watch
    
    // Таск по умолчанию
    gulp.task('default', ['connect','html','css','watch']);
    // Таск по умолчанию
    
    // Таск обьеденения всех css файлов вызываеться командой gulp concatCSS
    gulp.task('concatCSS', function () {
      gulp.src('css/*.css')
        .pipe(concatCSS('bundle.css'))
         .pipe(autoprefixer('last 15 version'))
        .pipe(notify("Done!"))
        .pipe(gulp.dest('app/css'));
    });
    // Таск обьеденения всех css файлов вызываеться командой gulp concatCSS
    
    // Таск минификации полученного обьедененного css файла вызываеться командой gulp minifyCSS
    gulp.task('minifyCSS', function () {
      gulp.src('css/*.css')
        .pipe(minifyCSS())
        .pipe(rename('bundle.min.css'))
         .pipe(autoprefixer('last 15 version'))
        .pipe(notify("Done!"))
        .pipe(gulp.dest('app/css'));
    });
    // Таск минификации полученного обьедененного css файла вызываеться командой gulp minifyCSS
    
    
    
    // Создание общего таска для создания двух файлов, concat и minify
    
    // gulp.task('css', function () {
    //     gulp.src('откуда берем')
    //     .pipe(concatCSS('название файла'))
    //     .pipe(gulp.dest('куда сохраняем конкат версию'))
    //     .pipe(minifyCSS())
    //     .pipe(rename({
    //         suffix: '.min'
    //     }))
    //     .pipe(gulp.dest('куда сохраняем мин версию'));
    // });


    А вот сама ошибка

    Error: Cannot find module 'lodash._isnative'
    at Function.Module._resolveFilename (module.js:338:15)
    at Function.Module._load (module.js:280:25)
    at Module.require (module.js:364:17)
    at require (module.js:380:17)
    at Object. (C:\WebDev\test\node_modules\gulp-livereload\node_modules\lodash.assign\node_modules\lodash._basecreatecallback\node_modules\lodash.bind\node_modules\lodash._createwrapper\node_modules\lodash._basebind\node_modules\lodash._basecreate\index.js:9:16)
    at Module._compile (module.js:456:26)
    at Object.Module._extensions..js (module.js:474:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:312:12)
    at Module.require (module.js:364:17)
    Ответ написан
    Комментировать
  • Какое средство разработки выбрать для создания мобильных игр на web-технологии?

    @ikeagold
    www.cocos2d-x.org (на нем: Zenonia 5, Brave Frontier, Plague Inc., Guns'n'Glory WW2, Star Wars: Tiny Death Star, Avengers Alliance - Marvel)
    Хороший список сравнения и список html5-game-engines на GitHub'e.
    Ответ написан
    Комментировать
  • Как сортивать данные по количеству ошибок?

    Alexufo
    @Alexufo
    противоречивый, сложный, весь компьютерный.
    количество ошибок поставьте первым символом и сортируйте.
    // 1 Mexino Maxino
    // 1 Mexino Mexico
    // 2 Mexino Mexann
    Ответ написан
    1 комментарий
  • Как найти совпадения в массивах разной длинны?

    @antonowano
    Профессиональный самоучка
    var ar1 = ['white', 'red', 'black', 'orange'];
    var ar2 = ['white', 'black'];
    var res = [];
    var res2 = [];
    
    for (var i = 0; i < ar1.length; i++) {
        if ( ar2.indexOf(ar1[i]) !== -1 ) {
            res[res.length] = ar1[i];
        }
    }
    
    // или
    
    for (var i = 0; i < ar1.length; i++) {
        for (var j = 0; j < ar2.length; j++) {
            if (ar1[i] == ar2[j]) {
                res2[res2.length] = ar1[i];
            }
        }
    }
    
    alert(res);
    alert(res2);
    Ответ написан
    Комментировать
  • Как правильно оформить js скрипт?

    Rainum
    @Rainum
    Если вопрос на счет форматирования, лучше делать так (убрал лишнее объявление переменных):

    var aa = document.getElementById('qwe');
    var cc = document.getElementById('vce');
    
    aa.onmouseover = function () {
      cc.style.display = 'block';
    };
    
    aa.onmouseout = function () {
      cc.style.display = 'none';
    };
    Ответ написан
    6 комментариев