Ответы пользователя по тегу JavaScript
  • Как можно запретить пользователю проявлять активность на сайте (регистрироваться, писать...), если у него отключен JS?

    SynCap
    @SynCap
    Делаю интернет с 1998 года
    Варинт 1. Используйте стили для BODY или HTML (`nojs`, например), который при загрузке JS в событии onloadскриптом уберете. А для всех элементов управления требующих JS установите видимиость в none.

    .nojs button[onclick],
    .nojs form[onsubmit],
    .nojs .ajaxform {display: none}


    Вариант 2. Подгружайте интерактивные элементы через AJAX или рендерите с помощью JS. Так даже лучше - поисковики ругаться меньше будут.

    Вариант 3. Используйте SSR - Server Side Rendering

    Обязательно в <noscript> сделайте уведомление для пользователя.

    Самый лучший вариант - использовать подход ненавязчивого JS (unobtrusive JavaScript).

    Гугл в помошь, а вкратце - сайт должен работать и без JS. Или, хотя-бы, отдавать вразумительную инфу.

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

    И таки-да: это и есть работа настоящего фронт-ендера, которая стоит охрененно дорого, потому-что подразумевает до хера знаний и требует до едрени-фени терпения и времени. Именно поэтому настоящий фронтер даже в России имеет зарплату разом больше 200k₽!

    Есть к чему стремиться. Но это уже другая история, которая называется - UI/UX - User Interface/User eXperiance - учет опыта пользователя в интерфейсах.
    Ответ написан
    Комментировать
  • Подтверждение пароля через сканер отпечатка пальцем?

    SynCap
    @SynCap
    Делаю интернет с 1998 года
    Быстрый ответ - жирным шрифтом, подробнее - читай все.

    Сканер отпечатков - устройство в устройстве, работа с ним производится на уровне операционной системы. Для работы с такими вещами есть свой апи (API - Application Programming/Protocol Interface).
    В мобильном приложении есть апи работы с различными устройствами, в том числе и с таким сканером. Для каждой ОС (Андроид/Ай/Черника/....) уже есть стандартизированные, но для каждой - свой. НО - вызовы апи доступны из React Native/Cordova/Veex, т.е. на Javascript.
    В ноутбуках и досктопах тоже есть, но там сложнее - с каждым сканером под каждую ОС идет свой драйвер со своим апи (читай - свой протокл, свой порядок соглашений и набор команд), нет единого стандарта, поэтому пока (?) нет интерфейса для "настольных" браузеров.
    В принципе, на дескотопе возможно определить наличие сканера и работать с ним из приложений на Electron, но нужно обязательно разобраться как правильно подвязывать хардварные вызовы из NodeJS для различных систем и строить билды для разных ОС с разными "прокладками". Однако и такой подход сработает только на Макоси, т.е. не "серебряная пуля" - нет единого стандарта для Windows и уж тем более для Linux.
    Ответ написан
    Комментировать
  • C чего начать изучение JavaScript опытному верстальщику?

    SynCap
    @SynCap
    Делаю интернет с 1998 года
    Опытных верстальщиков без знания Javascrit не бывает!!!!
    learn.javascript.ru
    А, еще - jQuery.com
    Ответ написан
    Комментировать
  • Как отловить EventListener при ajax?

    SynCap
    @SynCap
    Делаю интернет с 1998 года
    1. Обработчики должны быть всплывающими (propogate), если работать с ДОМ. Перегружать нужно не всю страницу, а лишь объект (body, content, конкретный div и тп), в таком случае ДОМ обработчики (click, resize, keyboard ...) должны стоять на родительском для перегружаемого объекте. Читайте про event bubbling и event propagation
    2. Интересующие тебя обработчики - можно симулировать событие. В частности onload срабатывает 1 раз на загрузке страницы, и фффсее. НО, в таком случае при загрузке нового конетнта, кто мешает вызвать обработчик принудительно? Тот же обработчик на onload и тотже на AJAX success
    3. Посмотри в сторону JSONP
    4. не мучайся, возьми Vue
    Ответ написан
  • Почему говорят что jquery не нужен?

    SynCap
    @SynCap
    Делаю интернет с 1998 года
    Зона применения jQuery стала несколько уже, не стала меньше.
    Забывать про него пока рано.
    Да, благодаря тому же jQuery, "подрос" сам JS.
    Да, для сложных клиентских приложений придуманы фреймворки, но даже используя их, иногда проще что-то делать с jQuery.
    И да, подключить jQuery ради одного селектора сегодня уже нет необходимости, ка не было ее и 15 лет назад, когда jQuery только родился.
    Для каждого инструмента - свое применение, профессионала отличает правильный выбор инструмента и грамотное его использование.
    Уверен - jQeury еще поживет. Не знаю насколько долго, но в ближайшие 2-3 года ему еще найдется применение.
    Ответ написан
    Комментировать
  • Как снаружи прервать выполнение асинхронной функции?

    SynCap
    @SynCap
    Делаю интернет с 1998 года
    Если флаги не вариант, тогда только запихнуть асинхронную задачу в отдельный процесс - его при желании можно прибить. Для отдельного процесса, можно легко организовать `await`.
    Читать тут
    Ничего не мешает сделать отдельные самостоятельные модули под асинхронные процессы.
    Таким макаром можно организовать аналог многопоточности с балансировкой, контролем приоритетов. чифирем и папиросами.

    * npmjs.com/package/invoke-parallel
    * npmjs.com/package/runnablepool
    * npmjs.com/package/child-pool

    Есть еще workers и cluster

    И не надо забывать, что вся асинхронность Ноды - на событиях (Event Loop)
    Ответ написан
  • Как сделать динамический размер фотографий в блоке?

    SynCap
    @SynCap
    Делаю интернет с 1998 года
    Ответ написан
    Комментировать
  • Как сохранять дату с сайта в календарь?

    SynCap
    @SynCap
    Делаю интернет с 1998 года
    Примерно так:
    <a href="cal:2017-03-23">23 марта</a>

    23 марта

    Если установлен софт, который работает с календарями и в браузере этот софт привязан к обработчику таких урлов, то будет запускаться. По идее Outlook при установке калечит все префиксы во всех найденых браузерах, в Сафаре на МакОСи и иОСе такие ссылки изначально привязаны к стандартному календарю, но могут быть изменены при установке другого софта. В большинстве случаев на Виндах и Линуксах этот префикс в браузерах не задействован и большинство браузеров спросят человека - "Чего запустить изволите?"

    * разный софт по-разному обрабатывает значения ссылок
    * обработчиком этих ссылок в браузере может быть назначен какой-нибудь сайт, например "Гуглокалендарь", все зависит от настроек браузера на клиентской машине
    * на Андроидах/Айфонах тоже работает, и тоже зависит от настроек
    * что и как сработает - нужно читать отдельно, единого стандарта нет.
    Ответ написан
    Комментировать
  • Как провести валидацию HTML (Gulp)?

    SynCap
    @SynCap
    Делаю интернет с 1998 года
    По дефолту gulp-htmllint берет правила проверки из `.htmllintrc`.
    Для его создания можно использовать `htmllint-cli
    Остальное подправить ручками и запускать таск без указания дополнительных опций.
    Ответ написан
    Комментировать
  • Как определить страну и автоматически выбрать значения из select?

    SynCap
    @SynCap
    Делаю интернет с 1998 года
    Яндекс в помощь: codepen.io/SynCap/full/oBjrpv
    Бесплатно, полностью в браузере, никакого шаманства на серверной стороне.

    PS: если не ошибаюсь, то код валюты в том же запросе можно получить, а если немного поколдовать, то и текущий курс валют. Как впихнуть в Select, полагаю, учить не надо, если что - список всех стран: https://ru.wikipedia.org/wiki/Список_стран
    Ответ написан
    Комментировать
  • Как сделать функционал вставки моего кода на сайт другим людям, как это делает вк?

    SynCap
    @SynCap
    Делаю интернет с 1998 года
    Можете отдавать что угодно, и как угодно (iframe, скрипт, или данные для AJAX запроса), главное, чтобы сервер (ваш хостинг) разрешил использование данных с других хостов.

    По умолчанию браузерам разрешено грузить скрипты и картинки с других источников, но нельзя обращаться с AJAX запросом к серверам, которые прямо не разрешают это. Можно даже целиком страницы чужие в iframe грузить, но доступ скриптам из основного документа к содержимому iframe нужно разрешать с помощью CORS.

    Подробнее по теме:

    - https://habrahabr.ru/post/114432/
    - https://developer.mozilla.org/en-US/docs/Web/HTML/...
    - https://ru.wikipedia.org/wiki/Cross-origin_resourc...

    Тэги для гугления: crossorigin, CORS.

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

    Самое распространенное решение для внедрения сторонних виджетов - скрипт, который тащит с собой данные (внутри тела скрипта) и генерирует новую разметку, чаще всего - iframe.
    Упомянутый oEmbed, по факту, делает тоже самое, как и виджеты "Вконтакте", "Фэйсбук" и т.п.
    Ответ написан
    Комментировать
  • Как сделать синхронизацию оффлайн приложения?

    SynCap
    @SynCap
    Делаю интернет с 1998 года
    Очень хороший пример - devdocs.io
    + Автоматическая синхронизация
    + Хранилище - IndexedDB
    + полный стек оффлайн приложения с большими наборами данных
    + блин, все просто: 8 api вызовов к браузеру!

    Кстати, народ обычно забывает, что и WebKit, и Mozilla Local/Session Storage организованы поверх встроенного движка SQLite. Это я к тому, что некошерно хранить серьезные данные в Storage, когда есть в распоряжении мощный движок для хранения данных, не просто Key->ShortValue, а движок Key->Document (иначе обзываемый NoSQL).

    Поясню разницу: в Local/Session Storage уместно хранить небольшой набор часто используемых данных с небольшими конкретными значениями, для хранения документов - используйте движок IndexedDB. Нет смысла прятать в IDB куки - обращение к Storage в этом случае значительно быстрее, но впихивать в Storage документы - это уже полное извращение, в этом случае IDB будет в сотни раз быстрее.

    Вдогонку: модный некогда термин NoSQL, по сути свелся к механизмам хранения Key->Document, и современные документ-ориентированные хранилища теперь пытаются приспособить SQL к этим движкам.

    Учите матчасть, потомки!
    Ответ написан
    Комментировать
  • Есть ли уроки по современной разработке на JS?

    SynCap
    @SynCap
    Делаю интернет с 1998 года
    learn.javascript.ru
    если мало: https://google.com/, https://yandex.ru

    и вот там, наверху есть поиск по тостеру, где ваш "суперуникальный вопрос" уже как-то задавался раз так эдак сто-питсот.
    Ответ написан
    Комментировать
  • Какие плагины использовать веб разработчику в sublime text 3?

    SynCap
    @SynCap
    Делаю интернет с 1998 года
    ВСЕ!

    Ставлю по необходимости, ищу доступное на packagecontrol.io - настроен как поисковик в браузере.

    Раз в пару месяцев или чаще - сношу все нахрен, и далее по рекурсии.

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

    SynCap
    @SynCap
    Делаю интернет с 1998 года
    Донести до заказчика, что твоя подпись - аналог подписи Рембранта, которая поможет другим, его коллегам, при выборе исполнителя.

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

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

    Самая лучшая защита - работать так, чтобы клиенты могли хвастаться: "смотри, кто мне сайт разрабатывал!" :)
    Ответ написан
    1 комментарий
  • Какая функция может выдавать случайные значения от 0 до 1 разной длинны?

    SynCap
    @SynCap
    Делаю интернет с 1998 года
    В Javascript доступна одна - Math.random(), все остальное рандомное и псевдорандомное в Javascript все-равно крутиться вокруг нее.
    Если нужно случайное число определенной длинны, проще создать искусственно.

    Случайное число длиной в 3 знака после запятой:

    '0.' + ((1+Math.random())*1000|0).toString().slice(1)


    или так:

    Math.random().toString().slice(0, 2 + 3 )
    Ответ написан
    Комментировать
  • Как найти подряд три идущих единицы с использованием битовой логики?

    SynCap
    @SynCap
    Делаю интернет с 1998 года
    Судя по всему задание - учебное, задание, скорее всего, составлял спец по алгоритмам. Поэтому готового решения задачи приводить не буду, а дам подсказки.

    1. Массив Map можно конвертировать в массив байтов или просто рассматривать каждую строку, как массив битовых значений, соответствующих байту.
    Внешним циклом на этом этапе, будет перебор строк.
    В таком случае можно применять битовую логику:
    byteVal = Map[idx][0]*128+ Map[idx][1]*64+ Map[idx][2]*32+ Map[idx][3]*16+ Map[idx][4]*8+ Map[idx][5]*4+ Map[idx][6]*2+Map[idx][7]*1;


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

    2. теперь, последовательно сравним byteVal с числами, содержащими подряд 3 единицы в битовом выражении. Таких чисел, будет всего 6(!) - поиграйтесь с калькулятором, чтобы убедиться.
    Это можно записать в одну операцию (чисел для сравнения небольшое количество, их легко подготовить с помощью калькулятора и назначить константам), либо использовать операцию сдвига, взяв за основу число 7, которое есть 7 и одинаково 7 и в 8ми, и в 10ти, и в 16ти разрядных записях - все-равно: 7 = 0x7 = 0o7, и все остальные, нужные для тестирования значения получать в цикле используя побитовый сдвиг.
    Т.е. внутри цикла перебора строк, после вычисления значения байта:

    var testVal = 7;
    
    for (var i = 0; i < 6 OR ; i++) {
        if ( profit = byteVal & testVal === testVal )
            console.log('Profit найден в позиции %i', 6-i);
       testVal <<= 1;  // то же, что и возведение 2 в следующую степень
    }


    UPD: кого-то может удивить, а где оптимизация сдвига? дело в том, что принцип необходимо и достаточно, никто не отменял. Для слишком длинных строк, такой способ непременим - ограничение размера сдвига для Javascript - 32.
    Для вычисления актуального размера сдвига нужно ГОРАЗДО больше операций, чем лишние пару циклов с побитовым сравнением. Это справедливо даже для ассемблера, а для любой реализации Javascript в частности - ваабче в 100500 раз. Мы уже на каждой итерации внешнего цикла в данном шаге экономим пару циклов.

    Код приведен в соответствие со стандартами ECMA262 (ES5), новых фишек ES6 (ES2015) в нем нет.

    3. Внешний цикл, в отличие от предыдущего шага, лучше будет сделать - для тестового значения. Внутренний цикл - для номера строки, начинающей блок сравнения, состоящий из 3 смежных строк - для просмотра, совпадений по вертикали, проходим циклом по строкам 6(!) раз, вычисляем byteVal для каждой из 3х строк блока сравнения, будем проверять значения на совпадение одного бита, т.е. начальное значение testVal = 1, сдвигать влево, тоже будем на 1 бит.
    Для оптимизации алгоритма, будем сравнивать сначала byteVal для 1й тестируемой строки, если не совпадает, сразу увеличиваем индекс начальной строки на 1 и уходим на следующий шаг, иначе - (если 1е сравнение == profit) сравнение второй строки набора сравнения, если неудачно - прибавляем к индексу 2, а если сравнение неудачно только на 3й строке - 3, и соответственно - следующий шаг сравнений.
    Оптимизация заключается в том, что мы пропускаем комбинации строк, где заведомо не будет подряд значений. Т.е. если при проверке 3й строки мы выяснили, что профита не светит, то мы начинаем проверку, со следующей строки, но считаем ее первой строкой проверяемого набора, т.е. сдвигаем указатель начала проверяемого блока сразу на 3 позиции, т.к. последовательная проверка блоков со смещением +1 и +2 - заведомо не дадут профита, т.к. мы уже точно знаем, что на этом участке с профитом - облом.

    4. Второй вариант решения по нахождению совпадений по столбцам - это транспонировать ("развернуть" массив, сделав строки столбцами) массив Map, и к нему применить шаги 1 и 2. Либо относиться к нему как к заведомо транспонированному, заменив перебор строк, на перебор позиций, тогда при вычислении byteVal, каждое Map[idx][x], заменить на Map[x][idx].

    Подробнее о битовых операциях на DevDocs.io и на Javascript.ru (по-русски)

    По алгоритмам поиска, на основе которого построена оптимизация поиска, советую почитать Дональд Кнут "Сортировка и поиск", либо Томас Кормэн и др. "Алгоритмы. Построение и анализ".

    P.S.: Честно говоря, на написание рабочего решения, мне понадобилось, в 20(!) раз меньше времени и раз в 5 меньше текста. Цените ленивые неучи, для вас старался, а то помрет старая гвардия и ваши рабочие места займут старательные индусы и дотошные китайцы!

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

    SynCap
    @SynCap
    Делаю интернет с 1998 года
    Не сваливать все в объект, а сразу писать в IndexedDB, а необходимые для оперативной обработки данные, например выборку по городу, брать средствами работы с IndexedDB.

    Для браузеров не умеющих работать с IndexedDB есть библиотека PouchDB, менее шустрая, чем нативные встроенные в браузер реализации (UPD: если их нет, в противном случае - используются нативные), но даже на старых браузерах (IE7,8) будет выигрыш, как по удобству манипуляции данными, так и по скорости.

    UPD: обращение к IndexedDB НЕ блокирует интерфейс и может использоваться в воркерах (см. issues на странице).

    UPD: кстати, PouchDB :
    • сам использует IndexedDB, когда она доступна, в старых WebKit, в т.ч. на Android использует WebSQL, когда совсем плохо (старые IE) - тоже чего-нибудь придумывает, как минимум - localStorage;
    • дает возможность работать с серверными данными, как c локальными, когда они доступны, идеальное решение для снижения заморочек с созданием "оффлайн" приложения или одностраничника с "миллионом записей", проводя "репликацию";
    • все танцы с бубном вокруг индексов - фоновая, абсолютно прозрачная задача.
    • если поставить на сервере CouchDB или эмулировать ее Rest api - можно забирать всех "Вась из Омска" прямо с сервера одним вызовом
    UPD: И когда, наконец, народ научиться подбирать подходящий инструмент для работы, а не валить лес пилкой для ногтей и не вскапывать грядки карьерным самосвалом?
    Ответ написан
    1 комментарий
  • Gulp. Не удается добавить sourcemap к js. В чем ошибка?

    SynCap
    @SynCap
    Делаю интернет с 1998 года
    Делай сначала uglify, потом concat.
    и будет тебе Щасте!
    И не забудь указать путь куда писать sourcemap: soucremap.write('./') или куда тебе там его надо положить
    Ответ написан
    1 комментарий
  • Как с помощью jquery отсортировать блоки в нужном порядке при изменении размера экрана?

    SynCap
    @SynCap
    Делаю интернет с 1998 года
    Там где flex недоступен, нужно именно javascript'ом.
    Например с помощью вот такой штуки vnjs.net/www/project/freewall
    Ответ написан
    Комментировать