Контакты
Местоположение
Россия, Москва и Московская обл., Москва

Достижения

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

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

Все теги (203)

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

Все ответы (891)
  • Какие шаблоны проектирования js применяются на практике чаще всего?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    UI developer. Верстаю неверстаемое.
    какие паттерны применяются чаще всего на практике и где

    Сразу отмечу, что все это чисто мое имхо, которое может не совпадать с мнением окружающих. В контексте фронтенда обычно все довольно просто. По моим наблюдениям в среднем сайте могут иметь смысл:
    1. Модули (делим код на независимые части)
    2. Фабрики (для компонентов интерфейса)
    3. Синглтоны (для хранилищ, точек сбора полифиллов / утилит и.т.д.)
    4. Адаптеры (для зависимостей и полифилов, которые могут измениться / выпилиться)
    5. Наблюдатели (для сбора происходящих событий в одном месте)
    6. Хранители (для сохранения действий пользователя и "Ctrl-Z")
    7. Стратегии (если действуем в зависимости от прилетевших данных)

    Другим паттернам применение вижу редко, только если под какую-то замороченную бизнес-логику. Хотя кого я обманываю, на среднем сайте обычно происходит только один паттерн - доширак из костылей. Ну и стоит сказать, что SPA-фреймворки имеют свойство навязывать свои подходы к решению задач, но это отдельная тема.

    Важно понимать, что паттерны проектирования - это просто хорошие идеи по поводу того, как организовать большой объем кода в той или иной ситуации. Это не "изучи тайное знание, запомни, и делай так всегда", не "используй паттерны, потому что великие их используют", это скорее "если не уверен как организовать код, возьми готовую идею, она вроде работает". Если вы будете просто решать задачи, то через N лет практики вы сами их все "изобретете", только не будете знать, что у них есть названия. Эффективно будет организовать себе заметку о том, какие из этих идей для чего примерно применяют, а потом, в процессе работы, в нее подглядывать, если встал вопрос "как организовать этот код".
    Ответ написан
  • Как сделать эффекты как на сайте примере?

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

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

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

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

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

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

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

    sfi0zy
    @sfi0zy Куратор тега CSS
    UI developer. Верстаю неверстаемое.
    Забудьте... дизайнер просто демон... посылайте нафиг дизайнера...

    О да, люблю эти комментарии. Набросал тут небольшой прототип:


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

    sfi0zy
    @sfi0zy
    UI developer. Верстаю неверстаемое.
    Является ли желтая квадратная форма в конце анимации видоизмененной кнопкой или же это совершенно другой элемент разметки?

    По смыслу - это другой элемент. Если мы говорим про более-менее компонентный подход к верстке, то это должно быть очевидно. Кнопка - один компонент. Всплывающее окошко - другой компонент. Набросал небольшую заготовку:


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

    P.S.: Но в целом - я голосую за реализацию таких вещей целиком на JS. Практика показывает, что в проектах с такими анимациями очень быстро собирается большое количество одновременно анимирующихся значений у большого количества элементов, которые нужно синхронизировать между собой. На CSS голова лопнет все это делать. И да, чем больше всего меняется в CSS-анимациях в единицу времени, тем выше шанс найти какой-нибудь редкий баг и долго ломать себе голову в поисках проблемы. Лучше уж взять какую-нибудь библиотеку вроде anime.js или любимый многими GSAP и использовать их.
    Ответ написан
  • Что такое и зачем нужен новый тип данный Symbol в ES15?

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

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

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