• Как вы создаёте адаптивный дизайн и всегда ли это нужно?

    SuperMax899
    @SuperMax899
    лучшее "спасибо" - кнопка "решение вопроса"
    На абстрактный ответ мог бы ответить абстрактно, но отвечу с вариантами.
    В зависимости от задачи, я опишу не для сервисов или больших сайтов\ресурсов.
    Советую так же прочесть вот эту статью: frontender.info/building-a-better-responsive-website

    Обычно использую bootstrap, который дополняю своими стилями, к примеру, сразу удаляю\перекрываю .row с его -15px margin'ом по сторонам, добавляю класс padding-0 для убирания в некоторых блоках padding'a у col- (который стандартно по 15px).

    Стандартно учитываю разрешения - HD, ноутбучное 1366 и свое чуть меньше 1366 (у меня пуск справа:) ), 1024-960 - старые мониторы и нетбуки, смотрю в диапазоне 768px-960 для некоторых планшетов и телефонов, и меньше 768 для телефонов. Тут дизайн один, через media onlyscreen убираем с загрузки ненужные части.
    Если все сверстано правильно и добавлены везде классы, то сайт будет полностью адаптивным.
    Для тестов меньше 768px проверяю через iphone 5 и старенький android-телефон. (Через Toggle Device mode в Google Chrome получаешь очень сильно разительные результаты в сравнении с устройством - браузеры то другие, хотя большие косяки всплывают сразу.)
    Тут кстати еще (мобильная) кросс-браузерность очень тонкий вопрос. Стиль у каждого браузера свой, особенно у всяких элементов типа input, так что тоже требует проверки и состояний тоже (placeholder, цвет текста в поле).

    Нужно ли это? Безусловно - на любом сайте, в любой отрасли половина трафика с мобильных устройств, это уже стандарт качества, на мой взгляд:)
    Ответ написан
    2 комментария
  • Как сверить 2 массивы и удалить одинаковые значения?

    profesor08
    @profesor08 Куратор тега JavaScript
    Как, как? Ручками! Только это не массивы, а объекты с полями.
    var a = {"a": "17","b": "1","d": "3","v": "10","e": "4","f": "9"};
    var b = {"a": "1", "b": "3","d": "4","v": "5", "e": "6","f": "7"};
    
    function search(a, b) {
      var result = [];
      for(var akey in a) {
        var found = false;
        for(var bkey in b) {
          if (a[akey] == b[bkey]) {
            found = true;
            continue;
          }
        }
        if (!found) {
          result.push(a[akey]);
        }
      }
      return result;
    }
    
    console.log(search(a, b));


    Каждый элемент массава А ищем в массиве Б. Если не находим его, то добавляем в результирующий массив.

    А теперь пример с массивами.
    var a = [17, 1, 3, 0, 4, 9];
    var b = [1, 3, 4, 5, 6, 7];
    
    function search(a, b) {
      var result = [];
      for(var i = 0; i < a.length; i++) {
        if (b.indexOf(a[i]) == -1) {
          result.push(a[i]);
        }
      }
      return result;
    }
    
    console.log(search(a, b));
    console.log(search(b, a));


    Или так:
    var a = [17, 1, 3, 0, 4, 9];
    var b = [1, 3, 4, 5, 6, 7];
    
    function search(a, b) {
      var result = [];
      a.forEach(function(v) {
        if (b.indexOf(v) == -1) {
          result.push(v);
        }
      });
      return result;
    }
    
    console.log(search(a, b));
    console.log(search(b, a));
    Ответ написан
    Комментировать
  • Какой стэк бэкенд технологий выбрать фронтенд разработчику для личных проектов?

    @Nodar
    Python, Ruby, JavaScript
    NodeJS
    Зачем учить Ruby, PHP, Python...., когда уже знаешь JavaScript?
    Выучить новый язык всегда хорошо, но если делать свои "проектики", то лучше взять что-то знакомое. NodeJS не подходит для проектов, где большая вычислительная нагрузка, но такую нагрузку надо еще заиметь, и с этим можно бороться и на Node

    Это все мое ИМХО
    Ответ написан
    4 комментария
  • Vagrant: где должны лежать файлы моего сайта?

    @Nc_Soft
    Почитай про ларавеловский вагрант, там все подробно написано
    https://laravel.com/docs/5.2/homestead
    Ответ написан
    Комментировать
  • Как начать использовать технологию WebSocket?

    frost18
    @frost18 Автор вопроса
    Программист PHP
    Всем спасибо, очень помогли.
    Использовал Ratchet, все что хотел - сделал, остался доволен, для первого знакомства и понимания работы comet сервера самое то.
    Ответ написан
    1 комментарий
  • На чем писать клиент-сервер с 10 000+ онлайном и 36 000 000 запросов в час?

    ruFelix
    @ruFelix
    Предсказание будущего по руке, таро, кофе.
    Выше писали про проблему 10к, не заморачивайтесь эта проблема была озвучена 10 лет назад, когда интернет, софт и железо были сильно другими.

    Мне кажется вы не в ту сторону смотрите. Вам намного проще научиться раскидывать нагрузку по 2-3-4... серверам, с тем, что есть. Это даст вам в итоге, переваривание любого трафика, только подкидывай денег на сервера.

    А уже потом вы можете оптимизировать стоимость владения этими серверами переписывая софт, меня базы и фронт энды. Так как переделывание/переписывание вам скорее всего поднимет производительность максимум в 2-3 раза, если у вас всё плохо в 10, а потом окажется что этот 10 кратный рост может отрабатывать только на 10 GB интернет каналах и ssd дисках на которые нет денег или они деньги есть но производительности одной железки не хватит уже через полгода.

    маштабируйтесь
    Ответ написан
    Комментировать
  • Правильный frontend?

    Я сделал видео про Git.Я там объяснил про ветви про коммиты итд.Видео
    Ответ написан
    2 комментария
  • Как найти задания по верстке?

    Punkie
    @Punkie
    www.awwwards.com/awards-of-the-day - выбирайте
    Ответ написан
    Комментировать
  • Си или Go для приложения по обработке сетевого трафика до 1.5М пакетов/с?

    Выбор в пользу Go:
    1. разумный компромис между надёжностью и производительностью. Касательно доводов против из-за производительности по сравнению с Си: всё зависит от структур данных, алгоритмов и их оптимизации для железа.
    2. простота разработки и отладки
    3. хорошая поддержка, наличие большого количества проектов и документация
    4. есть сборка в исполняемые файлы и библиотеки: Go Execution Modes.
    5. с интеграцией проблем быть не должно - записать файл-бинарник не проблема
    6. в долгосрочном плане может быть выигрыш при поддержке кода


    Из недостатков выбора Go:
    1. Нужно время на знакомство и эксперименты
    2. Сразу хорошо написать не получится из-за пункта 1. Возможно, понадобится переписывать некоторые части или всю архитектуру программы пока не получится нужный результат.

    Ответ написан
    4 комментария
  • Как продолжить обучение js?

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

    @balamyt92
    ; select * from users; --
    1. Просим выбрать рассу.
    2. Просим выбрать пол.
    3. Просим выбрать планету.


    Все пункты появляются поочередно с нужными пунктами в зависимости от введенного перед этим, в удобном вам виде. Думаю в таком случае код будет простым.
    Ответ написан
    Комментировать
  • В чём причина ошибки mousemove при повторном mousedown?

    alexey-m-ukolov
    @alexey-m-ukolov Куратор тега JavaScript
    Без конкретного примера на jsfiddle сложно понять, что не так, но главное подозрение падает на установку mousemove внутри другого обработчика. На первый взгляд, всё должно работать, но по симптомам проблема именно здесь. Да и в принципе это ненужное усложнение, спокойно можно обойтись без него.

    По поводу замечаний по коду - у вас довольно много ошибок начинающего: весь код одной лапшой, полно магических цифр, названия переменных неинформативные, никакой инкапсуляции. Например, я так и не смог понять, каким элементом карусели является brick - это карточка, кнопка листания, что-то ещё?

    В первом приближении должно быть что-то похожее на это:
    spoiler
    var carousel = (function() {
      var isInsideCarousel = false,
        brickPos = 0,
        magicNumbers = {
          first: 8, // Количество элементов в ряду?
          second: 3, // Количество рядов?
          third: 5, // Какой-то padding родительского контейнера?
          fourth: 790, // Ширина контейнера?
          fifth: 0, // Левая граница страницы?
        },
        $brick, offset, target;
    
      function turnOn(e) {
        console.log("DOWN");
        isInsideCarousel = true;
        offset = e.pageX;
        target = $(this).parent().siblings(".product-carousel-container");
      }
    
      function turnOff() {
        console.log("UP");
        isInsideCarousel = false;
        brickPos = parseInt($(brick).css("left"), 10);
      }
    
      function scroll(e) {
        var relX, move;
    
        if (!isInsideCarousel) {
          return;
        }
    
        relX = e.pageX - offset + brickPos;
        move = -relX * magicNumbers.first / magicNumbers.second;
    
        console.log(relX);
    
        $(brick).css("left", relX);
        $(target).css("left", move);
    
        if (relX <= magicNumbers.fifth) {
          $(brick).css("left", magicNumbers.fifth);
          $(target).css("left", magicNumbers.fifth);
        } else if (relX >= magicNumbers.fourth - magicNumbers.third) {
          $(brick).css("left", magicNumbers.fourth);
          $(target).css("left", -1 * magicNumbers.fourth * magicNumbers.first / magicNumbers.second);
        }
      }
    
      return function($el) {
        $brick = $el;
        $el.mousedown(turnOn);
        $(document).mousemove(scroll);
        $(document).mouseup(turnOff);
      }
    }());
    
    $(document).ready(function() {
      carousel($(".brick"));
    });


    Бонусным уровнем было бы обернуть это всё в jquery-плагин, но я не стал этого делать.
    Ответ написан
    1 комментарий
  • Какой фреймворк выбрать для интернет-магазина?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    Почитайте про reactjs и redux (reactjs наиболее четко описывает суть компонентов а redux описывает как вообще все это работает в сборе). Какой именно фреймворк или решение вы выберите роли особо не играет, так как почти все приходят к схеме описываемой redux (с минимальными отличиями и изменениями).

    Скажем тот же angular2. На самом деле он не сильно отличается от 1-ой версии, если вы следили за развитием идей и т.д. Скажем компоненты, их форсят во втором ангуляре (а так же в reactjs), но использовать этот подход без боли можно было уже с angular 1.3. Сейчас с angular 1.5 все еще проще. Есть компоненты (как отдельная сущность поверх директив, для angular 1.3-1.4 есть полифил), есть декораторы для компонентов (директивы расширяющие поведение компонентов). Главное не пользоваться контроллерами как независимой сущностью (ну разве что только для ресолва состояний и проброса в компоненты), а внутри компонентов не дергать сервисы для получения состояния (хотя есть опять же исключения).

    далее, ни react ни angular из коробки не предоставляют вам ничего для организации вашего приложения. То есть, штуки типа контейнеров зависимостей и базовые какие-то вещи вроде ангуляровских инфраструктурных сервисов не в счет. У вас полная свобода действий. Хотите мутите нормальный сервисный слой, хотите - практикуйте идеи redux с одним общим состоянием приложения и деревом редьюсеров прокидывающие части состояний по компонентам...

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

    @frontendthug
    1. Первым делом разберитесь, что такое пакетный менеджер(в нашем случае npm)
    2. Попробуйте понять, как работает сборщик проекта (Gulp). Основы Gulp.
    2. Попытайтесь внедрить туда те технологии, которые Вас интересуют. ( Даже если Вы их не выучили, в инете полно гайдов по внедрениям разных технологий в Gulp .Это избавляет от использования программ типа PrePros ).
    3. Начните изучать SASS.
    4. Внедрите bootstrap-sass в свой проект.
    5. Постоянно практикуйтесь.

    Из источников, где можно всё это хорошо подучить, я могу выделить несколько:

    WebReference - много вкусностей для начинающих. Именно этот сайт помог мне в начале пути фронтендера.
    Frontender Magazine - огромное количество полезных статей.
    Zencoder - тут тоже можно много чего найти по Вашим предпочтениям.
    Прогрессор - аналогично предыдущему.

    Вам должно вполне хватить данной мной информации. Успехов!
    Ответ написан
    Комментировать
  • Как настроить отчет по целям (js click) в Яндекс.Метрике? Где посмотреть клики?

    gy3elka
    @gy3elka
    Веб-аналитик
    Извините за глупый вопрос. А Вы саму цель задали в Настройках счетчика?
    Ссылка здесь https://yandex.ru/support/metrika/reports/add-goals.xml первый пункт.
    Для того, чтобы создать цель Вам нужно перейти в Настройки счетчика, слева выбрать Цели и дальше по инструкции действовать.
    Ответ написан
    4 комментария
  • Как начать использовать технологию WebSocket?

    bagau
    @bagau
    Фронтент разработчик
    На прошлой работе я писал онлайн-консультанта с использованием веб-сокетов. На сервере php с вебсокетом, на клиенте javascript. Комментировал код, можете посмотреть здесь на Github.
    Файл websocket.php - логика самого вебсокета, с комментариями. Я ничего не понимал в вебсокетах, поэтому комментировал каждую строку, чтобы понять.
    файл start_socket.php - работа с вебсокетом.
    Написано без использования фреймворков.
    Онлайн консультант в принципе рабочий, но я его не смог доделать, ушел с работы
    Ответ написан
    Комментировать
  • Как начать использовать технологию WebSocket?

    winbackgo
    @winbackgo
    Не знаю как там ratchet но поднять вменяемый socket server на php мне так и не удалось. Перешел на javascript (node.js). Доволен. Использую socket.io и socketcluster.io. Еще есть lightstreamer (java), мощная штука, все из коробки, но бесплатная версия имеет ряд ограничений.
    Ответ написан
    1 комментарий
  • Фильтрация по нескольким чекбоксам?

    Ответ написан
    Комментировать
  • Как это все работает вместе / путь к триумфу?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    Может я просто иду не в том направлении.

    Для того что бы нормально использовать ангуляр у вас должен быть нормальный уровень владения javascript и хотябы минимальное представление о том как строятся приложения.

    https://github.com/gdi2290/ngExam - вот вам список вопросов и план изучения. Ну а для того что бы составить общую картину - рисуйте mind maps.
    Ответ написан
    Комментировать
  • Какие есть "simple and small" Sass сетки?

    Наверное, самая гибко настраиваемая - Susy. Еще попробуйте Neat, возможно, в начале она будет проще.
    Ответ написан
    1 комментарий