• Как максимально ускорить вёрстку простых сайтов?

    ShadowOfCasper
    @ShadowOfCasper
    Middle User Interface Web Developer
    Используй bem-stack.
    1) 3 уровня переопределения
    2) Разделение на компоненты
    3) Разделение структуры, логики, поведения компонента по разным папкам
    4) Портабельность написанных компонентов очень велика. Можно свои компоненты (чекбоксы, радио, инпуты для файлов, касотмные селекты, ajax-функции для обмена данных с сервером...) смело переносить папкой в следующий проект и всё сразу будет работать.

    Применяется в системе в качестве сборщика enb. По умолчанию в яндексе прикрутили postcss для обработки css, так что установка препроцессоров - плохая идея - все они устарели для яндексового генератора проектов.
    Короче я заболтался, лови
    https://ru.bem.info/platform/tutorials/quick-start...
    Ответ написан
    Комментировать
  • Как подключить .js файл на macOS?

    ShadowOfCasper
    @ShadowOfCasper
    Middle User Interface Web Developer
    js файл исполняется через nodejs. Убедись что он у тебя установлен, желательно версии не ниже 4.
    https://nodejs.org/en/download/
    далее через npm ставишь nodemon
    npm i nodemon -g
    исполняешь файл командой nodemon test.js
    Ответ написан
    Комментировать
  • Как сжать js файлы эффективно?

    ShadowOfCasper
    @ShadowOfCasper
    Middle User Interface Web Developer
    gulp-uglify ничего не сжимает. Он переименовывает переменные. А jsmin сжимает
    https://www.npmjs.com/package/gulp-jsmin
    Ответ написан
    8 комментариев
  • Как можно запретить загружаться планшетную версию на смартфоне?

    ShadowOfCasper
    @ShadowOfCasper
    Middle User Interface Web Developer
    алЬбомном. Блин бесит.
    измени медиазапросы. Если у тебя мобильная до 480, измени на 767. Очевидно вроде
    Ответ написан
  • Как правильно проверять заполненность формы на Javascript?

    ShadowOfCasper
    @ShadowOfCasper
    Middle User Interface Web Developer
    У меня есть готовый модуль по БЭМ.
    Валидирует спам, проверяет по паттерну мыло, телефон, заполненность полей.
    https://github.com/WebKieth/Black-UI/tree/master/s...

    Демочка
    dropcogs.pro/Black-UI
    Ответ написан
  • Какой есть легковесный движок для игр?

    ShadowOfCasper
    @ShadowOfCasper
    Middle User Interface Web Developer
    Я бы посоветовал всякие прикольные ибилиотечки для webGL типа вавилон или threejs. Разработка трехмерной графики в канве.
    https://threejs.org/
    babylonjs.com

    UPD если говорить о графическом интерфейсе, то у threejs есть плюс - надстройка для манипулирования элементами на scene.
    https://github.com/dataarts/dat.gui
    Ответ написан
  • Как оптимизировать стартовый шаблон для верстки?

    ShadowOfCasper
    @ShadowOfCasper
    Middle User Interface Web Developer
    Видимо, о скаффолдинге ты не слышал.
    Ставь yeo man + yeogurt и не *би му-му. А лучше вообще на Bem stack

    Ссылки:
    yeoman.io
    https://habrahabr.ru/post/246349/

    И вот мой любимый ген:
    https://github.com/larsonjj/generator-yeogurt

    Ну а про БЭМ читай тут. Правда яваскрипт нужен хороший. Если плохо его шаришь - не стоит.
    https://ru.bem.info/
    Ответ написан
  • Как сделать input без рамок?

    ShadowOfCasper
    @ShadowOfCasper
    Middle User Interface Web Developer
    Да, это может быть инпутом.
    .inputGroup>input.inputGroup__field+i.inputGroup__icon
    i'm looking for в данном случае placeholder, централизованный и стилизованный через соответствующий псевдоселектор ::placeholder
    Ответ написан
  • Как сравнить строковые переменные js?

    ShadowOfCasper
    @ShadowOfCasper
    Middle User Interface Web Developer
    https://learn.javascript.ru/comparison
    Если у тебя i - число и b строка - они уже не будут равны. Несмотря на схожесть содержимого.

    И, блин, что значит не работает? Что тут вообще может работать?))) Даже если ты напишешь правильный оператор - ничего не заработает))) В тело условия нужно что-то положить, хотя бы console.log(i != b) - тебе правильный булеан в консоль упадёт
    Ответ написан
  • Какой select на Javascript использовать?

    ShadowOfCasper
    @ShadowOfCasper
    Middle User Interface Web Developer
    В моей библиотеке компонентов есть select, он тоже на jQuery, но там всего 21 строка. Можно вдуматься и конвертнуть в ванильный js.
    https://github.com/WebKieth/Black-UI/tree/master/s...
    Ответ написан
    Комментировать
  • Кроп как в твитере?

    ShadowOfCasper
    @ShadowOfCasper
    Middle User Interface Web Developer
    а в чём сложность самому написать? у нас блок с overflow:hidden. Внутри картинка. Это во-первых - не делай через background-image - это неправильно. Правильно зарусовать в блок картинку, а на картинку написать несколько коллбэков. 1) ontouchstart - хватать оффсеты картинки и передавать в transform: translate(). 2) По ontouchmove следить на позицией курсора и обновлять transform: translate().
    Я писал что-то подобное на одном проекте, постараюсь найти и сделать UPD
    Нашёл. Но тут ещё и scale есть, так как я делал приближалку для галереи - оно почти одинаково реализуется. Он тебе не нужен. Я выделнул кусок из своей галереи, так что просто установить чтоб сразу работал не выйдет - переопредели переменные.
    var swipeStart	 = 0,
    						swipeEnd	 = 0,
    						imagePosLeft = 0;
    						
    						var startCoordX = 0, startCoordY = 0, currentCoordX = 0, currentCoordY = 0, translateX = 0, translateY = 0;
        				
                           
                            var scale = 2.5,
                            translate = { x: 0, y: 0 },
                            startCoords,
                            currentCoords;
                            console.log(image);
                            var updateImgTransform = function (withScale) {
                                var translateX = currentCoords.x - startCoords.x + translate.x,
                                translateY = currentCoords.y - startCoords.y + translate.y;
                                if (withScale) {
                                    image.css({"transform":"scale(" + scale + ") translate(" + translateX / scale + "px, " + translateY / scale + "px)"});
                                } else {
                                   image.css({"transform":"translate(" + translateX + "px, " + translateY + "px)"});
                                }
                            };
                            
                            var ontouchstart = function (e) {
                                startCoords = currentCoords = {
                                    x: e.originalEvent.touches[0].clientX,
                                    y: e.originalEvent.touches[0].clientY
                                };
                            
                                updateImgTransform(true);
                                image.on("touchmove", ontouchmove);
                                image.on("touchend", ontouchend);
                            };
                            
                            var ontouchmove = function (e) {
                                image.addClass('looped');
                                currentCoords = {
                                    x: e.originalEvent.touches[0].clientX,
                                    y: e.originalEvent.touches[0].clientY
                                };
                            
                                updateImgTransform(true);
                            };
                            
                            var ontouchend = function (e) {
                                updateImgTransform(true);
                            
                                translate.x += currentCoords.x - startCoords.x;
                                translate.y += currentCoords.y - startCoords.y;
                            
                                image.off("touchmove", ontouchmove);
                                image.off("touchend", ontouchend);
                            };
                            
                            image.on("touchstart", ontouchstart);
    Ответ написан
  • Modx галерея - как сделать кнопку смотреть все фото?

    ShadowOfCasper
    @ShadowOfCasper
    Middle User Interface Web Developer
    Этот чанк - что вы скопировали - 1 item портфолио. Для подгрузки ещё столбцов с помощью ajax я бы на вашем месте использовал pdoPage.
    https://docs.modx.pro/components/pdotools/snippets...
    Ознакомьтесь с разделом параметров. Также возможна установка пагинации, как альтернативный вариант.

    UPD В разметке у вас вообще какой-то трэш. Проверьте вывод чанков.
    47d6c2a20d2a47a7a784a4abc3401099.png
    Ответ написан
    4 комментария
  • Почему появляется полоса прокрутки в адаптивке?

    ShadowOfCasper
    @ShadowOfCasper
    Middle User Interface Web Developer
    Потому что заходить в devTools, и начиная с верхних блоков даёшь болку overflow-x: hidden. Если полоса пропадает, значит косяк в этом блоке. Так опускаешься всё ниже и ниже, пока не найдёшь косяк. Учись дебажить
    Ответ написан
    1 комментарий
  • Как осуществить связь между домашним и рабочим компьютером?

    ShadowOfCasper
    @ShadowOfCasper
    Middle User Interface Web Developer
    Я использую на этот случай git с хуками. Посредником выступает удалённый сервер. Подходит для проектов в стадии постпродакшена
    https://habrahabr.ru/post/127213/
    Ответ написан
    Комментировать
  • Почему прерывается поток трансляции в audio?

    ShadowOfCasper
    @ShadowOfCasper Автор вопроса
    Middle User Interface Web Developer
    В firefox всё работало, проблема была только в chrome. Перековыряя весь stackoverflow я наткнулся на решение. buzz.jaysalvat.com
    Собственно запилил скрипт по докам и всё пашет грамотно и без косяков
    Ответ написан
    Комментировать
  • Сработает ли трюк динамической подставки .url в ajax отправке письма?

    ShadowOfCasper
    @ShadowOfCasper
    Middle User Interface Web Developer
    Во-первых, при добавлении каждой новой формы ты будешь открывать скрипт и кидать в $() новый идентификатор. Удобно?
    Во-вторых ^*%^$^*&WTF - ты серьёзно решил для каждой формы писать отдельный php? Ну флаг в руки конешн...
    В-треьих, тебе бы валидацию добавить, раз уж по сабмиту аяксишь, перед аяксом валидируй правильность заполнения полей, установи защиту от спама....

    Как пример кину тебе небольшой скрипт ajax, который я применял в последнем проекте для валидации отправки номеров телефонов и мыл. Скрипт написан с учётом того что форм на странице может быть много.

    var ajaxFastForms = function (){
        var moduleName = 'fastform';
        var fastform = $('.'+moduleName+':not(.'+moduleName+'--calltracker)');
        fastform.submit(function(e){
            e.preventDefault();
            var thisForm = $(this),
            thisSubmitter = thisForm.find('.'+moduleName+'__submit'),
            thisField = thisForm.find('.'+moduleName+'__input'),
            thisFieldValue = thisField.val(),
            thisFieldSpamValue = thisForm.find('.'+moduleName+'__spamkiller').val();
            
            if(thisFieldSpamValue === ''){
                //если скрытое поле пусто
                if(thisFieldValue != ''){ //если форма воода заполнена
                    var regNumber = new RegExp("^[0-9]{11}");
                    var regMail = new RegExp("^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$");
                    if( regMail.test(thisFieldValue) || regNumber.test(thisFieldValue)){
                        //если проходит тесты паттернов
    
                        var url = (typeof thisForm.attr("action") == 'undefined') ? "[[~[[*id]]]]" : thisForm.attr("action"); //берём урлу страницы, если таковая есть в action
    
                        //формируем запрос к серверу
                        $.ajax({
                            url: url,
                            type: 'POST',
                            data: thisForm.serialize(),
                            success: function(response){
                                notie.alert(1,'Форма успешно отправлена. Наши менеджеры свяжутся с вами в ближайшее время', 4);
                            }
                        }).fail(function(error){
                            console.log(error);
                            notie.alert(3, 'Возникла ошибка на сервере<br> Очистите кэш браузера,  перезагрузите страницу и попробуйте снова', 5);
                        });
    
    
                    }else{//если не проходит тесты паттернов
                        notie.alert(2,'В форме содержатся ошибки.Проверьте правильность заполнения полей:<br> вводите номер только цифрами, например 89991112233',5);
                    }
                }else{
                    //если Форма ввода не заполнена
                    notie.alert(2,'Форма ввода не заполнена',2.5);
                };
    
            }else{
                //если скрытое поле заполнено
                notie.alert(3,'Валидация на СПАМ не пройдена.<br>Перезагрузите страницу и попробуйте снова',2.5);
            };
        });
    }
    module.exports = ajaxFastForms;

    Тут на самом то деле не всё гладко. Можно было switch case заюзать. Но я плохо с ними знаком
    UPD
    Там url может показаться странным - [[~[[*id]]]] - это ссылка на текущий документ в MODX. Просто backend на MODX и писал под него. На странице вызывается плагин отправки FormIt, следовательно и скрипт находится в моём случае по текущему адресу. В твоём случае лучше всего будет писать url php-скрипта в action формы и подхватывать его в url функции ajax.
    Ответ написан
    6 комментариев
  • Где найти хороший гайд по реализации подписки на сайте?

    ShadowOfCasper
    @ShadowOfCasper
    Middle User Interface Web Developer
    Вообще в каждой CMS есть плагины для рассылки подписок - у каждой своя документация. Но если на php, то пишешь скрипт отправки, в получателя (аргумент функции mail) кидаешь массив, в массив добавляешь мылы каждого нового подписчика, а сам скрипт отправки либо заводишь сам - запросом, когда надо. Либо просто кидаешь скрипт в crontab.
    Ответ написан
    4 комментария
  • Нарушаю ли я методологию БЭМ таким каскадом стилей?

    ShadowOfCasper
    @ShadowOfCasper
    Middle User Interface Web Developer
    Да. Вот как нада
    .header
        .header__container
          .header__row
            .header__logo.logo
              img.logo__image(src="")
            header__contact-info.contact-info
              ul.contact-info__list
                li.contact-info__item.item
                  a.item__link(href="") info@protector.com.ua
                    i.item__icon.item__icon--mts
                li.item
                  a.item__link(href="") info@protector.com.ua
                    i.item__icon.item__icon--kyivstar
                li.item
                  a.item__link(href="") info@protector.com.ua
                    i.item__icon.item__icon--life
              ul.contact-info__list
                li.item
                  a.item__link(href="") info@protector.com.ua
                    i.item__icon.item__icon--skype
                li.item
                  a.item__link(href="") info@protector.com.ua
                    i.item__icon.item__icon--mail
                li.item
                  a.item__link(href="") info@protector.com.ua
                    i.item__icon.item__icon--phone
              ul.contact-info__list
                li.item
                  a.item__link(href="") info@protector.com.ua
                    i.item__icon.item__icon--address

    блок__элемент--модификатор
    Так пишут на западе. Как вариант - можешь глянуть на компоненты blaze_css. Он написан на компонентном БЭМе
    Ответ написан
    Комментировать
  • Как разобраться с npm?

    ShadowOfCasper
    @ShadowOfCasper
    Middle User Interface Web Developer
    Как всё запущено. Пациент скорее мёртв чем жив...

    sudo apt-get remove node npm
    sudo apt-get purge node npm
    sudo apt-get update && sudo apt-get upgrade
    curl -sL https://deb.nodesource.com/setup_7.x | sudo -E bash -
    sudo apt-get install -y nodejs
    Ответ написан
    Комментировать
  • Как в node.js добавить иконку в трей ubuntu, windows и тд..?

    ShadowOfCasper
    @ShadowOfCasper
    Middle User Interface Web Developer
    WAT? Я немного не понял, состояние чего именно ты хочешь видеть в апплете nodejs? Это платформа, заставляющая js работать на сервере. Тут можно отслеживать разве что состояние js-модулей, которые исполняются на сервере. Тут всё реализуется обработкой ошибок, они выводятся в терминал, от которого был заведён процесс. Процесс может быть заведён от браузера, тогда ошибки можно возвращать в браузер. Он может быть заведён от electron (ссылку выше на эту фичу тебе скинули).
    Обработка ошибок пишется в самом js-модуле. Мониторить nodejs... ну как бы это платформа а не исполняемый процесс чтоб его мониторить.
    Ответ написан
    Комментировать