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

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

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

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

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

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

    Саморазвитие на фрилансе по-любому будет идти медленнее, чем в развитой продуктовой компании.
    Ответ написан
  • Может ли веб программист стать еще и веб дизайнером при отсутствии явных способностей?

    paulradzkov
    @paulradzkov
    Дизайнер, верстальщик, начальник отдела UI
    Дизайн пользовательского интерфейса — это смесь инженерии, психологии и хорошего вкуса. Чтобы стать дизайнером не обязательно уметь рисовать. Достаточно иметь здравый смысл, некоторое количество знаний и развить вкус (натренировать свою нейросеть видеть разницу между красивыми дизайнами и некрасивыми).

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

    Если вам нравится делать работу дизайнера, читать/смотреть про дизайн, рассматривать красивые сайты, то у вас есть все шансы со временем стать хорошим дизайнером.

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

    Самая действенная мотивация — это получать удовольствие от процесса.
    Ответ написан
  • Как открыть цифровую клавиатуру на телефоне при вводе в input type="text"?

    paulradzkov
    @paulradzkov
    Дизайнер, верстальщик, начальник отдела UI
    У инпутов есть атрибут, с помощью которого можно управляться отображаемой клавиатурой на мобильных девайсах — «inputmode».
    https://developer.mozilla.org/en-US/docs/Web/HTML/...

    Сам не пробовал, но может это вам поможет.
    Ответ написан
  • Как вы пишете статьи?

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

    https://paper.dropbox.com/

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

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

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

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

  • Из каких англоязычных ресурсов предпочитаете получать свежую информацию из мира UI / UX / Web Design?

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

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

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

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

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

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

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

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

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

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

    Если все совсем плохо и пользователи не учатся, или каждый раз новые, не стесняйтесь сделать в навигации пункт «на главную».
    Ответ написан
  • Где разместить свой блог на 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, то это первый кандидат.
    Ответ написан
  • Нормален ли такой подход для работы с git'ом(хранение дизайн+код)?

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

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

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

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

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

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

    Если кода не видно, зайдите в режиме инкогнито (без адблока).
    Ответ написан
  • Существуют ли какие-нибудь фреймворки для ВЕБ-ДИЗАЙНЕРОВ?

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

    Есть и бесплатные, но это уже просто «UI kits» — designmodo.com/freebies/ui-kits
    Ответ написан
  • Где посмотреть примеры качественного кода вёрстки сайтов, лендингов, веб-приложений?

    paulradzkov
    @paulradzkov
    Дизайнер, верстальщик, начальник отдела UI
    Первый путь.
    На Гитхабе поискать по ключевым словам (BEM, SMACSS, OOPCSS) — найдутся бойлерплейты и стартеркиты, которые по определению должны быть хорошего качества.

    Можно искать глубже, по упоминанию в исходном коде этих ключевых слов — найдутся тысячи проектов, но тут сложнее определить, что качественнее.

    Второй путь.
    Искать в Гугле людей, которые пишут про BEM, SMACSS, OOPCSS и прочих крутых фронтендеров. Искать их профили на гитхабе, изучать их проекты. Если они пишут про методологии, то они явно их используют в работе.
    Ответ написан
  • Что за артефакты на странице при отдаче HTTP/1.1 404 Not Found?

    paulradzkov
    @paulradzkov
    Дизайнер, верстальщик, начальник отдела UI
    Возможно, что у вас ответ приходит в кодировке UTF-8 with BOM (Byte Order Mark), а браузер ожидает другую, например, Latin 1 (ISO 8859-1). В этом случае на странице появляются символы, которых не было в исходном коде. Проверьте source проблемной страницы: в самом начале может быть такое 
    В UTF-8 без BOM таких проблем не будет.
    Ответ написан