• Как сохранить пропорции таблицы при уменьшении разрешения?

    paulradzkov
    @paulradzkov
    Дизайнер, верстальщик, начальник отдела UI
    https://codepen.io/paulradzkov/pen/zzvOvR?editors=1100
    вариант без svg и без js, но с кучей других органичений:
    - нужно знать точные width и height таблицы для calc вычислений в css
    - нужно знать все дополнительные горизонтальные размеры вокруг таблицы. это могут быть маргины, паддинги, ширина сайдбара и т.д.
    - нужно делать кастомный брейкпоинт на основании всех этих размеров

    Добавлено
    Поторопился я отправлять — работает только в blink и webkit
    Ответ написан
  • Почему нет доступа к репозиторию при деплое?

    paulradzkov
    @paulradzkov
    Дизайнер, верстальщик, начальник отдела UI
    У меня когда-то была ситуация, что скрипт деплоя на GitHub не видел репозиторий через «remote origin». Пришлось задавать отдельно новый «remote deploy» с явно заданным логином и паролем.
    Ситуация описана здесь paulradzkov.com/2014/deploy_docpad_site_to_github_...
    Может поможет.
    Ответ написан
  • Имею ли я право использовать фотографии городов и их достопримечательностей внутри игр, программ и сайтов легально и бесплатно?

  • Как сделать отступы между картинкой с float:left и маркерами списка рядом с ней?

    paulradzkov
    @paulradzkov
    Дизайнер, верстальщик, начальник отдела UI
    Когда-то писал статью об этом paulradzkov.com/2013/lists_and_floats
    И решение работало несколько лет. Но пару недель назад в новых хроме и опере появился баг: пока не поресайзишь окно, буллиты прилипают к левой границе контейнера.
    Но в статье есть и «старое» решение, у которого были проблемы с размеров буллитов в IE.
    Ответ написан
  • Как сделать чтобы блоки выстраивались с право на лево?

    paulradzkov
    @paulradzkov
    Дизайнер, верстальщик, начальник отдела UI
    Самый древний способ — direction: rtl;
    htmlbook.ru/css/direction
    Контейнеру direction: rtl; — чтобы пустить блоки справа налево.
    Блокам direction: ltr; — чтобы контент внутри блоков вернулся в нормальный поток.

    И вместе с ним можно использовать и флоаты, и инлайн-блоки, и таблицы.
    Но лучше флексы :)
    Ответ написан
  • Как в sketch выбрать инструмент selection как в photoshop?

    paulradzkov
    @paulradzkov
    Дизайнер, верстальщик, начальник отдела UI
    Selection и Magic Wand можно выбрать только сделав дабл-клик по растровому слою. (или выделить слой с картинкой, нажать edit → в правой панели увидите selection и magic wand). Для векторных слоев и смешанных групп это не работает.
    Ответ написан
  • Как на ретина-дисплеях установить повторяющийся фон?

    paulradzkov
    @paulradzkov
    Дизайнер, верстальщик, начальник отдела UI
    Надо прописывать два фона — обычный, и «ретина» через медиа-запросы:
    .something {
        background-image: url(path/to/bg@1x.png);
    }
    @media screen and (min-resolution: 2dppx) { 
         .something {
            background-image: url(path/to/bg@2x.png);
        }
    }


    https://developer.mozilla.org/en-US/docs/Web/CSS/M...
    Ответ написан
  • Как строить карьеру в дизайне?

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

    Кто-то находится на уровне «иконки и баннеры», а вот качественно справиться с лендингом уже не может.
    Кто-то на уровне «страница» клепает лендинги и сайты из 10 страниц для малого бизнеса.
    Кто-то справляется с крупным на 100 экранов.
    Кто-то вышел на уровень «UI kit» и управляет дизайнерами с более низких уровней в масштабах крупного проекта.
    Кто-то способен создавать «дизайн-системы» и развивать несколько крупных проектов в рамках корпорации, заботится о восприятии бренда этой корпорации.
    Кто-то поднялся на уровень «архитектор платформы или операционной системы» и создает гайды для операционок, такие штуки как Material Design, в рамках которых существуют продукты множества других корпораций.

    В зависимости от отрасли и специализации деление на уровни может быть разным, больше-меньше уровней, но уровни есть везде. Первые 2-3 уровня достигаются довольно быстро, но переход на каждый последующий уровень даётся всё дольше и большими усилиями, требует умножения знаний.

    Программист с реальным опытом коммерческой разработки в 10 лет, вряд ли станет работать ниже сеньора, а то и тим лида, то дизайнер с подобным опытом по сути, остается таким же специалистом, что и люди, с опытом 1-2 года
    — это не так.

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

    Особенно опасно долго оставаться на фрилансе, т.к. там обычно обитают малые и средние заказы, крупные проекты — редкость, а масштабных просто не бывает.

    За год на фрилансе или в маленькой дизайн студии можно сделать десятки лендингов. После десятого и после сотого лендинга уровень профессионализма дизайнеров отличается много меньше, чем в 10 раз. Конкуренция происходит в рамках одного уровня.

    За тот же год можно сделать 1-2 крупных сервиса. Но чтобы положить в портфолио работу ещё более крупного масштаба, нужно уже несколько лет.

    Вы сейчас «предлагаете комплексные услуги», скорее всего, на фрилансе или в небольшой дизайн-студии и достигли «плато», когда развитие идёт всё медленнее. Если заполучить более сложный и масштабный проект не получается, уходите работать в продуктовую компанию. Там есть возможность расти в масштабе и переходить на новый уровень. Нужно рваться получить левел-ап, тогда дизайнеры с предыдущего уровня вам не будут конкурентами.
    Ответ написан
  • Как начать брать крупные заказы на фрилансе?

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

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

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

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

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

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

    paulradzkov
    @paulradzkov
    Дизайнер, верстальщик, начальник отдела UI
    Можно вообще без скриптов сделать через :nth-child()codepen.io/paulradzkov/pen/VbpNGM?editors=1100

    Рассмотрим этот селектор:
    table tbody > tr:nth-child(n + 11) {
        display: none;
    }


    Он выбирает все ряды, начиная с 11-го, внутри tbody и скрывает их.
    Шапка таблицы должна лежать в thead, тогда она не учитывается и может иметь любое количество рядов.

    В последнюю строку таблицы обычно пишут какой-то суммарный результат, для этого есть тег tfoot.
    Если поместить последнюю строку в него, то она будет видна в любом состоянии.

    Структура таблицы получится такой:
    <table>
        <thead>
            <tr>
                <th></th><th></th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th></th><td></td>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <th></th><td></td>
            </tr>
            ...
            <tr>
                <th></th><td></td>
            </tr>
        </tbody>
    </table>
    Ответ написан
  • Может ли веб программист стать еще и веб дизайнером при отсутствии явных способностей?

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

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

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

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

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

    paulradzkov
    @paulradzkov
    Дизайнер, верстальщик, начальник отдела UI
    Про GitHub.

    1) Любой проект, даже самый маленький начинаю в новом репозитории. Потому что:
    - мало ли что из него вырастет,
    - код в Гитхабе это бэкап, не засерается место в Дропбоксе или других облаках,
    - мгновенный поиск по коду в репозитории, актуально когда проект уже достаточно большой,
    - легче спросить совета у коллег или показать проблему, когда исходники можно посмотреть онлайн,
    - проект удобно хоронить, если он заглох, или закинуть в портфолио, если он клевый.

    2) Создал себе на Гитхабе две дополнительные организации внутри своего аккаунта.
    - «paulradzkov-forks» — для форков чужих проектов.
    - «paulradzkov-heaven» — кладбище для старых проектов, куда перемещаются все неактуальные проекты.
    Эти две дополнительные организации позволяют очистить основной аккаунт от мусора. В нем теперь только несколько актуальных проектов, в которых легко ориентироваться.

    3) Перемещаю все старые проекты из Дропбокса на Гитхаб в «paulradzkov-heaven». Проектов много, это долго, но освободилось уже несколько гигов (т.к. там кроме кода psd-исходники, архивы с инсталляторами и прочее). Место в облаках заканчивается, а на Гитхабе — резиновое.
    Это кладбище уже пригодилось, когда у меня попросили поискать исходники проекта, над которым я работал 3 или 4 года назад, а я через минуту ответил им ссылкой на нужный репозиторий. Не пришлось никуда лезть, распаковывать, искать, запаковывать, отправлять почтой или закачивать в облако.
    Повторюсь, что на Гитхабе классный поиск по исходникам: если нужно посмотреть, как что-то сделал в старом проекте, но не помнишь в каком — можно довольно быстро найти искомое без возни с архивами.

    Итого.
    Код должен лежать на Гитхабе.
    В том числе старые проекты.
    Используйте организации, чтобы рассортировать проекты, если их много.
    Порядок там, где у каждой вещи есть своё место. Придумайте себе правила порядка заранее и соблюдайте их, чтобы не тратить время на ликвидацию беспорядка.
    Ответ написан
  • Как присоединиться к организации?

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

    Вы можете создать свою организацию для личного пользования и приглашать туда других людей.
    take.ms/aGEVs (в верхней панели «+» → «New organization»)

    Я сделал себе организацию «paulradzkov-forks» в которой храню форки чужих проектов, чтобы они не смешивались с моими личными репозиториями.

    И организацию «paulradzkov-heaven», в которую хороню мертвые проекты.
    Ответ написан
  • Примеры и идеи инфо-блоков для сайта?

    paulradzkov
    @paulradzkov
    Дизайнер, верстальщик, начальник отдела UI
    Если хотите потырить идеи, раскачать мозги или хлебнуть вдохновения, то погуглите по запросу «UI kit» на Behance, или в магазинах, типа UI8, или на сайтах производителей этих шаблонов, например, greatsimple.io

    В UI kit'ах используется компонентный подход и там можно найти различные элементы для сайта в нескольких вариациях, в том числе инфоблоки. пример: module01.greatsimple.io/.
    Ответ написан
  • Как открыть цифровую клавиатуру на телефоне при вводе в 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 или что-то своё.
    Ответ написан
  • Как правильно задать размеры для IMG если заранее не известны размеры картинки?

  • Уменьшение размера текста относительно его количества - как действовать?

    paulradzkov
    @paulradzkov
    Дизайнер, верстальщик, начальник отдела UI
    Можно попробовать использовать transform: scale().

    1. Узнавать через js высоты контейнера и блока текста. Текст пока с прокруткой.
    2. Высчитывать через пропорцию коэф. уменьшения, чтобы выровнять высоту блока текста и контейнера.
    3. Применять к блоку с текстом transform: scale() с вычисленным коэффициентом. Тогда видимая ширина блока текста внутри контейнера уменьшится, появятся margins справа и слева.
    4. На тот же коэффициент увеличить ширину блока текста. Тогда текст начнет занимать меньше строк и под текстом появится пустое пространство.
    5. Похимичить с формулами, чтобы отступ снизу был минимальным.

    Может этот вариант натолкнет вас на решение. По крайней мере у него фиксированное количество итераций.
    Ответ написан
  • Как правильно подготовить SVG-спрайт к вёрстке?

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

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

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