Ответы пользователя по тегу JavaScript
  • Есть ли плавный скролл между якорями на чистом JS?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    Для современных браузеров ничего придумывать не нужно, все и так уже есть.
    element.scrollIntoView({ behavior: 'smooth' })
    Для остальных можно временно заполифиллить.
    Ответ написан
    1 комментарий
  • В чем отличие объявления этих двух функций?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    Как давно в JS можно не писать function в первом примере?

    Ключевое слово function можно опускать в определенных ситуациях:
    let bar = {
        test: 'A',
        foo() {
            console.log(this.test);
        }
    }
    
    bar.foo(); // A
    
    class Bar {
        constructor() {
            this.test = 'B';
        }
        foo() {
            console.log(this.test);
        }
    }
    
    (new Bar()).foo(); // B

    Разумеется для старых браузеров нужен Babel. В остальных случаях запись вида test(){} вызовет ошибку Uncaught SyntaxError: Unexpected token.
    Ответ написан
    Комментировать
  • Как удалить публичный пакет npm?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    С помощью unpublish можно убрать из публичного доступа пакет, который был опубликован в последние 24 часа. Если это так и пакет не удаляется - лучше написать в техподдержку (в последние пару дней у многих ресурсов были серверные проблемы - github и codepen уже падали, может и у npm что-то не так). Если же вы опубликовали свой пакет раньше, то удалить его уже нельзя. Можно только сделать устаревшим с помощью npm deprecate. Если ваш пакет не является зависимостью у других пакетов, то теоретически можно попросить техподдержку удалить его вручную, но не факт, что они станут это делать.
    Ответ написан
    1 комментарий
  • Хочу набить руку на создании адаптивных меню. Можете подсказать сайты со сложными меню (чтобы посмотреть и попытаться сделать что-то похожее)?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Посмотрите подборку от freefrontend.com. 117 менюшек, начиная от самых простых и заканчивая довольно интересными в плане "сделать это самому и взять приемы на вооружение".
    Ответ написан
    Комментировать
  • Что такое и зачем нужен новый тип данный Symbol в ES15?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    Что такое

    Новый тип данных symbol - это попытка ввести уникальные идентификаторы. Все крутится вокруг функции Symbol. Это не конструктор в полном смысле слова, с new ее использовать не получится. Это скорее маленькая фабрика. Она просто возвращает новый символ каждый раз. Это важно. Каждый раз новый. В качестве аргумента можно передать строку, но она используется только для отладки.
    Symbol() === Symbol() // false

    Что такое глобальный символ? Какой еще реестр?

    Есть Symbol.for(), это еще один метод, который не просто возвращает символ, но и сохраняет информацию о том, для какого параметра он создавался. Внешне логика работы напоминает хеширование - для разных параметров символы получаются разные, а для одинаковых - одинаковые.
    Symbol.for('my-string') === Symbol.for('my-string') // true
    Symbol.for('my-string') === Symbol.for('another-string') // false


    Зачем это надо?

    Применение этого типа данных - предмет для споров. Большая часть кейсов из интернета - это попытки поиспользовать новую фишку только ради того, чтобы ее поиспользовать. Самые популярные и практически применимые варианты:
    • В качестве ключа для доступа к свойству объекта. Грубо говоря вместо obj[key] использовать obj[some-magic-unique-key]. Позволяет избежать коллизии этих самых ключей если вы расширяете существующий объект из сторонней библиотеки. На практике встречается не очень часто, особенно в небольших проектах, но по всей видимости это - причина появления символов в языке.
    • Некоторая иллюзия приватных свойств. Символы по-своему работают с циклами и многими методами, связанными со свойствами объекта, становясь невидимыми для них. В результате можно разделить "все свойства с обычными ключами" и "все свойства с ключами-символами". А еще можно запутать код до безобразия.
    • Также, пользуясь предыдущей мыслью, можно сделать что-то вроде метаданных для любого объекта, которые опять же не сломают существующий код, но могут быть использованы для хранения какой-то информации и мередачи ее между отдельными модулями. Штука довольно интересная.
    Ответ написан
    Комментировать
  • В каких задачах лучше использовать TypeScript?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    Обязательно ли его знать фронтендеру?

    Нет. Не обязательно. После того, как пришел ES6+ и стала популярной нормальная сборка с линтерами и тестами, количество изюминок в TypeScript заметно поубавилось, и в наше время его использование стало вопросом религии (нужна более строгая типизация или нет) и личных предпочтений. Учите чистый JS, а если вам в какой-то момент покажется, что TypeScript вам нужен или попадете в команду, где его используют - за пару дней разберетесь.
    Ответ написан
    Комментировать
  • Есть ли скрипт автоподбора размера шрифта?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    Да, есть готовые решения, на которые стоит обратить внимание, например FlowType.js. Также есть CSS-only вариант на тот случай, если вам нужно привязать font-size к размеру окна браузера.
    Ответ написан
    1 комментарий
  • Получать правильное значение Rem из px которые даем на вход функции, написал функцию но она работает не корректно, что не так?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    что не так?

    По умолчанию font-size у корневого элемента (html в данном случае) не обязан быть равным 13. Так что нужно его явно задать:
    :root {
        font-size: 13px;
    }
    Ответ написан
  • Что является идентификатором усвоения языка?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Если вы можете решать любые задачи, которые перед вами возникают в процессе работы и не задаетесь вопросом "знаю/не знаю" - все хорошо, вы усвоили ваш язык. Возможна переодическая потеря памяти и необходимость загуглить что-то что "знаю, но забыл". Если вы хотите прям какой-то тест в процентах - то knot-it-all будет в самый раз. Бесполезная статистика, но все в одном месте - довольно занятно.
    Ответ написан
    Комментировать
  • Как делают такие вещи?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Алгоритм примерно такой:
    - Берем обычный canvas, на нем что-то пишем или выводим картинку (в данном случае строго 2 цвета).
    - Берем imageData у того, что получилось.
    - Проходим по всем пикселям этой imageDatы с каким-то шагом, делаем объект "частица" с нужными координатами когда цвет соответствует определенному (если писали черным по белому - значит если цвет пикселя черный).
    - Стираем надпись.
    - Проходим по массиву частиц, рисуем небольшой круг (что угодно, но пусть будет круг) на месте с координатами этой частицы.
    - PROFIT.

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

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    Нормально ли вообще иметь компоненты в виде классов?

    "Нормальность" - это термин из области психиатрии, обозначающий тот факт, что кто-то другой делает то, что мы на данный момент времени и в данном обществе считаем приемлемым. Были времена, когда люди говорили "мы должны разделять разметку, стили и скрипты и ни в коем случае не должны их смешивать". Это считалось нормальным. Даже относилось к хорошим практикам. А потом появился реакт. И те же люди стали говорить "да давайте все в одном файле фигачить, это же круто, а еще вебпаком можно весь проект со всеми ресурсами в один бандл сжать". И теперь это - норма. Как можно заметить, нормальность немного поменялась.

    не могу найти место применение классов при создании интерфейсов

    Посмотрите на досуге мой велосипед. Он еще далек от совершенства и скорее является полигоном для экспериментов, но там как раз хорошо видно, что получается в коде при использовании классов-компонентов.
    Ответ написан
    Комментировать
  • Как сделать обратную анимацию распада с использования css или javascript (Pixel Dust)?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Вот как-то так (кроссбраузерность не проверял, но должно работать IE11+).
    59d5e110e70d2375505477.gif
    По-хорошему стоило бы нарисовать точки в виде SVG-картинки и анимировать ее части, а не div элементы, как я сделал, но общая концепция должна быть понятна. Поведение с опцией hidden можно заменить на :hover у вашей кнопки.
    Ответ написан
    1 комментарий
  • Как реализовать плавный якорь на чистом(Нативном) JavaScript?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    Этот функционал находится в стадии черновика и в некоторых браузерах уже есть из коробки. Вероятно вам нужен smooth scroll polyfill. Разумеется никто не мешает в образовательных целях посмотреть его исходники.
    Ответ написан
    1 комментарий
  • Зачем в библиотеке lodash функция map?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    Lodash дает возможность использовать большой набор утилит (как стандартных, так и не очень) в едином функциональном стиле. Это чуть ли не главная фишка, за которую его так любят.
    Ответ написан
    Комментировать
  • Какие есть плагины анимации элементов?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Возьмите animate.css и добавляйте нужные классы к элементам. Или, что еще лучше, достаньте из нее только необходимые вам анимации (postcss-animation может это дело автоматизировать) или посмотрите идеи в исходниках и сами их напишите, чтобы не тащить всю библиотеку ради пары десятков строк. Если хотите что-то совсем кастомное и необычное - идите на codepen, смотрите идеи там и адаптируйте под свои нужды. Тут главное не переборщить, все-таки сильно нестандартные или длинные анимации интересны первые пару-тройку раз, потом начинают раздражать.
    Ответ написан
    Комментировать
  • Какую лучше сделать разметку и как запомнить выбор?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    Это стандартные радио-кнопки. Сами инпуты скрываются, а label для каждого из них стилизуется необходимым образом - пример.
    Ответ написан
    Комментировать
  • Как не применять html при отключенном JS?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    Как не показывать прелоадер если у человека выключен JS?

    Можно посмотреть на вопрос с обратной стороны и показывать ваш прелоадер с помощью JS. Там, где нет JS - не будет и прелоадера.
    Ответ написан
    Комментировать
  • Какую библиотеку для анимации вы используете постоянно?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    На постоянной основе - anime.js или делаю анимации на CSS, иногда использую D3.js.
    Ответ написан
    Комментировать
  • Как запланировать ежедневные изменения файле js (график)?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    как сделать cron, чтобы он вносил изменения в файл js

    Это очень плохая идея, которая создает неявную логику работы фронтенда, ломает его сборку, и из-за которой можно очень крупно влипнуть в перспективе. Если на JS совсем никак нельзя эти точки генерировать - то лучше не в скриптах что-то менять, а сделать отдельный json файл, в котором будут храниться точки и потом его аяксом загружать на клиента. В таком случае вам нужно просто вставлять нужную строку перед последней строкой этого json файла (google->php insert string before last line), это будет очень простой скрипт, а для того, чтобы добавить его в cron вам понадобится (google->cron php script). Ответы на оба вопроса есть по первой ссылке на stackoverflow. Про то, как можно загрузить на клиента можно почитать здесь, там и пример есть и пояснения.
    Ответ написан
    Комментировать
  • Как исправить кучу ошибок цсс в валидаторе?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Как исправить кучу ошибок цсс в валидаторе?


    Тут вопрос не в том, как исправить, а в том, что исправить. Префиксы, как вы понимаете, нам нужны в любом случае. Меняем настройки валидации, чтобы не обращать на них внимание:
    9d365b5f13ea4505a0f5ffbb674078a3.png

    Имеем 9 ошибок с вашего сайта. Из них (с повторениями, -webkit-min-device... не считаем):
    - Property user-select doesn't exist : none - это свойство из черновика CSS4. Все ок.
    - Property touch-action doesn't exist : pan-y - относится к спецификации Pointer Events, а не CSS. Все ок.
    - Value Error : cursor hand is not a cursor value : hand - вот тут ошибочка, cursor: hand не бывает.
    - Value Error : margin-top Unknown dimension 10px\9 - что-то тут не так со значением отступа.

    Последние две ошибки стоит поправить, на остальное можно забить.
    Ответ написан
    1 комментарий