Ответы пользователя по тегу HTML
  • Как правильно перевести веб-приложение на несколько языков?

    bingo347
    @bingo347 Куратор тега JavaScript
    Crazy on performance...
    1. Заведите JSON файлы - словари для каждого языка, например ru.json en.json
    2. Загрузка нужного json на старте страницы (по выбору пользователя, если еще не выбирал - по заголовку Accept-language) через ajax либо сразу встраиваете в страницу
    3. Нужна js функция для преобразования ключа словаря в фразу, напишу Вам пример:
    0й аргумент принимает ключ, последующие принимают подстановки в строку фразы, например $1 в фразе будет заменено на 1й аргумент
    var dict = {}; //загруженный словарь
    function lang(key) {
      var str = dict[key] || '';
      var args = new Array(arguments.length);
      for(var i = arguments.length; i--;) args[i] = arguments[i];
      return str.replace(/\$\d+/g, function(matched) {
         return args[matched.slice(1)] || matched;
      };
    }

    4. Можно добавить сразу обработку html при загрузке страницы - у всех элементов имеющих аттрибут data-lang заменить содержимое по словарю <p data-lang="key"></p>
    document.addEventListiner('DOMContentLoaded', function() {
      var elems = document.querySelectorAll('[data-lang]');
      for(var i = elems.length; i--;) {
        elems[i].innerText = lang(elems[i].getAttribute('data-lang'));
      }
    }, false);
    Ответ написан
    3 комментария
  • Почему не работает анимация?

    bingo347
    @bingo347 Куратор тега JavaScript
    Crazy on performance...
    Делайте css анимацию, а на js только манипулируйте классами
    Ответ написан
    Комментировать
  • Как настроить (понять настройку) grunt?

    bingo347
    @bingo347 Куратор тега JavaScript
    Crazy on performance...
    Ответ написан
    Комментировать
  • Как перенести строку в text javascript?

    bingo347
    @bingo347 Куратор тега JavaScript
    Crazy on performance...
    $("#modal1Title").html('Ваша заявка отправлена.<br>С Вами свяжутся в течении 5 минут.');
    Ответ написан
    1 комментарий
  • Какими способами можно рассчитать и вывести расстояние до точки на карте?

    bingo347
    @bingo347 Куратор тега JavaScript
    Crazy on performance...
    Вам всем на каждый чих готовую либу подавай...
    Читаем теорию тут: https://ru.wikipedia.org/wiki/%D0%A2%D0%B5%D0%BE%D...
    function distantion(x1, y1, x2, y2) {
      return Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
    }
    Ответ написан
    6 комментариев
  • Как определить уникальность пользователя(если он использует сокс прокси, анонимный режим, флеш джава не запущены)?

    bingo347
    @bingo347 Куратор тега JavaScript
    Crazy on performance...
    Гуглите browser-fingerpoint
    Метод на канвас работает очень хорошо, даже при 64 битном хешировании отпечатка за полгода ни одного повторения, при этом если юзер не сменит видюху, результат будет всегда один
    Ответ написан
    Комментировать
  • Почему при обновлении страницы или переходе выходит из Fullscreen?

    bingo347
    @bingo347 Куратор тега JavaScript
    Crazy on performance...
    Скриптом запрашивается фуллскрин на конкретный элемент страницы, когда страница перезагружается данный элемент удаляется, поэтому слетает фуллскрин
    Запоминайте состояние в sessionStorage и активируйте фуллскрин при загрузке страницы
    Ответ написан
  • Crop resize до загрузки download?

    bingo347
    @bingo347 Куратор тега JavaScript
    Crazy on performance...
    Грузим картинку в память, используя FileApi, и отрисовываем ее на canvas
    Как либо изменяем
    Выгружаем как ArrayBuffer и отправляем на сервер по ajax
    Ответ написан
    2 комментария
  • Почему не добавляется в canvas изображение?

    bingo347
    @bingo347 Куратор тега JavaScript
    Crazy on performance...
    Картинка еще не загрузилась, а Вы уже пытаетесь ее отрисовывать
    Алексей Ярков в одном из коментов написал правильный вариант кода
    Ответ написан
  • Кто как делает html формы?

    bingo347
    @bingo347 Куратор тега JavaScript
    Crazy on performance...
    студии которые как семечки выплевывают сайты сидят

    такие студии просто имеют заготовки для стандартных ситуаций
    то есть если это например обратный звонок - то сopy -> paste
    а если что в колекции нет - нанимают оутсорс
    у них все сайты под одну гребенку, и фреймворки там редко используются, в лучшем случае какая-нибудь джумла/вордпрес
    Ответ написан
    Комментировать
  • От чего зависит плавность работы анимации на сайте?

    bingo347
    @bingo347 Куратор тега JavaScript
    Crazy on performance...
    Перенесите всю dom-анимацию в css, на js анимации быть не должно в принципе (за исключением canvas)
    Ответ написан
  • Как подставлять данные в форму?

    bingo347
    @bingo347 Куратор тега JavaScript
    Crazy on performance...
    Пишите скрипт который:
    1) заполняет input через свойство value
    2) кликает кнопку - метод click()
    3) Ждете, когда нужный тег обновится и выдергиваете текст из него
    4) Выводит результат в консоль (либо отправляет на локальный сервер, который будет его в файлик писать)
    5) повторяет пункт 1 для следующего value

    Инжектите этот скрипт на нужный сайт через конольку и вызываете с нужным набором данных и пусть работает себе, потом результат с консольки забираем
    Ответ написан
  • Как лучше и проще реализовать поддержку нескольких языков для сайта?

    bingo347
    @bingo347 Куратор тега JavaScript
    Crazy on performance...
    Современные браузеры почти всегда отправляют заголовок Accept-Language содержащий все предпочитаемые пользователем языки, с их приоритетами, если не удалось определить - грузим дефолтовый язык (как правило английский)
    Например мой браузер отправляет в этом заголовке значение ru-RU,ru;q=0.8,en-US;q=0.6,en;q=0.4 - что означает, что больше всего я предпочитаю русский (0.8), если его нет, то английский (диалект США, 0.6), в последнюю очередь (0.4) мне подойдет английский-международный
    Ответ написан
    2 комментария
  • Под какое разрешение вы чаще всего верстаете?

    bingo347
    @bingo347 Куратор тега HTML
    Crazy on performance...
    960 - база, далее адаптив с автоматической проверкой для изменения разрешения на каждый пиксель - если какой то блок сжался или вылез - логируем разрешение + селекторы, пишем адаптив - имеем полную поддержку почти любого девайса
    P.S. меньше 320 обычно смысла верстать нет - ибо нех покупать айфон мини
    Ответ написан
    Комментировать
  • Что изучать дальше?

    bingo347
    @bingo347 Куратор тега JavaScript
    Crazy on performance...
    Не нужно ничего изучать - это бесполезно!
    Задайтесь целью что-либо сделать и начните делать. Не бойтесь наделать велосипедов поначалу.
    А вот когда что-то не ясно - лезем в справочник/учебник/просто гуглим
    Ответ написан
    Комментировать
  • Как на js сделать такое?

    bingo347
    @bingo347 Куратор тега JavaScript
    Crazy on performance...
    <div>
      <label><input type="checkbox" data-param="param1" class="link-changer">param 1</label>
      <label><input type="checkbox" data-param="param2" class="link-changer">param 2</label>
      <label><input type="checkbox" data-param="param3" class="link-changer">param 3</label>
      <label><input type="checkbox" data-param="param4" class="link-changer">param 4</label>
    </div>
    <div>
      <a href="/test" class="change-on-check">test 1</a><br>
      <a href="/test" class="change-on-check">test 2</a><br>
      <a href="/test" class="change-on-check">test 3</a><br>
    </div>

    var links = document.getElementsByClassName('change-on-check');
    Array.prototype.forEach.call(links, function(link) {
      link.href += '?';
    });
    Array.prototype.forEach.call(
      document.getElementsByClassName('link-changer'),
      function(checkbox) {
        checkbox.addEventListiner('change', onChange, false);
      }
    );
    
    function onChange(event) { 
      var param = '&' + encodeURIComponent(event.target.getAttribute('data-param'));
      var add = event.target.checked;
      Array.prototype.forEach.call(links, function(link) {
        if(add) {
          link.href += param;
        } else {
          link.href = link.href.replace(param, '');
        }
      });
    }
    Ответ написан
    3 комментария
  • Как записать в массив текст из элементов?

    bingo347
    @bingo347 Куратор тега JavaScript
    Crazy on performance...
    Во-первых, id элемента должен быть уникальным для страницы, в случае повтора js будет получать первый элемент с данным id, замените id на class

    Ну и собственно код:
    var cats = [];
    $('.cats').each(function() {
      cats.push($(this).text());
    });


    Нативно, тоже самое:
    var catsNodes = document.getElementsByClassName('cats');
    var cats = new Array(catsNodes.length);
    for(var i = catsNodes.length; i--;) {
      cats[i] = catsNodes[i].innerText;
    }
    Ответ написан
    Комментировать
  • Html player есть ли событие загрузки видео?

    bingo347
    @bingo347 Куратор тега JavaScript
    Crazy on performance...
    У элемента video есть событие canplay, которое происходит в момент, когда загружены метаданные + небольшой фрагмент ролика, который уже можно проигрывать
    Но если задача отобразить прелоадер, то по-хорошему нужно учесть момент медленного инета, и тут уже буферинг

    Добавлю так же, что сам не пробовал, но подсмотрел у ютуба и есть желание как нибудь реализовать: видеопоток грузится по вебсокету и пишется в blob, а в плеер отдается url этого blob, в итоге получаем полный контроль над загрузкой
    Ответ написан
  • Есть виртуалка на KVM. Есть браузер. Какие технологии нужны что бы пробросить консоль из первого во второе?

    bingo347
    @bingo347 Куратор тега JavaScript
    Crazy on performance...
    если есть время и желание разобраться: изучите управляющие спецсимволы консоли и напишите обертку на node.js+socket.io, примитивно реализуется за 2-3 дня
    Само управление консолькой простое - запускаем через модуль child_process утилиту bash в потоковом режиме, команды пишем в stdin, stdout и stderr перенаправляем в браузер через сокет и там разбираем и отображаем
    Так же если нужен root доступ, то процесс ноды лучше запускать от root
    Ответ написан
  • Актуальная информация по GeekBrains?

    bingo347
    @bingo347 Куратор тега HTML
    Crazy on performance...
    Не так давно получал предложение по работе от них типа "ищем крутых программистов для проведения обучающих вебинаров"
    Ок, позвонил, отвечает девушка, общаемся, некоторые выдержки:
    Я: У меня высшее образование по специальности "преподавание информатики" и 2 года пед стажа, работал в колледже по специальности
    Д: Главное, чтоб Вы были действительно крутым программистом!
    Я: как Вы поймете, что я действительно крутой программист?
    Девушка: это покажет тестовое задание

    Я: Для проведения вебинара понадобится какое-либо специализированное ПО?
    Д: да, у нас есть собственное ПО, мы Вам вышлем инстолятор и инструкции в случае если Вы будете работать у нас
    Я: Я сижу под линуксом, Ваше ПО запускается на линукс нативно?
    Д: Что такое линукс?

    Ладно, девушка просто HR, не будем придираться, на крайняк запустим под вайном их крутое ПО...

    Получаю тестовое задание:
    "Запишите ролик, где Вы рассказываете о своем ЯП и покажите примеры циклов на нем для новичков"
    Сомнения увеличиваются, как это может показать мою "крутость" как программиста?
    Ну ок, записать видео с экрана не проблема, лезу в ютуб за примерами и нахожу их канал, среди роликов нахожу запись вступительного вебинара, ролик выложен весной 2014 по node.js - смотрю, парнишка рассказывает народу какая крутая нода по сравнению с php, python и ruby, отвечает на вопросы, притом пропуская некоторые, которые посчитал неуместными, но убила фраза "я программирую на ноде более 5 лет", напомню что ролик выложен весной 2014, следовательно снимался еще раньше, а нода появилась летом 2009... у парня проблемы с математикой когда он врет...
    Вообщем потратил свои 2 часа и просмотрел вебинар полностью, все сводилось к тому, что нода реально крутая и жизненно вам необходима, только купите наш мега крутой курс
    И я решил, что не смогу так парить мозги людям, ради выкачивания из них денег, и работать у них не хочу, а освоится новичкам я и на тостере помогу...
    Ответ написан
    1 комментарий