Ищу работу на неполный рабочий день в Москве.
Контакты

Достижения

Все достижения (63)

Наибольший вклад в теги

Все теги (22)

Лучшие ответы пользователя

Все ответы (732)
  • Как сделать эффекты как на сайте примере?

    sfi0zy
    @sfi0zy
    UI developer. Верстаю неверстаемое.
    Что ж вас всех так тянет к этому канвасу? (риторический вопрос)

    1. Анимации буквы под ней фото. Как это делается? Подозреваю что canvas используется

    Если вы про большие "прозрачные" буквы, через которые видны фотографии, то никакой канвас там не нужен. Это делается на svg-масках - просто и производительно. Соответственно при перемещении мышки добавляется transform:translate для маски. Задача тривиальная, но оставлю пример для ознакомления. Переход между слайдами делается аналогично.

    2. Листание мышкой (зажимаешь появляются направляющие вверх-вниз, вправо-влево).

    На нажатие мышки вешаете обработчик, показывающий эти элементы (думаю не стоит говорить о том, как поменять им opacity). Далее точно так же - на событие "перетаскивания" добавляете transform:translate для всех этих линий и transform:scale для кружков. При переходе между слайдами добавляете еще больше трансформаций по вкусу.

    Остальные эффекты тоже интересуют. Понятно что css3, js, canvas

    Для рисования линий можно опять взять svg и..... Это вообще мощный прием, много куда его можно приткнуть. Появление надписей можно сделать на CSS-анимациях. Вариантов много, можно начать с вот этого примера (только делать все в обратную сторону) или поиграть с размерами псевдоэлементов, положенных поверх текстов. Еще там есть постраничный скролл, но это легко загуглить.
    Ответ написан
  • Как лучше всего реализовать это меню?

    sfi0zy
    @sfi0zy
    UI developer. Верстаю неверстаемое.
    1. Окружность большого диаметра - большой div, большой border-radius, тонкий border.
    2. Пункты меню расположены абсолютным позиционированием один поверх другого, затем с помощью transform: rotate подвинуты в нужные положения (как в этом примере, только углы меньше).
    3. Затемнение сверху и снизу - это линейный градиент поверх всего этого, в центре он прозрачный, по краям - видимо синий.
    4. Центральный (активный) элемент меню при попадании в центр изменяется - из точки увеличивается с помощью transform: scale иконка, а вокруг нее делается что-то такое.
    5. Соответственно остается прикрутить js-логику: считать углы в зависимости от количества элементов, все это поворачивать (при переходе к новому пункту меню), добавить поддержку клавиатуры (и видимо мышки, чтобы меню проворачивать колесиком) и адаптивность (на маленьких экранах можно всю эту красоту спрятать и оставить пункты меню в столбик).
    Ответ написан
  • Насколько корректно пользоваться LocalStorage для взаимодействия между вкладками бразуера?

    sfi0zy
    @sfi0zy
    UI developer. Верстаю неверстаемое.
    Смущает тот факт, что браузер должен записывать эти данные на диск и при частом их изменении будет лишняя паразитная нагрузка на диск.


    Провел небольшой эксперимент:
    VK_STORAGE=https_vk.com_0.localstorage
    
    cd ~/.config/google-chrome/Default/Local\ Storage
    
    while inotifywait -q -e modify $VK_STORAGE >/dev/null; do
        stat $VK_STORAGE | grep Modify
    done


    При этом слушал музыку в ВК, читал сообщения, имел несколько открытых вкладок. Эксперимент показал следующее:

    Modify: 2016-10-27 20:22:12.327308601 +0300
    Modify: 2016-10-27 20:23:12.328580890 +0300
    Modify: 2016-10-27 20:24:12.325855398 +0300
    Modify: 2016-10-27 20:25:12.327132042 +0300


    Похоже, что Chrome (53) достаточно умный и сбрасывает все это добро на диск раз в минуту, так что можно не беспокоиться о паразитной нагрузке. Полагаю, что другие современные браузеры тоже стараются работать с оперативной памятью, а не писать постоянно на диски.
    Ответ написан
  • Что такое и зачем нужен новый тип данный Symbol в ES15?

    sfi0zy
    @sfi0zy
    UI 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]. Позволяет избежать коллизии этих самых ключей если вы расширяете существующий объект из сторонней библиотеки. На практике встречается не очень часто, особенно в небольших проектах, но по всей видимости это - причина появления символов в языке.
    • Некоторая иллюзия приватных свойств. Символы по-своему работают с циклами и многими методами, связанными со свойствами объекта, становясь невидимыми для них. В результате можно разделить "все свойства с обычными ключами" и "все свойства с ключами-символами". А еще можно запутать код до безобразия.
    • Также, пользуясь предыдущей мыслью, можно сделать что-то вроде метаданных для любого объекта, которые опять же не сломают существующий код, но могут быть использованы для хранения какой-то информации и мередачи ее между отдельными модулями. Штука довольно интересная.
    Ответ написан
  • Есть ли ляпы в коде?

    sfi0zy
    @sfi0zy
    UI developer. Верстаю неверстаемое.
    Комментарии в коде бесполезные, только глаза мозолят:
    index: function (settings) {
        // Метод контроллера index
    ....
    create: function (settings) {
        // Метод контроллера create
    ....

    Если уж вы описываете свой код - делайте это с умом, посмотрите какие есть средства для генерации документации, например JSDoc

    Используйте фигурные скобки и отступы везде, где только можно. Я, разумеется, понимаю, что "стильно модно молодежно" писать if в одну строку, но такого рода конструкции взрывают мозг:
    ....
    else data = settings;
    if (typeof data !== "string") data = $.param(data);
    if (method == 'post') return $.post(url, data + '&_method=' + method_hidden);
    else return $.get(url, data);
    ....

    И, если еще придираться, - пустые строки после объявления переменных, после if/else, и.т.д. улучшают читабельность.

    Не используйте ключевые слова из es6 где попало:
    class: '.jsgrid-container',

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

    Да, и киньте ссылку на codepen что-ли, а то в 500 строк кода ни разу не понятно работает ли там что-то (и что оно вообще делает). И к этому хочется добавить - посмотрите в сторону систем сборки (Grunt/Gulp/...)на ваш вкус - скорее всего эти 500 строк можно разбить на части поменьше, станет проще ориентироваться в происходящем.
    Ответ написан

Лучшие вопросы пользователя

Все вопросы (1)