• Как изменить курсор на картинку при наведении?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Пытаюсь установить вместо курсора фотографию размером 500 на 500 пикселей и у меня не получается... нужно чтобы он менялся от секции к секции

    Еще пару лет назад в FF было ограничение на размер в 128px, полагаю и в других современных браузерах ситуация схожая. Так что кроссбраузерно вы такую большую картинку туда не впихнете. Альтернативный подход - наоборот, заменять курсор на маленькую прозрачную точку, а сверху вашей страницы класть картинку в виде img, делать ей position: fixed , pointer-events: none и top/left соответствующие координатам мыши. На событие "mousemove" добавить логику, которая будет выбирать и показывать картинку в зависимости от вашей секции и обновлять ее координаты.
    Ответ написан
    Комментировать
  • Как переписать эту лапшу?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    showButton () {
        switch (this.$route.name) {
            case 'new-article':
                return this.article.section &&
                       this.article.title &&
                       this.article.description;
            case 'update-article':
                return this.show &&
                       this.article.section &&
                       this.article.title &&
                       this.article.description;
        }
    }
    Ответ написан
    4 комментария
  • Интересные ютуб каналы по теме "Информационная безопасность"?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    На канале Hak5 есть разные видео, в основном нацеленные на начинающих. Но нужно понимать, что даже эти (весьма хорошие) ролики - это по большей части размазанные во времени и пространстве маны от разных инструментов. Гораздо эффективнее потреблять их в изначальном текстовом виде. В комментариях вам верно подсказали направление - текстовой информации по этой теме в разы больше, чем видео, а скорость потребления и удобство систематизации этой информации не идет ни в какое сравнение с роликами на ютубе.
    Ответ написан
    Комментировать
  • Какую 3д библиотеку лучше использовать для WEB?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    Из популярных вариантов еще можно посмотреть на three.js. Есть raycaster для определения наведения мыши на определенные объекты, вращение камеры вокруг точки делается в пару строк (или можно мышкой прикрутить через OrbitControls), c помощью CSS3DRenderer для этой библиотеки можно интегрировать сверстанные элементы интерфейса прямо в трехмерную сцену, что может быть довольно удобно в некоторых случаях.
    Ответ написан
    Комментировать
  • Как быть - учить GreenSock или чистую CSS Animation?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Кто нибудь из серьёзных верстальщиков делает анимацию самостоятельно, вот чтобы без плагинов писать весь код с нуля?

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

    Вопрос : нужно ли вообще заморачиваться над серьёзным изучением анимации, джаваскрипта, или же забить и учить документацию гринсок?

    Что такое GSAP? Ну вот без красивых слов? Это набор функций, решающих набор задач. А если у вас появится задача, на которую этот инструмент не рассчитан? Или задача, которую вообще никто еще не решал до вас, или готовые решения не подходят? Вы ничего не сможете сделать. Так что если вы хотите делать интересные вещи, которые выходят за рамки среднестатистического сайта, то ответ очевиден.

    P.S.: И да, не зацикливайтесь на каком-то конкретном инструменте (например GSAP) только потому, что кто-то сказал, что это "стандарт". Всегда есть альтернатива. Например anime.js. То, что инструмент активно не развивается, не значит, что он вдруг перестал решать свою задачу. Старая добрая классическая zippo работала, работает и вас переживет.
    Ответ написан
    Комментировать
  • Есть ли смысл использования Jekyll, а не WordPress?

    sfi0zy
    @sfi0zy Куратор тега HTML
    Creative frontend developer
    Для меня важно: 1. чтобы в URL не было окончаний .html или в этом роде; 2. чтобы если я в корне сайта создам папку "portfolio", а в ней папку с названием проекта "project-name" в итоге получилось так "site.ru/portfolio/project-name"

    С этим проблем не будет.

    возникло ощущение, что по сути он не отличается от обычной верстки. Ведь можно также собирать обычную верстку с помощью Gulp, Sass и шаблонизатора Nunjucks.

    Да, но... Раскидывание постов по тегам и категориям, rss и sitemap, постраничная навигация, поиск, еще что-то... лениво все это делать самому. Jekyll выступает в качестве готовой конфигурации, которую можно взять и использовать для таких задач, не запариваяь о том, что там есть и как оно работает. В этом его предназначение. Понятно, что jekyll не заменит gulp или webpack в задачах вроде сборки современного фронтенда (ну знаете, это когда 100500 модулей, babel или даже typescript, препроцессоры, постпроцессоры и.т.д.), но вопросы именно файловой структуры сайта и всего, что с ней может быть связано, он решает хорошо и без лишних вопросов.

    могу обойтись без админки... или может остаться на WordPress?

    Если хочется просто статичное портфолио - то зачем там какая-то cms? Она будет только тормозить и ничего не делать. А еще статику можно на github захостить - бесплатно и достаточно надежно.
    Ответ написан
    1 комментарий
  • Как сделать эффекты как на сайте примере?

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

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

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

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

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

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

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

    sfi0zy
    @sfi0zy
    Creative frontend developer
    Что и как тестируют ???.... простым языком.... смотрю про тестирование, мне кажется там больше заумной терминологии чем реальной работы

    Да нет, там как раз все просто. Грубо говоря есть три уровня:
    • "Делает ли эта функция то, что должна?": Мы (как тестировщики) знаем, что функция делает внутри себя, и убеждаемся, что она продолжает это делать и в будущем. Это именуют модульным или юнит-тестированием. В маленьких проектах обычно его не делают или покрывают такими тестами только определенные части проекта. Помогает оперативно находить изменения в поведении существующих модулей, которые так могут долго оставаться незамеченными и потом не понятно, что вызвало поломку. По идее такие тесты должны в автоматическом режиме проходить перед сборкой кода для продакшена.
    • "Работают ли несколько модулей вместе так, как задумано?": Мы не знаем, что происходит внутри связки, но знаем, что есть на входе и что должно быть на выходе. Это именуют интеграционным тестированием. По идее оно помогает находить проблемы на стыке модулей, когда поведение одного модуля поменяли, а про другой забыли. В реальном мире встречается не так часто, т.к. требует включения мозгов для написания тестов.
    • "Решает ли система задачи пользователя?": Это по-разному называют. Тут идет работа от ТЗ. Мы знаем, что должен получить пользователь от готовой системы в ответ на свои действия, но как она работает внутри нам фиолетово. Наиболее понятный сценарий такого тестирования - заранее написать кейсы, примеры того, как пользователь решает какую-то задачу, а потом перед каждым релизом "прокликивать" нужные последовательности кнопок или что-то вроде того. Это могут делать руками (студенты-обезьянки) или можно автоматизировать. Посмотрите примеры использования CodeceptJS и все станет ясно. По-хорошему это стоит делать на проектах любого размера, но на практике...

    Еще есть точечные тестирования, которые делают далеко не всегда и они как-то сами по себе существуют. Например проверка производительности или безопасности системы. На небольших проектах таким практически никогда не занимаются.
    Ответ написан
    Комментировать
  • Используем google fonts?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Или где-то какая-нибудь подлость всё же всплывёт?

    Роскомнадзор может заблокировать адреса, с которых гугл раздает шрифты. И будет печалька.
    Ответ написан
    1 комментарий
  • Префиксы для кроссбраузерности, насколько сегодня актуально?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    на сколько сегодня актуально? Все браузеры поддерживают самые распространенные св-ва flex...

    Не забывайте про телефоны, там все не так хорошо, как на десктопах. Какие-нибудь ios 6 или android 4.3 все еще существуют. Не посылать же их в известном направлении просто потому, что нам лень поставить пару префиксов?

    По поводу предыдущих ответов
    Использование автоматизации для добавления префиксов - не требуется

    emmet все дописывает

    Первое выражение как минимум странно. Оно имеет право на существование в некоторых случаях, но в целом - зачем что-то помнить и делать руками? Скажите автопрефиксеру какие браузеры вам нужно поддерживать, и он сам все сделает. Где надо добавит префиксы, где не надо - не добавит. И даже уберет лишние, там, где они уже не нужны. Штука с emmet тоже не всегда будет хороша. Главная ее проблема - захламление кода, который видит разработчик.
    Ответ написан
    1 комментарий
  • Как найти эту vanillavalue.com?

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

    Этим все сказано. Запрос делает он. Несколько месяцев назад кто-то на сайте самого disqus жаловался на проблему с долгой загрузкой и как раз запросами на vanillavalue, но видимо так и не решили этот вопрос.

    Что эта за шалапань?

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

    Как его победить?

    Никак. Если есть такая возможность, то можно поиграться с CSP на ваших сайтах. Люди говорят, что с помощью этой штуки можно уменьшить количество запросов и немного ускорить загрузку disqus. Но от зомби серебряная пуля может и не спасти. Будьте готовы к тому, чтобы со временем перейти на другую систему комментирования.
    Ответ написан
    2 комментария
  • Какие вы знаете стоки контента?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    интересуют фан-арты, иллюстрации, ui наборы, фото и др.

    На Uplabs стоит посмотреть. Много интерфейсов. Добавляют работы со сторонних ресурсов. Даже с CodePen демки встраивают. Ваши работы смогут добавлять другие люди (я не сразу понял фишку, но там любой человек может залить работу с другого ресурса, указав на автора).

    На Behance тоже есть интересные вещи, но в целом контент разный по качеству. Много художников. Много иллюстраций. Интерфейс не понятный. Но есть конструктор для работ, там много кнопок - лучше самому посмотреть. В последнее время без VPN отваливаются некоторые функции.

    Если нужны фотографии - Unsplash. По поводу загрузки работ не интересовался, но качество контента там неизменно высокое.

    dribbble.com интересный вариант, каково ваше мнение о нём?

    Чтобы выкладывать свои работы нужен инвайт, это уменьшает количество плохого контента. Ограничен размер картинок. Впечатление от самой площадки нейтральное, но многие интересные люди/студии выкладывают там свои работы. Можно ходить вдохновляться.
    Ответ написан
    Комментировать
  • Что я могу улучшить в резюме на позицию Junior Android Developer?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    Ссылку на гитхаб лучше дать там, где про него говорите: на HH при экспорте резюме могут теряться ссылки из контактов, а потом кто-то может подумать, что это не они потеряли, а вы забыли. И уберите из своего проекта на гитхабе логи, их там точно быть не должно. Ну и названия коммитов...

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

    Позиция "Готов к переезду в любой город" звучит так, как будто вам все равно, куда дальше двигаться, все равно, что будет. Это чисто субъективное мнение, но мне бы больше импонировал подход с целью: "я делаю это, но через пару лет хочу делать вот то; дома мои возможности ограничены и ради достижения своей цели я готов рассмотреть переезд".
    Ответ написан
  • Как быстрее конвертировать из пикселей в rem?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Есть плагин для PostCSS - postcss-pxtorem.
    Ответ написан
    Комментировать
  • Как грамотно продумать шаблон?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    Может быть переставить логотип в темную полоску, а меню растянуть во всю ширину?

    5ae6d81349887290298746.jpeg
    Ответ написан
  • Как сделать кастомные тултипы в определённых областях изображения?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Или можно всё сделать проще?

    Так у них [на сайте, на который вы ссылку дали] и так все просто:
    1. Есть SVG, в которую через image воткнули картинки. Это обычные png с прозрачным фоном. Каждый человек - отдельная картинка. Можно еще сделать маску вокруг каждого человека, чтобы буквально вырезать его по контуру и определять наведение не по прямоугольнику (как у них), а по силуэту
    2. Зная положение каждого человека, можно нарисовать текст над ним. Это можно как внутри SVG сделать (но тогда адаптировать сложно будет), так и с помощью обычных div`ов и абсолютного позиционирования из CSS. Если сделать viewbox='0 0 100 100' у SVG, то считать будет проще.
    3. При наведении на человека (думаю про addEventListener вы знаете):
      • Берем большой прямоугольник в SVG, заливаем его черным полупрозрачным, таким образом делается затемнение. Показываем его.
      • Человека можно заменить другим человеком (как сделано на том сайте), или применить к нему какой-нибудь фильтр, чтобы цвета изменить. В любом нормальном графическом редакторе вы найдете кучу фильтров.
      • Показываем текст

        Когда я говорю "показываем" я имею в виду, что есть миллион способов сделать это, от банального отключения display:none или изменения прозрачности и до хитрых анимаций с SVG-масками или еще чем-нибудь.

    Ответ написан
    Комментировать
  • Ваша структура проекта под верстку?

    sfi0zy
    @sfi0zy Куратор тега Вёрстка
    Creative frontend developer
    Что есть для вас компонент а что нет?

    Любая логически независимая сущность - компонент.

    Ваша структура проекта под верстку?

    Обычно получается структура в таком духе:
    спойлер
    src/less
    ├── animations.less (универсальные анимации вроде fade-in)
    ├── colors.less (цветовая схема: константы + вспомогательные классы)
    ├── components (тут все компоненты, их много-много)
    │   ├── accordion.less
    │   ├── badge.less
    │   ├── blockquote.less
    │   ├── breadcrumb.less
    │   ├── button-dropdown.less
    │   ├── button-group.less
    │   ├── button.less
    │   ├── card.less
    │   ├── carousel.less (у сложных компонентов могут быть внутренние
                           компоненты, которые нигде больше не используются,
                           соответственно они лежат в одном файле с родительским)
    │   ├── checkbox.less
    │   ├── grid.less (да, сетка - это тоже компонент)
    │   ├── . . . . и.т.д.
    ├── constants.less (константы, это что-то вроде глобального конфига)
    ├── fonts.less (все, что связано с типографикой)
    ├── helpers.less (классы-хелперы с перебиваниями стилей)
    ├── main.less (сюда все импортируется в нужном порядке)
    ├── normalize-ext.less (расширение стандартного normalize.css)
    └── utils.less (миксины, их обычно довольно мало.
                    все хаки и фиксы добавляет PostCSS, так что тут их нет)

    Рядом с этим лежат скрипты (структура для обычного не-spa варианта). Эти файлы создаются по мере надобности - может так статься, что все в одном-двух файлах будет, если делается лендинг какой-нибудь:
    src/js
    ├── component.js (если компонентов много - они все наследуются
                    от базового компонента. единообразие важно.)
    ├── components
    │   ├── . . . . тут сами компоненты, называются аналогично своим *.less файлам
    ├── components.js (индекс для компонентов)
    ├── controls
    │   ├── . . . . тут могут быть (а могут не быть) утилиты-обертки
                    для клавиатуры/тачпада; это иногда позволяет сильно
                    разгрузить остальной код.
    ├── dependencies.js (обертки-адаптеры для зависимостей)
    ├── events.js (следилка за событиями)
    ├── factory.js (маленькая фабрика компонентов)
    ├── main.js
    ├── polyfills.js (обертки-адаптеры для полифилов)
    ├── store.js (минимальное хранилище, иногда является оберткой
                    для какого-то стороннего решения)
    ├── utils
    │   ├── . . . . (тут могут быть файлы с разными утититами, иногда их вообще нет)
    └── utils.js (если файлов с утилитами много, этот файл является индексом для них)
    Ответ написан
    Комментировать
  • Как вывести HTML структуру в дерево?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    Имеете в виду что-то такое?
    Ответ написан
    1 комментарий
  • Хотите задать вопрос администрации Тостера?

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

    sfi0zy
    @sfi0zy Куратор тега Вёрстка
    Creative frontend developer
    И вообще при помощи чего конкретно сделано здесь


    Конкретно здесь многое сделано на three.js (да почти все). Тормоза в основном исходят от этого же инструмента, а точнее от того, что им малость злоупотребляют там, где можно все сделать проще.

    как верстальщику со знанием html, css и немного jquery как сделать такое?


    Параллакс с картинками, текстами и градиентными фонами для секций; смена надписей и плюсик - анимации svg; видео на фоне; немного css-трансформаций для переходов между страницами SPA; соответственно роутер, практика показывает, что в таких ситуациях имеет смысл написать свой, кастомный; шкала справа - еще css-переходы; на страницах проектов и агенства - большие картинки, еще видео, немного svg-анимаций, много абсолютного позиционирования, немного эффекта scrollfire + css-переходы; где-то между делом - подгрузка ресурсов аяксом. Если все это поделить на отдельные задачи, то такой сайт будет вполне реализуем, главное - не усложнять на ровном месте.
    Ответ написан
    Комментировать