Ответы пользователя по тегу Веб-разработка
  • Как увеличить картинку превью сайта при вставке ссылки в соц. сети?

    paulradzkov
    @paulradzkov
    Дизайнер, верстальщик, начальник отдела UI
    Я пользуюсь гайдами фейсбука для Open Graph картинок: https://developers.facebook.com/docs/sharing/webma...

    Они рекомендуют 1200×630 px для большой картинки.
    Ответ написан
    1 комментарий
  • Как обойти ограничения при использовании рекурсии в less*?

    paulradzkov
    @paulradzkov
    Дизайнер, верстальщик, начальник отдела UI
    https://codepen.io/paulradzkov/pen/vjEdbM

    Вместо рекурсивного определения переменной, рекурсивно вызываем миксин:

    @num: 100;
    .mixin(@num) when (@num > 0) {
      .mixin(@num - 1);
      .square-@{num} {
        animation-delay: @num;
      }
    }
    .mixin(@num);
    Ответ написан
  • Где взять тестовые данные для дизайна?

    paulradzkov
    @paulradzkov
    Дизайнер, верстальщик, начальник отдела UI
    https://www.lists.design
    Они же на GitHub https://github.com/listsfordesign/Lists

    Если вы рисуете в Sketch, то https://www.invisionapp.com/craft#data
    Ответ написан
    Комментировать
  • Как распознать изменение области на странице сайта?

    paulradzkov
    @paulradzkov
    Дизайнер, верстальщик, начальник отдела UI
    Для Хрома есть расширения
    https://chrome.google.com/webstore/detail/visualpi...
    https://chrome.google.com/webstore/detail/page-mon...
    https://chrome.google.com/webstore/detail/distill-...
    и наверное есть другие.

    Работоспособность не проверял, но заявлено, что у последних двух можно поставить интервал проверок 5 секунд
    Ответ написан
    Комментировать
  • Как начать брать крупные заказы на фрилансе?

    paulradzkov
    @paulradzkov
    Дизайнер, верстальщик, начальник отдела UI
    Большинство советует потратить полгода-год, работая в компании, но вопрос стоит «Как начать брать крупные заказы на фрилансе?». Да, работа в продуктовой компании поможет поднять свой уровень, но это не тот ответ. После работы в хорошей компании может и не захотеться возвращаться во фриланс. Вопрос стоит «как повысить свою компетентность, продолжая работать на фрилансе, и выбраться из потенциальной ямы лендингов и бложиков?»

    Есть разница в подходах к разработке. На фрилансе, обычно, проектная работа, сделал побыстрее, получил деньги и забыл. В компаниях при продуктовой разработке над одним продуктом работают по много лет, продукт живет, усложняется, эволюционирует. Чтобы продуктом было легче управлять, используют всякие фреймворки, архитектуры, подходы в проектировании и т.д. Без длительной работы над одним проектом всё это не нужно.

    Применяйте продуктовые подходы во фрилансе.
    Свяжитесь с прошлыми заказчиками и поинтересуйтесь, всё ли работает как ожидалось, надо ли что-то доделать, переделать или улучшить. Заполучите постоянных заказчиков. Если повторно поработаете над своим прошлым проектом, заметите, что было сделано не очень, и поймете, как делать лучше сразу.

    В новых проектах старайтесь выторговать больше времени. И за это дополнительное время пробуйте сделать больше, чем просили. Например, сделайте клиентскую оптимизацию, выбейте как можно больше очков в pagespeed, напишите документацию. Делайте проекты с мыслью о том, что этот проект к вам вернется и пробуйте на практике, всё, что хочется изучать.

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

    Саморазвитие на фрилансе по-любому будет идти медленнее, чем в развитой продуктовой компании.
    Ответ написан
    3 комментария
  • Как вы пишете статьи?

    paulradzkov
    @paulradzkov
    Дизайнер, верстальщик, начальник отдела UI
    Меня неожиданно и приятно удивил Dropbox Paper. Там есть Markdown, подсветка кода, to do lists с галочками.
    Для черновиков очень подходит: автосохранение, доступ даже с мобильного, не нужно задумываться о коммитах, минималистичный интерфейс как у meduim, возможность поделиться документом и обсудить.

    https://paper.dropbox.com/

    Ну а потом для финальной публикации, вычитки и поддержки — gitbook или что-то своё.
    Ответ написан
    1 комментарий
  • Как правильно подготовить SVG-спрайт к вёрстке?

    paulradzkov
    @paulradzkov
    Дизайнер, верстальщик, начальник отдела UI
    Когда-то я пытался побороть эту проблему и спрашивал об этом на Хабре https://habrahabr.ru/post/245583/#comment_8183581 (и демка есть).

    Это пока не лечится (я не встречал железобетонного решения). Даже идеальные иконки могут попадать между пикселей в браузере. Потому что, в браузере вычисленные значения высоты и ширины могут быть нецелочисленными. И тут суб-пиксельное сглаживание играет дурную роль: «мы теперь не обязаны округлять начальную позицию иконки до целых пикселей, мы может отрендерить ее прямо здесь, в точке 33.24px 46.05px! ура!»

    Без размытия будет когда svg внедряется через тег img, бэкграунд или base64. Но это уже не SVG-спрайт.
    Ответ написан
    Комментировать
  • Есть какой-то инструмент для сравнения и объединения стилей из файлов css?

    paulradzkov
    @paulradzkov
    Дизайнер, верстальщик, начальник отдела UI
    winmerge.org/?lang=ru или другие подобные инструменты (даже в total commander есть похожий функционал).
    Ответ написан
    1 комментарий
  • Из каких англоязычных ресурсов предпочитаете получать свежую информацию из мира UI / UX / Web Design?

    paulradzkov
    @paulradzkov
    Дизайнер, верстальщик, начальник отдела UI
    Ленивый способ — поставить расширение muz.li вместо стандартной новой вкладки https://chrome.google.com/webstore/detail/muzli-2-...

    Несколько раз в день на глаза будет попадаться всякое новье с популярных сайтов. (Но иногда это отвлекает от работы)
    Ответ написан
    1 комментарий
  • Стоит ли делать залипающее меню?

    paulradzkov
    @paulradzkov
    Дизайнер, верстальщик, начальник отдела UI
    Фиксировать меню можно, когда достаточно вертикального пространства для основного контента (высота залипшего меню меньше либо равно 10% высоты вьюпорта).

    Если места под контент мало надо скрывать залипшее меню при прокрутке вниз, и выдвигать его при прокрутке вверх. Это позволит убрать ссылку «прокрутить вверх».

    То же самое на мобильниках: листаем вниз — весь экран под контент, как только листаем вверх — вылазит меню.
    Ответ написан
  • Друзья программисты сегодня я провалил своё первое собеседование с клиентом на создание веб сайта. Объясните джуниоуру как это делается?

    paulradzkov
    @paulradzkov
    Дизайнер, верстальщик, начальник отдела UI
    Раз всё принимается, Как вы делаете дизайн сайта? тут я отвечал на смежную тему.

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

    На первом собеседовании вы продаете себя как специалиста. На последующих чекпоинтах — результаты своей работы.
    Ответ написан
    3 комментария
  • Как подсказать пользователю (взрослый контингент) что логотип является ссылкой на главную страницу сайта?

    paulradzkov
    @paulradzkov
    Дизайнер, верстальщик, начальник отдела UI
    При hover на логотипе сделайте какую-нибудь анимацию, например, фона. И добавьте tooltip с текстом «на главную» getbootstrap.com/javascript/#tooltips

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

    Если все совсем плохо и пользователи не учатся, или каждый раз новые, не стесняйтесь сделать в навигации пункт «на главную».
    Ответ написан
    Комментировать
  • Какой есть сервис для ведения бюджета?

    paulradzkov
    @paulradzkov
    Дизайнер, верстальщик, начальник отдела UI
    https://zenmoney.ru/ — не уверен насчет совместного ведения с разделением доступа. Остальное есть.
    Ответ написан
    Комментировать
  • Где разместить свой блог на it тематику?

    paulradzkov
    @paulradzkov
    Дизайнер, верстальщик, начальник отдела UI
    На https://pages.github.com/ заведите блог.

    Преимущества:
    Бесплатный хостинг, быстрый, стабильный, без рекламы, поддерживает https
    Крутое «прогерское» доменное имя — username.github.io
    Полный контроль над кодом — можно использовать стандартный блоговый шаблон на Jekyll, а можно сделать полностью свой — до последней строчки кода — сайт.
    Ответ написан
    Комментировать
  • Какой лучший движок для информационных сайтов?

    paulradzkov
    @paulradzkov
    Дизайнер, верстальщик, начальник отдела UI
    Для информационных сайтов лучше всего подходят генераторы статики.
    Доводы в пользу генераторов статики и против большинства классических CMS для информационных сайтов:

    1) Контент неудобно хранить в базе, как делает большинство CMS.

    Если контент в базе, то его тяжело бэкапить и восстанавливать из бэкапа, неудобно сравнивать версии до изменения и после. Тяжело откатить изменения в конкретной статье, не затронув всё остальное. Для всего этого в CMS должна быть запрограммирована собственная функциональность.

    Если хранить контент в файлах (так делают все генераторы статики), то связка «файлы + GIT» даёт легкий бэкап, сравнение и восстановление контента целиком и отдельным статьям почти с нулевыми затратами.

    2) Редакторы контента в админке (TinyMCE, CKeditor) обычно неудобные и часто выдают посредственный код. А еще тяжело настраиваются. Контент-менеджеры, которые умеют верстать, всё равно тянут код в текстовый редактор, правят там и вставляют обратно.

    Быстрее сразу работать с файлами в любимом редакторе кода. От этого можно получить дополнительные плюшки в виде подсветки измененных строк по сравнению с последним коммитом и некоторые другие.

    3) Markdown поддерживают все генераторы статики, а это самый удобный язык для написания контента. Markdown компилируется в качественный и чистый HTML. При необходимости Markdown можно смешивать с HTML.

    4) С классическими CMS, где контент в БД, разработчику приходится держать localhost и/или dev версию сайта с копией живой базы данных и синхронизировать их между собой. Чаще синхронизация односторонняя (с лайва на локалхост), т.к. мерждить базы сложно и страшно что-то сломать на лайве. А в таких случаях, контентщикам приходится сначала делать все локально, а потом повторять на лайве.

    С генераторами статики в этом так же просто как с файлами: можно нарендерить несколько версий для тестирования, сделать зеркала и т.д.

    5) Скорость и безопасность. Статический сайт по определению быстрее любой CMS. Сгенерированный сайт легко положить в CDN и получить максимальную скорость открытия при любых нагрузках. А еще статические сайты не взламываются.

    https://www.staticgen.com/ — список всех генераторов статики, отсортированный по популярности.

    Сам уже года три пользуюсь docpad.org — генератор на node.js. Не сказал бы, что это идеальный инструмент. Я на нем потому, что уже хорошо его знаю, и у меня собралось много наработок для docpad, в том числе автоматизация.

    Так же отмечу https://octobercms.com/ — CMS, которая следует принципам генераторов статики. Сам еще не пробовал, но если понадобится поддержка PHP, то это первый кандидат.
    Ответ написан
    4 комментария
  • Нормален ли такой подход для работы с git'ом(хранение дизайн+код)?

    paulradzkov
    @paulradzkov
    Дизайнер, верстальщик, начальник отдела UI
    Нет, неудобно.
    Версии у дизайна и кода меняются несинхронно. В общем случае, сначала обновляется версия дизайна, потом дизайн согласуют. Потом верстают согласованную версию, и, когда готово, меняют версию у кода.
    До согласования у дизайна может смениться несколько версий, на верстку попадет одна. И у кода может смениться несколько версий без изменения дизайна.
    Нет смысла синхронизировать дизайн и код, и хранить их в одном репозитории.

    Попробуйте https://www.pixelapse.com/ — система контроля версий для дизайнеров.
    Или www.invisionapp.com — там тоже есть версионность исходников, можно «форкать» проекты (но «мерджить» нельзя)
    Ответ написан
    Комментировать
  • Веб-дизайнеры, где вы делаете дизайн сайтов и приложений?

    paulradzkov
    @paulradzkov
    Дизайнер, верстальщик, начальник отдела UI
    Основной рабочий инструмент на Маке это Sketch, на Винде — Adobe Fireworks. Photoshop использую только для создания коллажей, баннеров и обработки фотографий. Illustrator я так и не освоил: он мне видится монструозным и неудобным по сравнению со Скетчем и Файрворксом.
    Ответ написан
    3 комментария
  • Адаптивная вёрстка - как побороть боль?

    paulradzkov
    @paulradzkov
    Дизайнер, верстальщик, начальник отдела UI
    Методология, которая снимает боль, называется «Mobile First». Bootstrap ее тоже использует.

    Суть кратко: мобильный макет обычно выглядит проще всего, там одна колонка, минимум декора → верстаем его в первую очередь. В css на этом этапе появятся стили для текста, фоны, цвета, какие-то базовые отступы.
    На более крупных экранах макет усложняется, появляются колонки и т.д. При помощи media queries к мобильной версии дописываем layout-стили, переопределяем уже написанные стили, если нужно (например, размер шрифта увеличился). Базовые стили наследуются из уже написанного кода.
    И так для каждого компонента, начиная от маленького экрана заканчивая самым большим, «уточняем» верстку пока не будет все как на дизайне.

    Делал когда-то кодкаст по такой методологии cssdeck.com/labs/adaptive-tabs
    Нажмите кнопку «play» чтобы посмотреть процесс написания кода.

    Если кода не видно, зайдите в режиме инкогнито (без адблока).
    Ответ написан
    Комментировать
  • Где грань авторского права в верстке?

    paulradzkov
    @paulradzkov
    Дизайнер, верстальщик, начальник отдела UI
    Я бы порекомендовал вам задать этот вопрос Владимиру Беляеву artgorbunov.ru/bb/soviet/belyaev
    Ответ написан
    Комментировать
  • Существуют ли какие-нибудь фреймворки для ВЕБ-ДИЗАЙНЕРОВ?

    paulradzkov
    @paulradzkov
    Дизайнер, верстальщик, начальник отдела UI
    Платные дизайн-фреймворки — designmodo.com/shop
    Обратите внимание на Startup Design Framework — designmodo.com/startup
    На момент выхода он очень хорошо продавался и в результате пошла мода на дизайнерские фреймворки.

    Есть и бесплатные, но это уже просто «UI kits» — designmodo.com/freebies/ui-kits
    Ответ написан
    Комментировать