Задать вопрос
  • Как можно запретить загружаться планшетную версию на смартфоне?

    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... ну как бы это платформа а не исполняемый процесс чтоб его мониторить.
    Ответ написан
    Комментировать
  • Как поставить портативный gulp?

    ShadowOfCasper
    @ShadowOfCasper
    Middle User Interface Web Developer
    Тогда нужно просто носить проект вместе с node_modules, вот и всё. А установка и настройка - я бы это так не назвал. Ничего не надо настраивать, а установка ограничивается командой npm i. И всё благодаря package.json
    Ответ написан
  • Как правильно перенести WordPress на другой сервер?

    ShadowOfCasper
    @ShadowOfCasper
    Middle User Interface Web Developer
    Конфигурации серверов должны полностью совпадать по версиям. От ngnix до php, mysql и их расширений. Конфигурация должна быть одинаковой, ну или как можно более схожей. Таков WordPress - надо было ставить MODX.
    А вообще в конфиге включается показ ошибок. Очень советую тебе применить данную функцию)))
    Ответ написан
  • Где можно взять бесплатно или напрокат книги по веб-технологиям?

    ShadowOfCasper
    @ShadowOfCasper
    Middle User Interface Web Developer
    По книгам не огонь учиться. Они быстро становятся неактуальны, так что я бы советовал не выёживаться и учиться вебу в вебе.
    https://htmlacademy.ru/ для начала.
    Если англ на уровне, то можно сразу на https://www.codeschool.com/ - там часть курсов по вебу бесплатны.
    Ответ написан