Ответы пользователя по тегу JavaScript
  • Как правильно вынести настройки nodejs сервера в отдельный файл?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    в дополнение к вышесказанному предлагаю использовать ENV переменные для хранения той части конфигов, которое зависит от окружения (хосты, порты, пароли).
    Ответ написан
    Комментировать
  • БЭМ. Не понятие основных понятий - блок, элемент, модификатор?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    Получается что блок это чисто Namespace для других сущностей.

    как-то так да. Вот только у вас пример не правильный.

    <div class="blog"> 
       <div class="header header_blog">Заголовок блога</div>
       <div class="date date_blog">19.19.1900</div>
       <div class="body body_blog">текст</div>
    </div>
    <div class="comment"> 
       <div class="comment_date date">19.19.1900</div>
       <div class="comment_body body">текст</div>
    </div>


    Вот так правильно.

    Далее, помимо того что блок это "неэмспейс" он так же может содержать базовые стили, но не размеры и позиционирование. За это отвечают элементы.

    Грубо говоря.

    .blog{}
    .blog__date{} // задает положение даты в... блоге? В блоге нет дат, даты есть у постов, так что выносим это в .post
    .blog__header{} // задает положение заголовка, ширина, паддинги, маргины
    .blog__body{} //задает положение содержимого в блоге, только положение на странице, ширина, паддинги, маргины
    Ответ написан
    7 комментариев
  • Что такое "отказ от двустороннего датабиндинга"?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    есть датабиндинг, observable отношение между одним компонентом и другим. Например:

    var model = {
        title: 'Some Title'
    };
    
    function view(container) {
        var el = container.querySelector('[data-bind="title"]');
        // следим за изменениями
        Object.observe(model, (changes) => {
            if ('title' === changes.name) {
                // обновляем при изменении связанное значение у другого компонента
                el.innerHtml = model.title;
            }
        }, ['update'])
    }


    В этом случае если каким-то чудом наш элемент вдруг поменяет содержимое (ну а вдруг?) то значение внутри модели не поменяется, оно не зависит от другого компонента.

    В случае же с двусторонним датабиндингом изменения происходят с двух сторон. Грубо говоря с двух сторон стоят обзерверы которые меняют значения. И это говорит нам о том что изменения, поток данных, идут в обе стороны, потому этот вид биндингов называется двусторонним.

    Сами по себе биндинги это круто, и это то что делает современные фреймворки такими крутыми - позволяют реагировать на изменение данных и обновлять к примеру view приложения, без необходимости писать огромные куски кода отслеживающие изменения - все за нас делает фреймворк.

    Проблема с двусторонним дата биндингом очень простая - систему построенную с активным применением двустороннего биндинга крайне тежело отлаживать. Приведу простой пример. Предположим что у нас есть компонент A и компонент B. У компонента A есть свойство foo которое содержит какую-то строку, компонент B содержит свойство bar и у нас установлено двустороннее связывание между этими двумя свойствами.

    Фреймворк гарантирует нам то, что если одно из этих полей поменяется, он поменяет другое, так что A.foo всегда будет равно B.bar. Вот только это создает такую проблему, теперь оба компонента должны учитывать что значение foo и bar могут поменяться в любой момент, и не понятно кто инициировал изменения. Спокойно можно войти в состояние когда A меняет состояние, B синхронизируется и реагирует и снова меняет состояние, тогда реагирует A, и может быть появляется какие-то другие связанные компоненты. То есть мы можем быстро и просто схватить рекурсию. Если у вас на этой основе построена бизнес логика - то вам будет крайне сложно потом поддерживать эту систему, дебажить ее ад.

    Грубо говоря помимо того что дебажить эту систему становится тяжело, у нас появляется неявная зависимость между A и B, им нужно знать что они могут поменять друг дружку. А все неявное это не очень хорошо.

    Что можно сделать, можно разложить двустороннюю связь на составляющие. Односторонний биндинг из A в B и навесить ивенты если один из компонентов что-то меняет. В этом случае вы всегда можете поставить бряку и точно будете знать кто что поменял. Поддерживать такую систему куда проще.
    Ответ написан
    7 комментариев
  • Как спроектировать связи в MongoDB?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    Решил БД карточной игры перевести на MongoDB

    Зачем? Если у вас есть хотя бы 10% вероятность того что между записями появятся отношения/связи, то монга вам не подходит.

    Монгу стоит использовать исключительно для хранения денормализованных данных. То есть обычно все хранят в реляционной базе и потом делают агрегации данных в денормализованном виде что бы ускорить выборки. В этом случае у нас может быть одна база данных в нормализованном виде (mysq/postgres/etc) и много инстансов монги из которой данные только читаются, но ничего не пишется (кроме как агрегации инициированные изменением данных в реляционной бд.

    И то это нужно только если у вас возникают проблемы с реляционной базой (много джойнов например приходится делать в случае сложных выборок). Если у вас один-два джойна то расставить индексы и не париться.

    p.s. говорит человек который не понаслышке знает о том, насколько плохо живется если на проекте монга была выбранна основным хранилищем данных при наличии связей между ними.
    Ответ написан
    3 комментария
  • Где можно посмотреть пример готового сайта на Express.js?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    разбития его по шаблону MVC.

    Uncle Bob - Agility and Architecture. MVC работает только в маленьких масштабах (кнопка, инпут). MVC не является архитектурой приложения.

    но это не дает понимания архитектуры

    фреймворк это не архитектура, это фреймворк, инструмент, который решает общие проблемы возникающие у разработчиков (надо например авторизацию запилить, маршрутизацию и т.д.)

    Где можно посмотреть готовый пример

    github
    Ответ написан
  • Каковы плюсы использование jade в разработке одностраничных приложений?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    плюсы те же что и любых других шаблонизаторов. Отделение разметки от кода. Ограничения разработчика, что бы тот хотя бы задумался перед тем как запихнуть логику в шаблон.

    в случае jade мы еще получаем довольно минималистичную разметку, по сравнению с html. Ну и да, обычно его компилят в js и потом уже используют на клиенте.
    Ответ написан
    Комментировать
  • Какие преимущества использования Webpack + Gulp?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    webpack бандлер и больше ничего не должен уметь делать. То что там есть плагины которые позволяют запускать таски это прикольно, но все же нет.

    Лично у меня gulp используется для оркестрации всем что у меня используется, запуск тестов, подготовка билда (упаковка и т.д.) ну и т.д. Часть тасков не связана с бандлингом и потому пихать это в webpack что-то не особо хочется.
    Ответ написан
  • Angular.js нужно учить со второй версии или начать с первой?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    Angular 1.5 задумывался авторами как переходная точка, что бы проще мигрировать людей с первого на второй. Так что учите angular 1.x и соблюдайте стайл гайд. Ну и почитайте про MVC, про компонентный подход к разработке на Angularjs. (отказ от двустороннего датабиндинга, данные должны идти только в одном направлении, упор на классическую схему MVC).
    Ответ написан
    Комментировать
  • Что можно потерять отказавшись от компонентных фраймворков?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    но прежде, хочется узнать - что я при этом потеряю

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

    Что у меня не будет работать так, как работает у bs3?

    все. У вас не тот же уровень знаний что у чуваков из твиттера который разрабатывали TB, у вас нет огромнейшего комьюнити которые делают регулярные баг репорты и пул реквестят ну и вы один и жизнь у вас одна.

    Если вам нужно сделать то что уже есть в бутстрапе - проще подключить стили этого конкретного компонента и не париться. Другое дело что весь бутстрап подключать для этого не надо.

    как правильно изменить стили bs3, чтобы было по моему

    тут зависит от того что вы хотели сделать. У меня скажем нет особо проблем с тем, что бы переопределить стили, но некоторые вещи я сразу делаю с нуля а не пытаюсь извращаться со стилями бутстрапа. Вопрос баланса. Если вас не удовлетворяет компонент только чуть чуть - можно юзать компонент. Если переделка стилей на вскидку выходит нам в довольно большое количество времени - либо ищем что-то более подходящее либо вообще пишем сами.

    Зависит от задачи словом.
    Ответ написан
    1 комментарий
  • Как пользоваться аргументом thisArg в методе ForEach?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    что вторым аргументом можно добавить объект

    Найдите отличие

    schedule.forEach(highlight, $table);
    Ответ написан
    1 комментарий
  • Как реализовать адаптивную сетку на flexbox без медиа выражений?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    codepen.io/anon/pen/rOjXmx - что-то в этом духе.

    Правильно ли использовать flexbox + медиа выражения?


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

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    "matrix(1,0,0,1,0,0)".replace(/,\d+\)$/, ',80)');

    либо если хотите менять любой индекс:

    "matrix(1,0,0,1,0,0)".replace(/\(([\d\,]+?)\)$/, function (m, params) {
        params = params.split(',');
        params[5] = 80; // можно менять любой индекс
    
        return '(' + params.join(',') +  ')';
    });
    Ответ написан
    2 комментария
  • Как создать admin панел на Angular js. Что для этого нужно?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    но не где не могу найти информации по этому.


    Напишите список того что должно быть в вашей админке. Делайте по списку.
    Ответ написан
    2 комментария
  • Как справляется Google с индексацией сайтов на AngularJS и других фреймворках?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    гугловый краулер умеет использовать JS, но только он судя по всему это и умеет. Ну и да, есть куча подводных камней.

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

    Ну и еще вариант - тупо пропиать на уровне вэб сервера - если зашел бот - отдать ему снапшет.

    для генерации снапшетов можно либо поднять у себя phantom.js либо воспользоваться сервисами типа https://prerender.io/
    Ответ написан
    Комментировать
  • Без каких плагинов не может обойтись современная front-end разработка под gulp?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    Есть решения?


    50 милисекунд это не так уж много. Средний человек реагирует на событие после примерно 200 милисекунд. Так что либо вы привели не верные цифры, либо не знаю.

    В целом вам нужно почитать в wiki галпа (или в его README) про инкрементную сборку и решения вроде gulp-cache и gulp-newer. Либо хранить все файлы в памяти и уменьшить количество чтений с диска, либо компилировать только измененные файлы. Ну и неплохо совместить эти два подхода).
    Ответ написан
    1 комментарий
  • Какой основной стек технологий на front-end SPA ваша команда использовала за последний год работы на дядю (офис)?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    та что в гугле, не лишена маркетинговых трюков, да и свежесть не та.


    ashleynolan.co.uk/blog/frontend-tooling-survey-201...

    Собственно моя команда использует Angular уже где-то два с половиной года, и в принципе мы довольны. Особенно радует Angular2, который судя по тому что можно видеть, уже не особо страдает болячками 1.x версии. Не вижу смысла переходить на ReactJS, хотя он в списке потыкать (уже год). Основная боль - привить разработчику компонентный подход в Angular и с таким раскладом жить становится не так уж плохо. Особенно с ES6/7 в варианте babel. На Ember смотрел но опять же не вижу смысла. Кроме ember-data там для меня нет ничего особо интересного.

    Для сборки ранее использовали просто gulp и кучу тасков, сейчас это scss/less в зависимости от проекта и webpack в качестве бандлера. Я все надеюсь перевести все на jspm + system.js но увы пока ранова-то.

    Для тестов пока используется mocha, потихоньку хочется перейти на cucumber.js (на бэкэнде используем Behat, так что подружить их вместе и гонять одни и те же фичаспеки кажется логичным).
    Ответ написан
    8 комментариев
  • Как отправлять защищенный/шифрованный POST запрос между двумя серверами?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    вы всегда можете использовать свой сертификат для организации шифрованного соединения. Это есть и в PHP и в Node.js. Гуглить - TLS в контексте того что вы используете.

    Хороший пример - организация работы с серверами APNS (Apple push notifications). Можете посмотреть как реализован клиент для оного, они есть и для ноды и для пыха.

    Но поскольку речь идет о POST запросах, то все сводится к старому доброму HTTPS со своими сертификатами.
    Ответ написан
    Комментировать
  • Как центрировать изображение по ширине/высоте родителя?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    Flexbox-ы, просто, эффективно, на css, без разницы знаете ли вы размеры блока или нет...
    Ответ написан
    2 комментария
  • Можно ли с помощью javascript детектить загружаемые ресурсы?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    Нет, во всяком случае с определенными оговорками можно (стили и js загружаются средствами JS, тогда мы можем парсить css и трекать сколько у нас загрузилось чего и сколько еще надо загрузить).

    Возможно в контесте API браузеров для экстеншенов что-то есть, но именно средствами DOM API вы это не сможете нормально сделать.
    Ответ написан