• Как отследить на ютуб через js поставил ли человек like, dislike и вообще ничего?

    @yavaskript
    У кнопок с лайком / дизлайком при нажатии на них меняется класс. Если вы на них не нажимали, то по умолчанию у них прописан класс "style-text". Если вы ставите лайк / дизлайк - то есть щелкаете по кнопкам - то класс у них меняется с "style-text" на "style-default-active". Можете отслеживать это.

    ... и там нету такой простаты как с кнопкой подписки.

    А причем тут предстательная железа???
    Ответ написан
  • Как победить погрешность при умножении в javascript?

    Rsa97
    @Rsa97
    Для правильного вопроса надо знать половину ответа
    Потому что компьютер хранит числа в двоичном представлении.
    Значит 598.68 запишется как 1.0001010110(10101110000101000111) * 29
    Поскольку дробь бесконечная, а разрядность вычислений нет, то число в памяти компьютера представляется с некоторой погрешностью. При вычислениях эта погрешность, как правило, нарастает.
    Ответ написан
  • Есть ли плавный скролл между якорями на чистом JS?

    AleksandrB
    @AleksandrB
    Совсем недавно вывел "Hello world"
    var linkNav = document.querySelectorAll('[href^="#"]'), //выбираем все ссылки к якорю на странице
        V = 1;  // скорость, может иметь дробное значение через точку (чем меньше значение - тем больше скорость)
    for (var i = 0; i < linkNav.length; i++) {
        linkNav[i].addEventListener('click', function(e) { //по клику на ссылку
            e.preventDefault(); //отменяем стандартное поведение
            var w = window.pageYOffset,  // производим прокрутка прокрутка
                hash = this.href.replace(/[^#]*(.*)/, '$1');  // к id элемента, к которому нужно перейти
            t = document.querySelector(hash).getBoundingClientRect().top,  // отступ от окна браузера до id
                start = null;
            requestAnimationFrame(step);  // подробнее про функцию анимации [developer.mozilla.org]
            function step(time) {
                if (start === null) start = time;
                var progress = time - start,
                    r = (t < 0 ? Math.max(w - progress/V, w + t) : Math.min(w + progress/V, w + t));
                window.scrollTo(0,r);
                if (r != w + t) {
                    requestAnimationFrame(step)
                } else {
                    location.hash = hash  // URL с хэшем
                }
            }
        }, false);
    }

    <a id="scroll" href="#one">⇩</a> <!-- ссылка, по клику на которую осуществляется прокрутка к якорю -->
    <a id="one" name="one"></a> <!-- якорь, расположенный в произвольном месте страницы -->

    Если вы об этом
    Ответ написан
  • Что значит оборачивание функции в скобки (function() { ... })?

    copist
    @copist
    Мидл, хочешь стать синьором? http://copi.st/ExhE
    Короткий ответ
    (function() { ... })()
    Это определение анонимной функции без параметров и непосредственный вызов её, так же, без параметров

    Длинный ответ
    Зачем оборачивать значение в круглые скобки?

    Оборачивание функции в скобки, так же как и оборачивание константы в скобки - это просто способ показать интерпретатору, что это значение внутри скобок может быть использовано как возвращаемое значение.
    var var_a = 5
    (var_a) /* или */ (5) // не является ошибкой, возвращает значение переменной или выражения
    function func_b() { }
    (func_b) /* или */ (function func_b() { }) // не является ошибкой, возвращает ссылку на функцию
    var var_c = { key: "val" }
    (var_c) /* или */ ({ key: "val" }) // не является ошибкой, возвращает объект
    var var_d = [ "one", "two" ]
    (var_d) /* или */ ([ "one", "two" ]) // не является ошибкой, возвращает массив


    Ну а раз (func_b) - это ссылка на функцию func_b, то значит её можно сразу же вызвать.
    A если (var_c) - это объект, то значит можно сразу же использовать его
    Аналогично (var_d) - это массив, то значит можно сразу же использовать его

    (func_b)() или (function func_b() { })() вызвать функцию
    (var_c).key или ({ "key": "val" }).key использовать объект
    (var_d)[0] или ([ "one", "two" ])[0] использовать массив

    Синтаксической ошибкой было бы использование функции, массива, объекта без скобок ( )
    function func_b() { }() ошибка "Unexpected token )"

    Хотя нет ошибки, по крайней мере в Google Chrome
    { key: "val" }["key"]
    ["one", "two"][0]

    Для чего вообще придумали самовызывающиеся функции?
    Для того, чтобы изолировать переменные и функции, чтобы они не попадали в глобальную область видимости.

    Сравни
    var a = "test"
    alert(a)

    по завершении этого блока переменная a болтается в глобальной области видимости

    и
    (function(){
        var a = "test"
    })()
    
    alert(a) // недоступно, потому что она была локальной переменной внутри анонимной функции


    Почему скобки ( ) пустые?
    В данном случае у функции function() { ... }нет формальных параметров, значит и вызывать можно без параметров.

    Но вообще в самовызывающуюся функцию можно передавать параметры. Это общая практика передачи ссылок на глобальные объекты:

    (function (w, d, $) {
       // некоторым нравится сокращать код путём использования коротких имён переменных
       w['fizz'] = "buzz" // вот так можно принудительно зарегистрировать
                           // глобальную переменную fizz
       $('body').css({background: 'red'}) // вот так можно работать с jQuery через привычную $
                           // даже если библиотека была загружена в режиме noСonflict
    }(window, document, jQuery))


    Некоторым не нравится длинный вариант проверки на undefined и они специально предусматривают лишний параметр, который не инициализируют

    (function (message1, message2, empty) {
        // это и есть проверка на undefined
        if (message1 === empty)
            alert('message1 is undefined')
        else
            alert('message1 = ' + message1)
    
        if (message2 === empty)
            alert('message2 is undefined')
        else
            alert('message2 = ' + message2)
    })("test") // вызвана только с одним параметром, значит второй по имени message2
    //  будет пустой, а третий empty специально ввели в качестве образца
    //  данных с типом "undefined", для служебного использования

    Зачем функция анонимная?
    Аналогично - чтобы не регистрировать её имя в глобальной области видимости, если она нужна один раз.
    Ответ написан
  • Почему результат промиса не возвращается через return?

    JRK_DV
    @JRK_DV
    Рецепты https://codepen.io/jrkdv/full/LKLXdq
    асинхронная функция не блокирует поток
    вы же это по любому уже читали в той же документации.

    теперь ещё раз посмотрите, что происходит в этих строках, вызов асинхронной функции:
    let str = getResult()
    console.log(str) // Promise {status: "pending"}


    Но ведь await по идее должен тормозить выполнение кода в функции

    Всё верно и тому подтверждение, строка:
    console.log(str) // Promise {status: "pending"}
    выполняется раньше, чем строка:
    console.log(str) // успешно
    Ответ написан
  • Как объяснить поведение сравнения кириллицы и чисел?

    Rsa97
    @Rsa97
    Для правильного вопроса надо знать половину ответа
    По стандарту JS, если хотя бы одно из сравниваемых значений не является строкой, то оба операнда приводятся к числовому типу. При этом строка, не представляющая собой корректное число, переводится в NaN. Любые сравнения с NaN дают false.
    Ответ написан
  • Как правильно задать ширину элементов grid?

    как мне указать что все эти 5 вложенный элементов будут иметь ширину 2 ячейке


    С помощью свойства grid-column: span 2;, заданного для элементов

    Результат:
    https://codepen.io/hisbvdis/pen/NWPKYyN

    5de2aaf78801d282766284.png
    Ответ написан
  • Альтернативы Bootstrap. Есть ли какие-нибудь интересные варианты?

    AngryYumy
    @AngryYumy
    Заплати фрилансеру чеканой монетой
    Может немного не то, но как познакомился с smart-grid от Лаврика просто не перестаю восхищаться данным творонением.
    Ответ написан
  • Оцените макет веб-сайта?

    cesnokov
    @cesnokov
    <head>&nbsp;</head>
    Надо сразу разобраться, это вы для себя делаете или будете кому-то показывать? Если для себя, то всё сделано так "как нравиться вам", тут останавливайтесь и дальше не читайте.

    Смысл персональной странички, передать информацию о себе. Ключевое слово "информацию" и передавать её надо максимально грамотно. Не занимайтесь "креативом", рано вам пока это. Основное правило композиции: если объект выкинуть и ничего не измениться, то этот объект лишний. Всегда пользуйтесь этим правилом по 100 раз на дню. А дальше, сверху вниз с лева на право:
    • Разделение ссылок наклонными "слэшами" говорит нам, что это путь (хлебные крошки), а не меню. Используйте более принятые знаки, например вертикальные линии или токи, кружочки.
    • Все эти фишки с "My name is web developer and I am Kirill from Russia" устарели лет 10 назад. Просто передавайте информацию максимально грамотно! Используйте знаки препинания и заглавные буквы там где надо > Hello,
    • Думаю, что в тексте достаточно того, что вы из Калининграда. Не надо уточнять, а тем более в обратную сторону (Калининград, Россия - а не наоборот).
    • Параграф текста "For now..." без отступа? А почему следующий с отступом? Везде должно быть одинаково.
    • В тексте есть грамматические ошибки.
    • Предложение пишется с заглавной буквы, в том числе если оно кнопка.
    • CV это по-русски, в английском языке это "Resume".
    • Ваше имя написано ExtraBold'ом, это "лишний объект". Шрифт тоже объект, не надо их много! Достаточно тех которые используете в основном тексте Regular и Bold.
    • Высказывания Стива Джобса оставьте для девочек в Фэйсбуке, тут они не уместны.
    • Я бы и розочку сделал белой, тогда бы страница была монохромной :)

    Надеюсь я вас не обидел своей точкой зрения. Всем и всегда есть, куда расти. Как то так.
    Ответ написан
  • Какой стек выбрать для верстки?

    @MOTORIST
    Если у Вас сайт на wordpress пишите на чем можете. Чем быстрее напишете тем лучше. Не гонитесь за хайпом.
    Ответ написан
  • Какие задачи нужно уметь выполнять на JS начинающему?

    copist
    @copist
    Мидл, хочешь стать синьором? http://copi.st/ExhE
    Какие задачи нужно уметь решать на чистом JS, перед тем как переходить к изучению библиотек и фреймворков?


    Кроме синтаксических конструкций, математических и логических выражений, нужно знать:
    • Область видимости переменных
    • Замыкания
    • Объектно-ориентированное программирование, в частности наследование через прототипы
    • Шаблон проектирования "модуль"
    • Операции над DOM
    • Понимание принципов событийно-ориентированного программирования
    Важно - нужно знать, откуда копипастить.
    Тебе нужно быть очень хорошо знакомым с одной-двумя-тремя популярными библиотеками на JavaScript. В идеале ты должен иметь представление о том, что определённый класс задач может быть решен с помощью определённых библиотек, хотя бы одной, но такие знания приходят с практикой. Вообще ты должен быть знаком с ними так близко, чтобы помнить, в какой части мануала по библиотеке можно найти описание форматов входных данных нужной тебе функции и какой будет результат, чтобы скопировать и вставить в свой код, а потом поправить, чтобы работало.

    Важно - инструменты программиста JavaScript
    У тебя должен быть удобный инструмент для разработки (IDE, Integrated Development Environment), чтобы он тебе подсвечивал код (syntax highlight) и подсказывал о синтаксических ошибках (syntax check), о формальных параметрах функций (type hinting), о стиле кодирования (code style), помогал писать код (live templates).
    Ты должен знать, как отлаживать скрипты в популярных браузерах (Firebug, Chrome Developer Tools и другое). Что такое точки останова, как управлять исполнением во время останова, как посмотреть и поменять содержимое переменных, как настроить останов по условию.

    Хотелось бы узнать что это за задачи(упомянутые вами 80%)


    Реальные задачи джунов:
    1. Возьми из сборника задач по javascript любой скрипт случайно и вслух расскажи, что он делает.
      Важно - читать и понимать чужой код намного важнее, чем писать свой. И на работе тебе это приддётся делать чаще, чем ты думаешь. Чтобы подключить к своему проекту чужую JS либу, нужно понимать что она делает, как она конфигурируется, как управлять её поведением. Скажу точно, что написать свой скрипт, который строит графики, намного сложнее, чем понять, как настраивается highcharts.

    2. Напиши скрипт на JS, который в заданном тексте удалит один или два символа, выбранных случайно
      1. Усложнение: удалять можно только буквы в словах, а знаки пунктуации и цифры удалять нельзя
      2. Усложнение: принять, что этот текст является программной на Javascript, удалить одну-две команды JS, но только если они не в строковых литерах (break как команду удалить можно, а в строке "break my heart" нельзя)
      3. Усложнение: воспользуйся этим скриптом и "попорти" код какого-нибудь другого скрипта на Javascript, а потом отладь, найди ошибку и восстанови работоспособность
      Важно - этим обычно все и занимаются - ищут баги. Только в реальной жизни они и без этого скрипта появляются. И не по одному, а прям пачками.

    3. На страницу HTML нужно встроить график курса доллара по отношению к рублю. Формат входного массива значений курса определи сам, исходя из своего скрипта для построения графиков.
      1. Усложнение: на одном графике должны быть два курса, по разным шкалам. Наприме, курс доллара к евро и курс юаня к рублю
      2. Усложнение: первоначально график вывести в детализации по месяцам, но чтобы можно было "приблизить" (drilldown) детализацию до дней
      3. Усложнение: первоначально график вывести текущем месяце, но чтобы можно было загрузить данные для предыдущего месяца без перезагрузки страницы (AJAX)

    4. При клике по картинкам, вставленным в текст HTML, показывать всплывающее окно для просмотра увеличенной картинки.
      1. Усложнение: в всплывающем окне сделать навигацию по картинкам, вперёд/назад и к нужной картинке
      2. Усложнение: в всплывающем окне вместо картинки показать видео-ролик с Youtube
      3. Усложнение: в всплывающем окне показать текст HTML

    5. По клику на кнопку "Click me" показать всплывающую форму.
      1. Усложнение: реализовать проверку данных на корректность перед отправкой формы (непустое значение, минимальное количество символов, максимальное количество символов, минимальное числовое значение, максимальное числовое значение)
      2. Усложнение: если в значении текстового поля встретилась гиперссылка, то считать её за 22 символа при любой длине этой ссылки (как в твитере)
      3. Усложнение: реализовать отправку формы на сервер через AJAX, без перезагрузки страницы
      4. Усложнение: саму форму в виде HTML загрузить с сервера через AJAX, в момент клика по кнопке "Click me", правила проверок данных должны как-нибудь "извлечься" из самой загруженной формы, например из аттрибутов полей ввода

    6. К форме ввода данных на поле ввода даты "навешать" всплывающий календарь для выбора даты.
      1. Усложнение: сделать форму календаря мультиязычной. Хотя бы через настройки на том же JavaScript
      2. Усложнение: сделать так, чтобы с помощью календаря можно было выбрать диапазон дат, чтобы она была привязана к двум полям формы "дата начала" и "дата окончания", и чтобы значение в поле "дата начала" обязательно была меньше чем в поле "дата окончания"
      3. Усложнение: сделать так, чтобы с помощью в календаре можно было видно визуально этот диапазон
      4. Усложнение: диапазон может быть открытым, но не пустым, то есть пользователь должен задать хотя бы дату начала или дату окончания.

    7. Сделать пред-просмотр веб-страницы HTML с разными темами. Тему страницы выбирать через селектор на javascript, а показывать в фрейме.
      1. Усложнение: сделать селектор "тип устройства", чтобы менять размер фрейма (например, "iPhone 5c 1136x640") и "чекбокс" для смены ориентации страницы "горизонтальная" или "вертикальная" (соответственно 1136x640 или 640x1136)
      2. Усложнение: в селекторе тем предусмотреть поиск тем по подстроке, и аналогично поиск устройств по части названия (авто-дополнение, auto-complete)
      3. Усложнение: тема страницы должна меняться без перезагрузки фрейма



    Задачи повышенной сложности, исходя из личного интереса
    1. Реализовать форму для многошагового мастера: форма должна состоять из нескольких страниц (шагов), пользователь может переключать страницы через какие-нибудь элементы управления "вперёд/назад" или "перейти на страницу".
      1. Усложнение: реализовать функциональную связь значений, когда некоторые данные зависят друг от друга (ввёл число в поле "количество" и в поле "сумма" значение пересчиталось)
      2. Усложение: доступность некоторых полей ввода должна зависеть от данных (например, если указал "есть личный самолёт", то значит можно ввести "марка самолёта")
      3. Усложение: видимость некоторых страниц должна зависеть от данных из предыдущих страниц (например, если указал "есть личный самолёт", значит появилась страница "ТТХ самолёта"; иначе страница должна скрыться)

    2. Реализовать однопользовательскую браузерную игру "змейка", "тетрис", "найди пару"
    3. Реализовать многопользовательскую браузерную игру "крестики-нолики", "морской бой" на два игрока в режиме "hot seat"
      1. Усложнение: два игрока на разных компьютерах, ходы передаются по websocket
      2. Усложнение: ограничение на ожидания окончания хода 15 секунд, по окончании ожидания автоматически делается случайный ход

    4. Реализовать todo-list. Пользователь вводит список, затем он превращается в строки с "чек-боксами". Когда "чекбокс" включен, строка зачёркивается.
      1. Усложнение: пользователь может переименовывать, удалять, добавлять строки
      2. Усложнение: список хранить в localStorage браузера, чтобы при перезагрузке страницы он восстанавливался
      3. Усложнение: пользователь может иметь несколько независимых списков todo

    5. Реализовать простой графический редактор. Пусть рисуется точка в месте, где пользователь кликнул.
      1. Усложнение: добавить переключатель режимов "точка"/"линия", в режиме "линия" рисуются линии между двумя последовательно кликнутыми точками
      2. Усложнение: можно менять толщину, цвет линий, размер точек
      3. Усложнение: последовательность кликов можно воспроизвести ещё раз с самого начала, равномерно или с реальной задержкой между кликами, с обычной скоростью или ускоренно
      4. Усложнение: можно выгрузить получившийся рисунок в формате PNG или SVG, причём SVG c анимацией воспроизведения



    Можно использовать любую существующую библиотеку.
    Например,
    для построения графиков www.highcharts.com
    для загрузки и передачи данных через AJAX: jquery.com + что-нибудь на сервере
    для всплывающих диалогов с картиками, видео и формами: fancyapps.com/fancybox и https://jqueryui.com/dialog/
    для валидации форм rickharrison.github.io/validate.js
    для календаря https://jqueryui.com/datepicker/
    для автодополнения https://jqueryui.com/autocomplete/
    для передачи данных между несколькими пользователями socket.io или обычный AJAX
    Ответ написан
  • Какие книги по программированию must-have?

    delphinpro
    @delphinpro
    frontend developer
    Не буду оригинален, эти книги у всех на слуху (и у меня на полке =).

    Макконнелл: Совершенный код
    Кнут: Искусство программирования
    Роберт Мартин: Чистый код. Создание, анализ и рефакторинг
    Гамма, Влисидес, Хелм, Джонсон (также известные как "Банда четырех"): Приемы объектно-ориентированного проектирования. Паттерны
    Фаулер: Рефакторинг. Улучшение существующего кода
    Ответ написан
  • Как сделать вот такую верстку?

    SmthTo
    @SmthTo Куратор тега CSS
    Все перепёлки мира будут оплакивать мою смерть.
    Минимальная ширина просто для примера, чтобы был виден вылет вверх на мобильных, для них нужно просто через media подгонять ширину блока с текстом, что мне делать лень.

    Ответ написан
  • Как верстать многостраничный сайт с Pug?

    Посмотрите как это реализовано у профессиональных разработчиков, на пример https://github.com/CSSSR/csssr-project-template
    Ну и поищите на гитхабе другие бойлерплейты, большинство вопросов отпадёт. Да и просто взглянуть на решения различных разработчиков всегда полезно.
    Ответ написан