Ivan Bogachev
UI developer. Верстаю неверстаемое.
-
вклад
-
3вопроса
-
1014ответов
-
54%решений
-
Есть ли недочеты в этом макете сайта?
- Белый по светлому не читается. Белый по пестрому - тем более. Голубой по голубому - ох...
- Странное смешение шрифтов с засечками и без. Никакой системы в этом не наблюдается. Какую задачу эта разница решает - непонятно.
- Очень много разных размеров шрифтов и межбуквенных интервалов. Проблема та же - нет системы.
- Отступы везде разные. Внизу их вобще нет. Проблема та же.
- Местами намешана информация. Глаза разбегаются. Здесь явно прослеживается идея поэкранного скролла, или чего-то вроде него, но стоит подумать над тем, чтобы каждый экран был о чем-то одном. Первый про то, что это такое (зачем там какие-то характеристики про опыт и духов?), дальше описание сервера (зачем там реклама справа?), магазин вообще спрятался в куче рандомных фактов по краям, я его в первый раз даже не заметил.
- Не совсем понятно, как это должно адаптироваться под разные размеры экранов.
В целом докапываться можно много к чему, перечислять нет смысла, но общий посыл такой:
- Обращайте внимание на систему в дизайне. Загуглите, что такое дизайн-система и почему простота и последовательность - это хорошо.
- Думайте больше о доступности и адаптивности. Вы дизайн делаете для пользователей в первую очередь. Красочная картинка вторична.
- Не нужно нагромождать все, как в газете. Это очень редко работает. Управляйте вниманием пользователей, не давайте ему растекаться во все стороны.
P.S.: Также в таких проектах всегда нужно быть готовым к диалогу с разработчиком и не допускать требований pixel-perfect по согласованным без него макетам. Это не так сложно сверстать, но вот эти штуки по краям с линиями и кубиками будут генерироваться на лету (для адаптивности). Они не будут 100% соответствовать нарисованному. Также тут так и напрашивается все эти картинки анимировать, как на текущем сайте mtg. Не знаю, как этот стиль называется, но WebGL - наше все. Да и эти кубики я бы сделал неспешно плывущими более-менее вниз с покачиваниями и поворотами... Но это уже следующий шаг. Первое - система в дизайне и доступность.1 комментарий - Белый по светлому не читается. Белый по пестрому - тем более. Голубой по голубому - ох...
-
Какие вы используете инструменты для ускорения верстки макетов?
Есть несколько сторон вопроса:
- Часто повторяющиеся рутинные действия, вроде копирования файлов, выделения critical css или обработки картинок. Для этого есть gulp + плагины под конкретные задачи.
- Разделение кода по модулям, добавление синтаксических возможностей, убирание мусора из кода. Вопрос удобства и ускорения ориентирования по нему. Обычно это pug, less, postcss, в частности autoprefixer, ну и babel, куда без него.
- Это все нужно собрать. Тут webpack или снова gulp + плагины. Можно webpack запускать через gulp, как одну из задач. Ну и browsersync, чтобы руками не перезагружать страницу.
- Ускорение написания кода. Тут emmet + умение работать с текстовым форматом как таковым. Порой vim с множественными курсорами кажется чем-то космическим.
- Страховки от ошибок - w3c validator, stylelint, doiuse, eslint, sonarjs. Сильно недооцененная тема, но экономит много времени на отладке.
Конкретные инструменты - это всегда вопрос личных предпочтений, но общий посыл должен быть понятен - автоматизируем все, что можно, предохраняемся по максимуму, и потом учимся работать с текстом. А дальше упираемся в то, что руки работают быстрее головы. И чем сложнее дизайн, чем сильнее задачи выходят за рамки повседневности, тем меньше значение скорости, там эти все инструменты скорее дают просто комфорт. Не нужно думать о том, о чем думать не обязательно. - Часто повторяющиеся рутинные действия, вроде копирования файлов, выделения critical css или обработки картинок. Для этого есть gulp + плагины под конкретные задачи.
-
Как реализовать такое?
нет 3d модели предмета
но
модель крутится
Если вы хотите сделать вращение модели, то вам в любом случае нужна либо 3d-модель и отображение ее с помощью WebGL, либо куча картинок с видами на нее со всех сторон с разницей в N градусов и последовательное их показывание пользователю (ну или видео, что по сути - тот же набор картинок). Но тут важно отметить, что обычно такие картинки не рисуют прямо руками, а делают модельку и потом ее рендерят с разных сторон, т.к. это получается быстрее, чем рисовать.
Подход с заранее отрендеренными картинками может показаться избыточным, но на деле он позволяет добиться более реалистичного освещения с бликами, рефлексами и разными материалами вроде стекла или меха, которые можно сделать в 3d в теории, в соответствующих редакторах, но в реальном времени рендерить в браузере не получится из-за проблем с производительностью. Нужно это или нет в вашем случае - решать вам.
В общем случает ответ на ваш вопрос - без модельки такое вращение не сделать. Она все равно понадобится либо для отображения непосредственно в браузере, либо для подготовки видов со всех сторон в разумные сроки. -
На чем можно сделать интерактивную схему/карту?
сделать подобное...
- Берем SVG-картинку со всеми этими цветочками, листиками и надписями.
- Встраиваем прямо в страницу. Далее с SVG элементами можем работать как с обычными HTML элементами.
- На :hover для надписей добавляем какие-то стили (используем CSS или JS по вкусу).
- Покачивания и морфинги можно сделать или с помощью SMIL-анимаций, или скриптами (действия все те же самые). В случае скриптов может быть удобно взять Anime.js или что-то аналогичное, чтобы меньше думать.
- Там еще есть перетаскивание и увеличение - можно реализовать либо с помощью трансформаций translateX/Y и scale для обертки всех элементов в SVG, либо менять viewBox. Чтобы это все работало с тачскринами и не было головной боли от кроссбраузерности - можно добавить Hammer.js.
- А, и на клик по надписям делаем переход на новую страницу, опять же по вкусу и потребностям - либо скрипты, либо стандартный тег "a".
Вот как-то так это все и делается. Более подробно про интерактивные планы можно почитать в статье про них, про SMIL подробно рассказано вот тут. - Берем SVG-картинку со всеми этими цветочками, листиками и надписями.
-
Как для современных браузеров выводить анимацию, а для старых картинку?
Можно сходить на Browserhacks.com, взять проверки на нужные вам браузеры и запускать анимацию в зависимости от их результата. Но это костыль, конечно. Тем более, что Safari - это не "старый браузер". -
Как сделать эффект поворота-разворота при скролинге как на сайте?
0. Делим 360 градусов на N частей. Получаем N направлений.
1. Делаем по картинке с коробкой для кажного из направлений. Сохраняем по порядку.
2. Загружаем все картинки (по одной, или спрайт с ними) на клиента.
3. Выводим на канвас по одной картинке, выбирая их в зависимости от позиции скролла.
Альтернативно - то же самое, но вместо канваса меняем url у элемента img (именно так у них сделано).
Альтернативно - сообразить 3D модель коробки, текстуру и загуглить, как делать презентации товаров на Three.js. -
Анимация на canvas/js?
На CSS вы это никак не сделаете - там неравномерное растяжение картинок присутствует. Тут "начальник отдела разработки" либо не шарит во фронтенде, либо пытается сбить цену. Но штука из разряда "ябзаверстал", а я тут как раз собираю коллекцию примеров с шейдерами, так что набросал похожий эффект для нее, только без кляксы в центре (там есть немного лишнего кода, но это издержки, чтобы серия примеров не сильно отличалась).
* Если вдруг будете копировать себе, не забывайте про лицензию. -
Как уменьшить svg код?
Пример километрового SVG
Это не SVG. Это обычная растровая png картинка, которую закодировали в base64 и вставили в SVG. Сжать никак не получится (ну то есть насколько вы растровую картинку сожмете?). Вам нужно эту штуку нарисовать изначально в векторе, тогда она будет маленькая и аккуратненькая. -
Где можно найти звуковые эффекты для сайта?
На freesound.org есть много всего, в том числе и звуки разных кнопок (по запросу "button"). -
Начал переводить документацию вебпака. Что скажете?
Документация - это не тяп-ляп и в продакшен. Документация живет с проектом и требует постоянного обновления. Хуже отсутствующей документации только устаревшая документация. Так что если вы готовы ее постоянно обновлять - то да, это будет полезно по крайней мере новичкам, которые захотели войти-в-айти без английского. Если не готовы, то ваше творение через пару месяцев устареет, а через год его можно будет выкинуть, так как все изменится до неузнаваемости. -
Как использовать чистый JS согласно БЭМ?
согласно БЭМ
Ради ясности стоит отметить, что если почитать первоисточник, то окажется, что БЭМ - это не только про названия классов и разделение всего по файлам, там целый набор инструментов идет в комплекте. Если вы хотите именно использовать весь их стек - то начать стоит оттуда.трудно уследить, что бы переменные не повторялись в своих наименованиях
Было бы логично использовать модули (гугл -> es6 modules).
P.S.: И почитайте про то, как сейчас скрипты собираются - это не просто склейка всего в один файл, там все немного сложнее. -
Что делает frontend разработчик кроме создание внешнего вида сайта?
Что делает frontend разработчик кроме создание внешнего вида сайта?
Пьет смузи, катается по офису на гироскутере, делает умное лицо на конференциях.Скучно ли быть фронтендером? Эта однотипная работа?
Кто-то клепает однотипные магазины на потоке, а кто-то делает замороченные рекламные сайты с кучей анимаций, интерактивные 3d-презентации и другую дичь. Это очень разные вещи. Но рутина наступает везде. Любая сложная область в конечном счете разбивается на набор известных задач, и все, дальше нужно делать почти одно и то же много раз. Принципиально новые проекты - большая редкость в программировании, лишь единицы что-то изобретают, большинство же решает задачи бизнеса. А они особо не меняются. Таков мир. А интерес - понятие очень субъективное. На вкус и цвет фломастеры разные. -
Где искать клевые сайты (блоги) с информацией для ознакомления?
Я натыкаюсь на такие блоги случайно и редко... Где и как искать... с раскрытием инфы на острие... на кого вы подписаны и не нарадуетесь?
Подписался в твиттере на ~50 аккаунтов людей и компаний, постящим по интересующим меня направлениям и все, больше ничего делать не надо (большее количество подписок не имеет особого смысла, там все повторяться начинает, подписался грубо говоря только на тех, о ком знал, кто это вообще). Как в отрасли происходит что-то действительно "на острие" и имеющее хоть какую-то практическую значимость - это сразу появляется в ленте. Статьи, инструменты, просто интересные идеи - все там. Можно пару раз в неделю заходить и узнавать, что в мире происходит. Такой своеобразный агрегатор всего стоящего получается. -
Как исправить ошибку JS?
Библиотека panolens.js хочет иметь конкретную версию three.js, которая прописана у нее в зависимостях (на данный момент 0.105.2), а у вас используется другая версия. Замените three.js в вашем проекте на версию 0.105.2 - npm хранит старые пакеты, так что с этим проблем быть не должно. -
Как сделать такой сайт?
Горизонтальная прокрутка - transform: translate для контейнера, привязанный к скроллу.
Косые блоки - transform: skew для блока, skew обратно для контента.
Размер косого блока удобно выразить через единицы vh.
Картинкам - object-fit: cover.
При наведении на блок меняем его opacity до 1, плюс transform: translate для текста и scale для картинки.
Переходы между страницами - немного css-трансформаций + что-нибудь вроде barba.js.
Авторы сего шедевра вместо CSS решили все рассчитывать на JS. Не удивительно, что все тормозит. -
Сайты/каталоги/базы с новыми сайтами и приложениями?
Интересность - понятие растяжимое и очень субъективное. Но если говорить про те вещи, которые могут быть полезными, то вам поможет twitter, как это ни странно. Подпишитесь на несколько десятков известных людей в интересующей области и будете видеть все полезные сайты и инструменты, которые появляются в их поле зрения. Там же можно найти ботов, которые постят полезности по конкретным темам. -
Как сделать анимацию трансформирующую один элемент в другой?
Является ли желтая квадратная форма в конце анимации видоизмененной кнопкой или же это совершенно другой элемент разметки?
По смыслу - это другой элемент. Если мы говорим про более-менее компонентный подход к верстке, то это должно быть очевидно. Кнопка - один компонент. Всплывающее окошко - другой компонент. Набросал небольшую заготовку:
С такими анимациями можно долго играться, самое главное - проверить в конечном итоге кроссбраузерность. А то в хроме и FF работает, а в каком-нибудь IE всякое может случиться.
P.S.: Но в целом - я голосую за реализацию таких вещей целиком на JS. Практика показывает, что в проектах с такими анимациями очень быстро собирается большое количество одновременно анимирующихся значений у большого количества элементов, которые нужно синхронизировать между собой. На CSS голова лопнет все это делать. И да, чем больше всего меняется в CSS-анимациях в единицу времени, тем выше шанс найти какой-нибудь редкий баг и долго ломать себе голову в поисках проблемы. Лучше уж взять какую-нибудь библиотеку вроде anime.js или любимый многими GSAP и использовать их. -
3D рендер в WEB?
Добавлю еще пару слов про эту задачу в целом (не про сайт по ссылке в вопросе, а вообще). Если нужно делать такую статичную штуку с выбором цвета стен, обоев, полов и.т.д., особенно если нужно дать пользователю возможность выбирать свой вариант, то можно поиспользовать SVG. Это немного внезапно, но тем не менее. Основная часть комнаты, тени и рефлексы - это обычная картинка с прозрачностью в нужных местах (ее можно встроить в SVG через тег image), стены, полы - это простые прямоугольники, на которые наложены 3D-трансформации. Дальше их можно заливать как угодно - цветами, текстурами... и не нужно будет ломать себе мозг вопросом о том, как на лету повернуть "нормальную" текстуру и сделать из нее пол с перспективой. Мебель заливается цветом не намного сложнее - делается SVG-маска в форме предмета мебели и применяется фильтр hue-rotate. Таким образом можно "на коленке" соорудить работающий вариант такой презентации. -
Качество работы штатного программиста. Как оценивать?
Что посоветуете? Брать тестера? Менять разработчиков? Менять процессы?
На мой взгляд (личный опыт, могу ошибаться) полезно поговорить с разработчиками и объяснить им, что есть задачи бизнеса. Они не в вакууме код пишут. Есть пользователи программного продукта, которым нужно дать возможность решать какие-то свои задачи с его помощью. Это - их главная работа, а не формальное выполнение тасков из джиры. Пока мышление у них не перестроится вы можете нанимать тестеров, менять процессы, но подход "и так сойдет" не искоренится.
А как придет понимание, что есть пользователи и нужно о них заботиться, уже можно говорить о внедрении планок качества или об автоматизации тестирования. Можно начать не с хардкорного TDD, а с более мягкого подхода, соответствующего этой идее: взять что-нибудь вроде codecept.js и по-быстрому описывать сценарии взаимодействия пользователя с системой. Сначала основные, которые обязательно должны работать, потом альтернативные, где обработка ошибок происходит. Собственно и изначальное ТЗ формулировать в виде сценария взаимодействия. Можно отвести под тесты отдельный сервер (ненужное железо всегда можно где-нибудь найти). Потом, как привыкнут, попробовать покрывать все юнит тестами или еще что-то внедрять, своим примером показывая, что это и правда может экономить время на поиск багов или давать какие-то еще полезности. Иными словами стоит сначала перестраивать мышление, а потом уже улучшать технические моменты.
- 1
- 2
- 3
- 4
- 5
- Следующие →